q2-tecton-elements 1.44.1 → 1.45.1

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 (482) hide show
  1. package/dist/cjs/click-elsewhere_2.cjs.entry.js +2 -2
  2. package/dist/cjs/{index-9272f57a.js → index-0430339e.js} +1 -1
  3. package/dist/cjs/{index-9272f57a.js.map → index-0430339e.js.map} +1 -1
  4. package/dist/cjs/{index-1deac3ee.js → index-0e15dc8d.js} +14 -1
  5. package/dist/cjs/index-0e15dc8d.js.map +1 -0
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
  8. package/dist/cjs/q2-avatar.cjs.entry.js +1 -5
  9. package/dist/cjs/q2-avatar.cjs.entry.js.map +1 -1
  10. package/dist/cjs/q2-badge.cjs.entry.js +4 -4
  11. package/dist/cjs/q2-badge.cjs.entry.js.map +1 -1
  12. package/dist/cjs/q2-btn_2.cjs.entry.js +20 -9
  13. package/dist/cjs/q2-btn_2.cjs.entry.js.map +1 -1
  14. package/dist/cjs/q2-calendar.cjs.entry.js +52 -20
  15. package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
  16. package/dist/cjs/q2-card.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-carousel-pane.cjs.entry.js +7 -6
  18. package/dist/cjs/q2-carousel-pane.cjs.entry.js.map +1 -1
  19. package/dist/cjs/q2-carousel.cjs.entry.js +25 -11
  20. package/dist/cjs/q2-carousel.cjs.entry.js.map +1 -1
  21. package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
  22. package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
  23. package/dist/cjs/q2-chart-donut.cjs.entry.js +18 -10
  24. package/dist/cjs/q2-chart-donut.cjs.entry.js.map +1 -1
  25. package/dist/cjs/q2-checkbox-group.cjs.entry.js +1 -1
  26. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  27. package/dist/cjs/q2-data-table.cjs.entry.js +3 -3
  28. package/dist/cjs/q2-data-table.cjs.entry.js.map +1 -1
  29. package/dist/cjs/q2-detail.cjs.entry.js +2 -2
  30. package/dist/cjs/q2-detail.cjs.entry.js.map +1 -1
  31. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  32. package/dist/cjs/q2-dropdown-item.cjs.entry.js.map +1 -1
  33. package/dist/cjs/q2-dropdown.cjs.entry.js +1 -1
  34. package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-icon.cjs.entry.js +204 -213
  36. package/dist/cjs/q2-icon.cjs.entry.js.map +1 -1
  37. package/dist/cjs/q2-input.cjs.entry.js +31 -6
  38. package/dist/cjs/q2-input.cjs.entry.js.map +1 -1
  39. package/dist/cjs/q2-item.cjs.entry.js +120 -0
  40. package/dist/cjs/q2-item.cjs.entry.js.map +1 -0
  41. package/dist/cjs/q2-list.cjs.entry.js +84 -0
  42. package/dist/cjs/q2-list.cjs.entry.js.map +1 -0
  43. package/dist/cjs/q2-loc.cjs.entry.js +2 -2
  44. package/dist/cjs/q2-message.cjs.entry.js +3 -3
  45. package/dist/cjs/q2-message.cjs.entry.js.map +1 -1
  46. package/dist/cjs/q2-month-picker.cjs.entry.js +1 -1
  47. package/dist/cjs/q2-optgroup_2.cjs.entry.js +4 -4
  48. package/dist/cjs/q2-optgroup_2.cjs.entry.js.map +1 -1
  49. package/dist/cjs/q2-option-list.cjs.entry.js +1 -1
  50. package/dist/cjs/q2-pagination.cjs.entry.js +3 -3
  51. package/dist/cjs/q2-pagination.cjs.entry.js.map +1 -1
  52. package/dist/cjs/q2-pill.cjs.entry.js +4 -3
  53. package/dist/cjs/q2-pill.cjs.entry.js.map +1 -1
  54. package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
  55. package/dist/cjs/q2-radio.cjs.entry.js +3 -3
  56. package/dist/cjs/q2-radio.cjs.entry.js.map +1 -1
  57. package/dist/cjs/q2-relative-time.cjs.entry.js +2 -2
  58. package/dist/cjs/q2-section.cjs.entry.js +3 -3
  59. package/dist/cjs/q2-select.cjs.entry.js +1 -1
  60. package/dist/cjs/q2-stepper-pane.cjs.entry.js +2 -2
  61. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +3 -3
  62. package/dist/cjs/q2-stepper-vertical.cjs.entry.js.map +1 -1
  63. package/dist/cjs/q2-stepper.cjs.entry.js +2 -2
  64. package/dist/cjs/q2-tab-container.cjs.entry.js +3 -3
  65. package/dist/cjs/q2-tab-container.cjs.entry.js.map +1 -1
  66. package/dist/cjs/q2-tab-pane.cjs.entry.js +1 -1
  67. package/dist/cjs/q2-tag.cjs.entry.js +3 -3
  68. package/dist/cjs/q2-tag.cjs.entry.js.map +1 -1
  69. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  70. package/dist/cjs/q2-textarea.cjs.entry.js +2 -2
  71. package/dist/cjs/q2-textarea.cjs.entry.js.map +1 -1
  72. package/dist/cjs/q2-tooltip.cjs.entry.js +1 -1
  73. package/dist/cjs/tecton-tab-pane.cjs.entry.js +2 -2
  74. package/dist/collection/collection-manifest.json +2 -0
  75. package/dist/collection/components/q2-avatar/q2-avatar.js +1 -5
  76. package/dist/collection/components/q2-avatar/q2-avatar.js.map +1 -1
  77. package/dist/collection/components/q2-badge/q2-badge.js +5 -4
  78. package/dist/collection/components/q2-badge/q2-badge.js.map +1 -1
  79. package/dist/collection/components/q2-btn/q2-btn.css +1 -1
  80. package/dist/collection/components/q2-btn/q2-btn.js +25 -8
  81. package/dist/collection/components/q2-btn/q2-btn.js.map +1 -1
  82. package/dist/collection/components/q2-calendar/q2-calendar-helpers.js +1 -1
  83. package/dist/collection/components/q2-calendar/q2-calendar-helpers.js.map +1 -1
  84. package/dist/collection/components/q2-calendar/q2-calendar.js +49 -17
  85. package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
  86. package/dist/collection/components/q2-carousel/q2-carousel.css +3 -1
  87. package/dist/collection/components/q2-carousel/q2-carousel.js +47 -10
  88. package/dist/collection/components/q2-carousel/q2-carousel.js.map +1 -1
  89. package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.css +6 -0
  90. package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js +25 -4
  91. package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js.map +1 -1
  92. package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +17 -12
  93. package/dist/collection/components/q2-chart-donut/q2-chart-donut.js.map +1 -1
  94. package/dist/collection/components/q2-data-table/q2-data-table.css +1 -1
  95. package/dist/collection/components/q2-data-table/q2-data-table.js +8 -8
  96. package/dist/collection/components/q2-data-table/q2-data-table.js.map +1 -1
  97. package/dist/collection/components/q2-detail/q2-detail.css +24 -21
  98. package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js +1 -1
  99. package/dist/collection/components/q2-dropdown-item/q2-dropdown-item.js.map +1 -1
  100. package/dist/collection/components/q2-icon/assets/cards.symbol.svg +1 -1
  101. package/dist/collection/components/q2-icon/assets/icon-list.json +1 -1
  102. package/dist/collection/components/q2-icon/assets/icon-map.json +1 -1
  103. package/dist/collection/components/q2-icon/assets/standard.symbol.svg +1 -1
  104. package/dist/collection/components/q2-icon/assets/status.symbol.svg +1 -1
  105. package/dist/collection/components/q2-icon/q2-icon.css +4 -4
  106. package/dist/collection/components/q2-icon/q2-icon.js +4 -36
  107. package/dist/collection/components/q2-icon/q2-icon.js.map +1 -1
  108. package/dist/collection/components/q2-input/q2-input.css +3 -5
  109. package/dist/collection/components/q2-input/q2-input.js +31 -6
  110. package/dist/collection/components/q2-input/q2-input.js.map +1 -1
  111. package/dist/collection/components/q2-item/q2-item.css +261 -0
  112. package/dist/collection/components/q2-item/q2-item.js +145 -0
  113. package/dist/collection/components/q2-item/q2-item.js.map +1 -0
  114. package/dist/collection/components/q2-list/q2-list.css +173 -0
  115. package/dist/collection/components/q2-list/q2-list.js +126 -0
  116. package/dist/collection/components/q2-list/q2-list.js.map +1 -0
  117. package/dist/collection/components/q2-loc/q2-loc.js +1 -1
  118. package/dist/collection/components/q2-message/q2-message.css +6 -3
  119. package/dist/collection/components/q2-message/q2-message.js +1 -1
  120. package/dist/collection/components/q2-optgroup/q2-optgroup.js +1 -1
  121. package/dist/collection/components/q2-option/q2-option.css +1 -1
  122. package/dist/collection/components/q2-option/q2-option.js +1 -1
  123. package/dist/collection/components/q2-option-list/q2-option-list.js +2 -2
  124. package/dist/collection/components/q2-pagination/q2-pagination.js +3 -3
  125. package/dist/collection/components/q2-pagination/q2-pagination.js.map +1 -1
  126. package/dist/collection/components/q2-pill/q2-pill.css +13 -9
  127. package/dist/collection/components/q2-pill/q2-pill.js +19 -1
  128. package/dist/collection/components/q2-pill/q2-pill.js.map +1 -1
  129. package/dist/collection/components/q2-popover/q2-popover.js +1 -1
  130. package/dist/collection/components/q2-radio/q2-radio.css +9 -6
  131. package/dist/collection/components/q2-radio/q2-radio.js +1 -1
  132. package/dist/collection/components/q2-radio/q2-radio.js.map +1 -1
  133. package/dist/collection/components/q2-relative-time/q2-relative-time.js +1 -1
  134. package/dist/collection/components/q2-section/q2-section.js +2 -2
  135. package/dist/collection/components/q2-stepper/q2-stepper.js +1 -1
  136. package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +3 -3
  137. package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.css +6 -2
  138. package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +1 -1
  139. package/dist/collection/components/q2-tab-container/q2-tab-container.css +2 -2
  140. package/dist/collection/components/q2-tab-container/q2-tab-container.js +1 -1
  141. package/dist/collection/components/q2-tab-pane/q2-tab-pane.js +1 -1
  142. package/dist/collection/components/q2-tag/q2-tag.css +6 -6
  143. package/dist/collection/components/q2-tag/q2-tag.js +1 -1
  144. package/dist/collection/components/q2-textarea/q2-textarea.css +4 -24
  145. package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +2 -2
  146. package/dist/collection/utils/index.js +12 -0
  147. package/dist/collection/utils/index.js.map +1 -1
  148. package/dist/components/index.js +4 -0
  149. package/dist/components/index.js.map +1 -1
  150. package/dist/components/index2.js +13 -1
  151. package/dist/components/index2.js.map +1 -1
  152. package/dist/components/q2-avatar2.js +2 -5
  153. package/dist/components/q2-avatar2.js.map +1 -1
  154. package/dist/components/q2-badge2.js +4 -4
  155. package/dist/components/q2-badge2.js.map +1 -1
  156. package/dist/components/q2-btn2.js +21 -10
  157. package/dist/components/q2-btn2.js.map +1 -1
  158. package/dist/components/q2-calendar.js +50 -18
  159. package/dist/components/q2-calendar.js.map +1 -1
  160. package/dist/components/q2-carousel-pane.js +8 -6
  161. package/dist/components/q2-carousel-pane.js.map +1 -1
  162. package/dist/components/q2-carousel.js +26 -10
  163. package/dist/components/q2-carousel.js.map +1 -1
  164. package/dist/components/q2-chart-donut.js +19 -11
  165. package/dist/components/q2-chart-donut.js.map +1 -1
  166. package/dist/components/q2-checkbox-group.js +1 -1
  167. package/dist/components/q2-data-table.js +2 -2
  168. package/dist/components/q2-data-table.js.map +1 -1
  169. package/dist/components/q2-detail.js +2 -2
  170. package/dist/components/q2-detail.js.map +1 -1
  171. package/dist/components/q2-dropdown-item2.js.map +1 -1
  172. package/dist/components/q2-icon2.js +205 -3108
  173. package/dist/components/q2-icon2.js.map +1 -1
  174. package/dist/components/q2-input2.js +31 -6
  175. package/dist/components/q2-input2.js.map +1 -1
  176. package/dist/components/q2-item.d.ts +11 -0
  177. package/dist/components/q2-item.js +137 -0
  178. package/dist/components/q2-item.js.map +1 -0
  179. package/dist/components/q2-list.d.ts +11 -0
  180. package/dist/components/q2-list.js +102 -0
  181. package/dist/components/q2-list.js.map +1 -0
  182. package/dist/components/q2-loc.js +1 -1
  183. package/dist/components/q2-message2.js +3 -3
  184. package/dist/components/q2-message2.js.map +1 -1
  185. package/dist/components/q2-optgroup2.js +1 -1
  186. package/dist/components/q2-option-list2.js +1 -1
  187. package/dist/components/q2-option2.js +2 -2
  188. package/dist/components/q2-option2.js.map +1 -1
  189. package/dist/components/q2-pagination.js +2 -2
  190. package/dist/components/q2-pagination.js.map +1 -1
  191. package/dist/components/q2-pill.js +4 -2
  192. package/dist/components/q2-pill.js.map +1 -1
  193. package/dist/components/q2-popover2.js +2 -2
  194. package/dist/components/q2-radio-group.js +1 -1
  195. package/dist/components/q2-radio.js +2 -2
  196. package/dist/components/q2-radio.js.map +1 -1
  197. package/dist/components/q2-relative-time.js +1 -1
  198. package/dist/components/q2-section.js +2 -2
  199. package/dist/components/q2-select.js +1 -1
  200. package/dist/components/q2-stepper-pane.js +1 -1
  201. package/dist/components/q2-stepper-vertical.js +2 -2
  202. package/dist/components/q2-stepper-vertical.js.map +1 -1
  203. package/dist/components/q2-stepper.js +1 -1
  204. package/dist/components/q2-tab-container.js +2 -2
  205. package/dist/components/q2-tab-container.js.map +1 -1
  206. package/dist/components/q2-tab-pane.js +1 -1
  207. package/dist/components/q2-tag.js +2 -2
  208. package/dist/components/q2-tag.js.map +1 -1
  209. package/dist/components/q2-textarea.js +2 -2
  210. package/dist/components/q2-textarea.js.map +1 -1
  211. package/dist/components/tecton-tab-pane.js +2 -2
  212. package/dist/esm/click-elsewhere_2.entry.js +2 -2
  213. package/dist/esm/{index-12c2a320.js → index-0a702dd6.js} +14 -2
  214. package/dist/esm/index-0a702dd6.js.map +1 -0
  215. package/dist/esm/{index-113a38d1.js → index-e940b40e.js} +1 -1
  216. package/dist/esm/{index-113a38d1.js.map → index-e940b40e.js.map} +1 -1
  217. package/dist/esm/loader.js +1 -1
  218. package/dist/esm/q2-action-sheet.entry.js +1 -1
  219. package/dist/esm/q2-avatar.entry.js +1 -5
  220. package/dist/esm/q2-avatar.entry.js.map +1 -1
  221. package/dist/esm/q2-badge.entry.js +4 -4
  222. package/dist/esm/q2-badge.entry.js.map +1 -1
  223. package/dist/esm/q2-btn_2.entry.js +20 -9
  224. package/dist/esm/q2-btn_2.entry.js.map +1 -1
  225. package/dist/esm/q2-calendar.entry.js +52 -20
  226. package/dist/esm/q2-calendar.entry.js.map +1 -1
  227. package/dist/esm/q2-card.entry.js +1 -1
  228. package/dist/esm/q2-carousel-pane.entry.js +7 -6
  229. package/dist/esm/q2-carousel-pane.entry.js.map +1 -1
  230. package/dist/esm/q2-carousel.entry.js +25 -11
  231. package/dist/esm/q2-carousel.entry.js.map +1 -1
  232. package/dist/esm/q2-chart-area.entry.js +1 -1
  233. package/dist/esm/q2-chart-bar.entry.js +1 -1
  234. package/dist/esm/q2-chart-donut.entry.js +18 -10
  235. package/dist/esm/q2-chart-donut.entry.js.map +1 -1
  236. package/dist/esm/q2-checkbox-group.entry.js +1 -1
  237. package/dist/esm/q2-checkbox.entry.js +1 -1
  238. package/dist/esm/q2-data-table.entry.js +3 -3
  239. package/dist/esm/q2-data-table.entry.js.map +1 -1
  240. package/dist/esm/q2-detail.entry.js +2 -2
  241. package/dist/esm/q2-detail.entry.js.map +1 -1
  242. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  243. package/dist/esm/q2-dropdown-item.entry.js.map +1 -1
  244. package/dist/esm/q2-dropdown.entry.js +1 -1
  245. package/dist/esm/q2-editable-field.entry.js +1 -1
  246. package/dist/esm/q2-icon.entry.js +204 -213
  247. package/dist/esm/q2-icon.entry.js.map +1 -1
  248. package/dist/esm/q2-input.entry.js +31 -6
  249. package/dist/esm/q2-input.entry.js.map +1 -1
  250. package/dist/esm/q2-item.entry.js +116 -0
  251. package/dist/esm/q2-item.entry.js.map +1 -0
  252. package/dist/esm/q2-list.entry.js +80 -0
  253. package/dist/esm/q2-list.entry.js.map +1 -0
  254. package/dist/esm/q2-loc.entry.js +2 -2
  255. package/dist/esm/q2-message.entry.js +3 -3
  256. package/dist/esm/q2-message.entry.js.map +1 -1
  257. package/dist/esm/q2-month-picker.entry.js +1 -1
  258. package/dist/esm/q2-optgroup_2.entry.js +4 -4
  259. package/dist/esm/q2-optgroup_2.entry.js.map +1 -1
  260. package/dist/esm/q2-option-list.entry.js +1 -1
  261. package/dist/esm/q2-pagination.entry.js +3 -3
  262. package/dist/esm/q2-pagination.entry.js.map +1 -1
  263. package/dist/esm/q2-pill.entry.js +4 -3
  264. package/dist/esm/q2-pill.entry.js.map +1 -1
  265. package/dist/esm/q2-radio-group.entry.js +1 -1
  266. package/dist/esm/q2-radio.entry.js +3 -3
  267. package/dist/esm/q2-radio.entry.js.map +1 -1
  268. package/dist/esm/q2-relative-time.entry.js +2 -2
  269. package/dist/esm/q2-section.entry.js +3 -3
  270. package/dist/esm/q2-select.entry.js +1 -1
  271. package/dist/esm/q2-stepper-pane.entry.js +2 -2
  272. package/dist/esm/q2-stepper-vertical.entry.js +3 -3
  273. package/dist/esm/q2-stepper-vertical.entry.js.map +1 -1
  274. package/dist/esm/q2-stepper.entry.js +2 -2
  275. package/dist/esm/q2-tab-container.entry.js +3 -3
  276. package/dist/esm/q2-tab-container.entry.js.map +1 -1
  277. package/dist/esm/q2-tab-pane.entry.js +1 -1
  278. package/dist/esm/q2-tag.entry.js +3 -3
  279. package/dist/esm/q2-tag.entry.js.map +1 -1
  280. package/dist/esm/q2-tecton-elements.js +1 -1
  281. package/dist/esm/q2-textarea.entry.js +2 -2
  282. package/dist/esm/q2-textarea.entry.js.map +1 -1
  283. package/dist/esm/q2-tooltip.entry.js +1 -1
  284. package/dist/esm/tecton-tab-pane.entry.js +2 -2
  285. package/dist/q2-tecton-elements/assets/cards.symbol.svg +1 -1
  286. package/dist/q2-tecton-elements/assets/icon-list.json +1 -1
  287. package/dist/q2-tecton-elements/assets/icon-map.json +1 -1
  288. package/dist/q2-tecton-elements/assets/standard.symbol.svg +1 -1
  289. package/dist/q2-tecton-elements/assets/status.symbol.svg +1 -1
  290. package/dist/q2-tecton-elements/p-05b015a8.entry.js +2 -0
  291. package/dist/q2-tecton-elements/p-05b015a8.entry.js.map +1 -0
  292. package/dist/q2-tecton-elements/{p-cbbc7659.entry.js → p-1c17d118.entry.js} +2 -2
  293. package/dist/q2-tecton-elements/p-1c17d118.entry.js.map +1 -0
  294. package/dist/q2-tecton-elements/{p-86cf292d.entry.js → p-2132da06.entry.js} +2 -2
  295. package/dist/q2-tecton-elements/{p-1fac9c85.entry.js → p-22661533.entry.js} +2 -2
  296. package/dist/q2-tecton-elements/p-2436c843.entry.js +2 -0
  297. package/dist/q2-tecton-elements/p-2436c843.entry.js.map +1 -0
  298. package/dist/q2-tecton-elements/{p-5ebb80b6.entry.js → p-391acc00.entry.js} +2 -2
  299. package/dist/q2-tecton-elements/{p-5ebb80b6.entry.js.map → p-391acc00.entry.js.map} +1 -1
  300. package/dist/q2-tecton-elements/p-3b1ea100.entry.js +2 -0
  301. package/dist/q2-tecton-elements/p-3b1ea100.entry.js.map +1 -0
  302. package/dist/q2-tecton-elements/p-42302f6f.js +2 -0
  303. package/dist/q2-tecton-elements/p-42302f6f.js.map +1 -0
  304. package/dist/q2-tecton-elements/{p-92955258.entry.js → p-4570ff06.entry.js} +2 -2
  305. package/dist/q2-tecton-elements/p-47868d6d.entry.js +2 -0
  306. package/dist/q2-tecton-elements/p-47868d6d.entry.js.map +1 -0
  307. package/dist/q2-tecton-elements/{p-c1e03092.entry.js → p-4a332c2a.entry.js} +2 -2
  308. package/dist/q2-tecton-elements/{p-0a705412.entry.js → p-4b81a121.entry.js} +2 -2
  309. package/dist/q2-tecton-elements/p-4bbe563f.entry.js +2 -0
  310. package/dist/q2-tecton-elements/p-4bbe563f.entry.js.map +1 -0
  311. package/dist/q2-tecton-elements/p-4f7e2c8a.entry.js +2 -0
  312. package/dist/q2-tecton-elements/p-4f7e2c8a.entry.js.map +1 -0
  313. package/dist/q2-tecton-elements/p-50bd4437.entry.js +2 -0
  314. package/dist/q2-tecton-elements/p-50bd4437.entry.js.map +1 -0
  315. package/dist/q2-tecton-elements/p-515d424b.entry.js +2 -0
  316. package/dist/q2-tecton-elements/{p-913a23f5.entry.js.map → p-515d424b.entry.js.map} +1 -1
  317. package/dist/q2-tecton-elements/{p-bb6e6290.entry.js → p-57bf9342.entry.js} +2 -2
  318. package/dist/q2-tecton-elements/{p-0fccdca2.entry.js → p-5dc5c4e2.entry.js} +2 -2
  319. package/dist/q2-tecton-elements/p-5dc5c4e2.entry.js.map +1 -0
  320. package/dist/q2-tecton-elements/{p-5b9ee831.entry.js → p-63192fac.entry.js} +2 -2
  321. package/dist/q2-tecton-elements/{p-281e7ce7.entry.js → p-685b821c.entry.js} +2 -2
  322. package/dist/q2-tecton-elements/{p-bd5e5864.entry.js → p-71180fcd.entry.js} +2 -2
  323. package/dist/q2-tecton-elements/{p-db615608.entry.js → p-7523305d.entry.js} +2 -2
  324. package/dist/q2-tecton-elements/{p-be430cd5.js → p-7ce6e587.js} +1 -1
  325. package/dist/q2-tecton-elements/{p-ca8dd86f.entry.js → p-7f663376.entry.js} +2 -2
  326. package/dist/q2-tecton-elements/p-a214077c.entry.js +2 -0
  327. package/dist/q2-tecton-elements/p-a214077c.entry.js.map +1 -0
  328. package/dist/q2-tecton-elements/{p-3bc27513.entry.js → p-aec64fcb.entry.js} +2 -2
  329. package/dist/q2-tecton-elements/p-aed969d4.entry.js +2 -0
  330. package/dist/q2-tecton-elements/p-aed969d4.entry.js.map +1 -0
  331. package/dist/q2-tecton-elements/{p-1954ab7d.entry.js → p-b3322f94.entry.js} +2 -2
  332. package/dist/q2-tecton-elements/p-b3322f94.entry.js.map +1 -0
  333. package/dist/q2-tecton-elements/{p-79cd6ab5.entry.js → p-b376c111.entry.js} +2 -2
  334. package/dist/q2-tecton-elements/{p-25eccf38.entry.js → p-b3d10d52.entry.js} +2 -2
  335. package/dist/q2-tecton-elements/{p-25eccf38.entry.js.map → p-b3d10d52.entry.js.map} +1 -1
  336. package/dist/q2-tecton-elements/{p-5b3f885f.entry.js → p-b7d5fd12.entry.js} +2 -2
  337. package/dist/q2-tecton-elements/p-b7d5fd12.entry.js.map +1 -0
  338. package/dist/q2-tecton-elements/{p-cb30f949.entry.js → p-bf125cdf.entry.js} +2 -2
  339. package/dist/q2-tecton-elements/p-c4c458b7.entry.js +2 -0
  340. package/dist/q2-tecton-elements/p-c4c458b7.entry.js.map +1 -0
  341. package/dist/q2-tecton-elements/p-d1a9ed3d.entry.js +2 -0
  342. package/dist/q2-tecton-elements/p-d1a9ed3d.entry.js.map +1 -0
  343. package/dist/q2-tecton-elements/{p-73a3c437.entry.js → p-d635e39f.entry.js} +2 -2
  344. package/dist/q2-tecton-elements/{p-a5b16c01.entry.js → p-d9e19f70.entry.js} +2 -2
  345. package/dist/q2-tecton-elements/p-d9e19f70.entry.js.map +1 -0
  346. package/dist/q2-tecton-elements/{p-a89814b8.entry.js → p-dc057a9c.entry.js} +2 -2
  347. package/dist/q2-tecton-elements/p-debd5249.entry.js +2 -0
  348. package/dist/q2-tecton-elements/p-debd5249.entry.js.map +1 -0
  349. package/dist/q2-tecton-elements/p-df297a77.entry.js +2 -0
  350. package/dist/q2-tecton-elements/p-df297a77.entry.js.map +1 -0
  351. package/dist/q2-tecton-elements/{p-6afb4d46.entry.js → p-e762526f.entry.js} +2 -2
  352. package/dist/q2-tecton-elements/{p-698f82c5.entry.js → p-f1265647.entry.js} +2 -2
  353. package/dist/q2-tecton-elements/p-f1281e3f.entry.js +2 -0
  354. package/dist/q2-tecton-elements/p-f1281e3f.entry.js.map +1 -0
  355. package/dist/q2-tecton-elements/{p-954d49de.entry.js → p-f162c670.entry.js} +2 -2
  356. package/dist/q2-tecton-elements/p-f418967b.entry.js +2 -0
  357. package/dist/q2-tecton-elements/p-f418967b.entry.js.map +1 -0
  358. package/dist/q2-tecton-elements/{p-fddebc47.entry.js → p-f4d77672.entry.js} +2 -2
  359. package/dist/q2-tecton-elements/p-fcc84527.entry.js +2 -0
  360. package/dist/q2-tecton-elements/p-fcc84527.entry.js.map +1 -0
  361. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  362. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js.map +1 -1
  363. package/dist/test/elements/q2-badge-test.e2e.js +11 -3
  364. package/dist/test/elements/q2-badge-test.e2e.js.map +1 -1
  365. package/dist/test/elements/q2-btn-test.e2e.js +25 -25
  366. package/dist/test/elements/q2-btn-test.e2e.js.map +1 -1
  367. package/dist/test/elements/q2-calendar-test.e2e.js +38 -3
  368. package/dist/test/elements/q2-calendar-test.e2e.js.map +1 -1
  369. package/dist/test/elements/q2-carousel-pane-test.e2e.js +16 -86
  370. package/dist/test/elements/q2-carousel-pane-test.e2e.js.map +1 -1
  371. package/dist/test/elements/q2-carousel-pane-test.spec.js +113 -0
  372. package/dist/test/elements/q2-carousel-pane-test.spec.js.map +1 -0
  373. package/dist/test/elements/q2-carousel-test.e2e.js +27 -1
  374. package/dist/test/elements/q2-carousel-test.e2e.js.map +1 -1
  375. package/dist/test/elements/q2-chart-donut-test.e2e.js +64 -30
  376. package/dist/test/elements/q2-chart-donut-test.e2e.js.map +1 -1
  377. package/dist/test/elements/q2-currency-test.e2e.js +7 -7
  378. package/dist/test/elements/q2-currency-test.e2e.js.map +1 -1
  379. package/dist/test/elements/q2-detail/q2-detail-test.e2e.js +1 -1
  380. package/dist/test/elements/q2-detail/q2-detail-test.e2e.js.map +1 -1
  381. package/dist/test/elements/q2-detail/q2-item-test.e2e.js +223 -0
  382. package/dist/test/elements/q2-detail/q2-item-test.e2e.js.map +1 -0
  383. package/dist/test/elements/q2-detail/q2-list-test.e2e.js +92 -0
  384. package/dist/test/elements/q2-detail/q2-list-test.e2e.js.map +1 -0
  385. package/dist/test/elements/q2-icon-test.e2e.js +19 -97
  386. package/dist/test/elements/q2-icon-test.e2e.js.map +1 -1
  387. package/dist/test/elements/q2-input-test.e2e.js +140 -7
  388. package/dist/test/elements/q2-input-test.e2e.js.map +1 -1
  389. package/dist/test/elements/q2-pill-test.e2e.js +23 -0
  390. package/dist/test/elements/q2-pill-test.e2e.js.map +1 -1
  391. package/dist/test/elements/q2-relative-time-test.e2e.js +50 -48
  392. package/dist/test/elements/q2-relative-time-test.e2e.js.map +1 -1
  393. package/dist/test/elements/q2-textarea-test.e2e.js +4 -8
  394. package/dist/test/elements/q2-textarea-test.e2e.js.map +1 -1
  395. package/dist/test/helpers.js +18 -16
  396. package/dist/test/helpers.js.map +1 -1
  397. package/dist/test/utils/index.spec.js +18 -0
  398. package/dist/test/utils/index.spec.js.map +1 -0
  399. package/dist/types/components/q2-avatar/q2-avatar.d.ts +0 -1
  400. package/dist/types/components/q2-badge/q2-badge.d.ts +1 -0
  401. package/dist/types/components/q2-btn/q2-btn.d.ts +1 -0
  402. package/dist/types/components/q2-carousel/q2-carousel.d.ts +3 -0
  403. package/dist/types/components/q2-carousel-pane/q2-carousel-pane.d.ts +5 -0
  404. package/dist/types/components/q2-chart-donut/q2-chart-donut.d.ts +13 -12
  405. package/dist/types/components/q2-icon/q2-icon.d.ts +0 -5
  406. package/dist/types/components/q2-input/q2-input.d.ts +8 -0
  407. package/dist/types/components/q2-item/q2-item.d.ts +21 -0
  408. package/dist/types/components/q2-list/q2-list.d.ts +20 -0
  409. package/dist/types/components.d.ts +82 -14
  410. package/dist/types/global.d.ts +1 -1
  411. package/dist/types/utils/index.d.ts +6 -0
  412. package/dist/types/workspace/workspace/{tecton-production_release_1.44.x → tecton-production_release_1.45.x}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +1 -1
  413. package/package.json +3 -3
  414. package/dist/cjs/icons-04e4f595.js +0 -2900
  415. package/dist/cjs/icons-04e4f595.js.map +0 -1
  416. package/dist/cjs/index-1deac3ee.js.map +0 -1
  417. package/dist/collection/components/q2-icon/icons.js +0 -1184
  418. package/dist/collection/components/q2-icon/icons.js.map +0 -1
  419. package/dist/esm/icons-8f4c3b69.js +0 -2898
  420. package/dist/esm/icons-8f4c3b69.js.map +0 -1
  421. package/dist/esm/index-12c2a320.js.map +0 -1
  422. package/dist/q2-tecton-elements/p-043bb5c0.entry.js +0 -2
  423. package/dist/q2-tecton-elements/p-043bb5c0.entry.js.map +0 -1
  424. package/dist/q2-tecton-elements/p-081b779e.entry.js +0 -2
  425. package/dist/q2-tecton-elements/p-081b779e.entry.js.map +0 -1
  426. package/dist/q2-tecton-elements/p-0e2e7b2d.entry.js +0 -2
  427. package/dist/q2-tecton-elements/p-0e2e7b2d.entry.js.map +0 -1
  428. package/dist/q2-tecton-elements/p-0fccdca2.entry.js.map +0 -1
  429. package/dist/q2-tecton-elements/p-1954ab7d.entry.js.map +0 -1
  430. package/dist/q2-tecton-elements/p-55bc5c9b.entry.js +0 -2
  431. package/dist/q2-tecton-elements/p-55bc5c9b.entry.js.map +0 -1
  432. package/dist/q2-tecton-elements/p-5b3f885f.entry.js.map +0 -1
  433. package/dist/q2-tecton-elements/p-5c46acb8.js +0 -2
  434. package/dist/q2-tecton-elements/p-5c46acb8.js.map +0 -1
  435. package/dist/q2-tecton-elements/p-5dd0eede.entry.js +0 -2
  436. package/dist/q2-tecton-elements/p-5dd0eede.entry.js.map +0 -1
  437. package/dist/q2-tecton-elements/p-6479c450.entry.js +0 -2
  438. package/dist/q2-tecton-elements/p-6479c450.entry.js.map +0 -1
  439. package/dist/q2-tecton-elements/p-7c5d43cf.entry.js +0 -2
  440. package/dist/q2-tecton-elements/p-7c5d43cf.entry.js.map +0 -1
  441. package/dist/q2-tecton-elements/p-7ff4c446.entry.js +0 -2
  442. package/dist/q2-tecton-elements/p-7ff4c446.entry.js.map +0 -1
  443. package/dist/q2-tecton-elements/p-87d72e3e.entry.js +0 -2
  444. package/dist/q2-tecton-elements/p-87d72e3e.entry.js.map +0 -1
  445. package/dist/q2-tecton-elements/p-8dc573f5.entry.js +0 -2
  446. package/dist/q2-tecton-elements/p-8dc573f5.entry.js.map +0 -1
  447. package/dist/q2-tecton-elements/p-913a23f5.entry.js +0 -2
  448. package/dist/q2-tecton-elements/p-a5b16c01.entry.js.map +0 -1
  449. package/dist/q2-tecton-elements/p-cbbc7659.entry.js.map +0 -1
  450. package/dist/q2-tecton-elements/p-d7e608f7.entry.js +0 -2
  451. package/dist/q2-tecton-elements/p-d7e608f7.entry.js.map +0 -1
  452. package/dist/q2-tecton-elements/p-dce084f9.entry.js +0 -2
  453. package/dist/q2-tecton-elements/p-dce084f9.entry.js.map +0 -1
  454. package/dist/q2-tecton-elements/p-ecce27a0.entry.js +0 -2
  455. package/dist/q2-tecton-elements/p-ecce27a0.entry.js.map +0 -1
  456. package/dist/q2-tecton-elements/p-f6c1f69b.js +0 -2
  457. package/dist/q2-tecton-elements/p-f6c1f69b.js.map +0 -1
  458. package/dist/q2-tecton-elements/p-f8c7cad7.entry.js +0 -2
  459. package/dist/q2-tecton-elements/p-f8c7cad7.entry.js.map +0 -1
  460. package/dist/types/components/q2-icon/icons.d.ts +0 -3
  461. /package/dist/q2-tecton-elements/{p-86cf292d.entry.js.map → p-2132da06.entry.js.map} +0 -0
  462. /package/dist/q2-tecton-elements/{p-1fac9c85.entry.js.map → p-22661533.entry.js.map} +0 -0
  463. /package/dist/q2-tecton-elements/{p-92955258.entry.js.map → p-4570ff06.entry.js.map} +0 -0
  464. /package/dist/q2-tecton-elements/{p-c1e03092.entry.js.map → p-4a332c2a.entry.js.map} +0 -0
  465. /package/dist/q2-tecton-elements/{p-0a705412.entry.js.map → p-4b81a121.entry.js.map} +0 -0
  466. /package/dist/q2-tecton-elements/{p-bb6e6290.entry.js.map → p-57bf9342.entry.js.map} +0 -0
  467. /package/dist/q2-tecton-elements/{p-5b9ee831.entry.js.map → p-63192fac.entry.js.map} +0 -0
  468. /package/dist/q2-tecton-elements/{p-281e7ce7.entry.js.map → p-685b821c.entry.js.map} +0 -0
  469. /package/dist/q2-tecton-elements/{p-bd5e5864.entry.js.map → p-71180fcd.entry.js.map} +0 -0
  470. /package/dist/q2-tecton-elements/{p-db615608.entry.js.map → p-7523305d.entry.js.map} +0 -0
  471. /package/dist/q2-tecton-elements/{p-be430cd5.js.map → p-7ce6e587.js.map} +0 -0
  472. /package/dist/q2-tecton-elements/{p-ca8dd86f.entry.js.map → p-7f663376.entry.js.map} +0 -0
  473. /package/dist/q2-tecton-elements/{p-3bc27513.entry.js.map → p-aec64fcb.entry.js.map} +0 -0
  474. /package/dist/q2-tecton-elements/{p-79cd6ab5.entry.js.map → p-b376c111.entry.js.map} +0 -0
  475. /package/dist/q2-tecton-elements/{p-cb30f949.entry.js.map → p-bf125cdf.entry.js.map} +0 -0
  476. /package/dist/q2-tecton-elements/{p-73a3c437.entry.js.map → p-d635e39f.entry.js.map} +0 -0
  477. /package/dist/q2-tecton-elements/{p-a89814b8.entry.js.map → p-dc057a9c.entry.js.map} +0 -0
  478. /package/dist/q2-tecton-elements/{p-6afb4d46.entry.js.map → p-e762526f.entry.js.map} +0 -0
  479. /package/dist/q2-tecton-elements/{p-698f82c5.entry.js.map → p-f1265647.entry.js.map} +0 -0
  480. /package/dist/q2-tecton-elements/{p-954d49de.entry.js.map → p-f162c670.entry.js.map} +0 -0
  481. /package/dist/q2-tecton-elements/{p-fddebc47.entry.js.map → p-f4d77672.entry.js.map} +0 -0
  482. /package/dist/types/workspace/workspace/{tecton-production_release_1.44.x → tecton-production_release_1.45.x}/packages/q2-tecton-elements/.stencil/test/elements/q2-detail/slot-component.d.ts +0 -0
package/dist/cjs/q2-btn_2.cjs.entry.js CHANGED
@@ -3,10 +3,10 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-14c3693c.js');
6
- const index$1 = require('./index-1deac3ee.js');
6
+ const index$1 = require('./index-0e15dc8d.js');
7
7
  const shapes = require('./shapes-43f0588d.js');
8
8
 
9
- const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none}: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([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-letter-spacing, var(--comp-letter-spacing))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}:host(:not([size])) 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(:not([size])) button.icon-only:hover,:host(:not([size])) button.icon-only:focus{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host(:not([intent])) button:not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}:host(:not([intent])) button:not(.icon-only):hover,:host(:not([intent])) button:not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 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%}";
9
+ const q2BtnCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #0066cc)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none}: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([color]:not([size])) button,:host([intent]:not([size])) button{padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}:host([size=\"1\"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size=\"2\"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size=\"3\"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size=\"4x\"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size=\"4\"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([color]) button,:host([intent]) button{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform, var(--comp-text-transform));letter-spacing:var(--tct-btn-letter-spacing, var(--comp-letter-spacing))}:host([size=small]) button{padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 4px 16px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, 14px))}:host([size=medium]) button{padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 12px 24px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, 16px))}:host([size=large]) button{padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 16px 32px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, 20px))}:host([color=primary]) button,:host([intent=workflow-primary]) button{--comp-background:var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-background:var(--tct-btn-primary-hover-background, var(--tct-btn-primary-hover-bg));--comp-font-color:var(--tct-btn-primary-font-color, var(--app-white, #ffffff));--comp-box-shadow:var(--tct-btn-primary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-primary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-active-background:var(--tct-btn-primary-active-background, #0063a0);--comp-hover-outer-ring-color:var(--tct-btn-primary-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-primary-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-primary-border-style, var(--comp-border-style));border-width:var(--tct-btn-primary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-primary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-primary-border-color, var(--comp-border-color));background:var(--tct-btn-primary-background, var(--comp-background));color:var(--tct-btn-primary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-primary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=primary]) button:enabled:hover,:host([intent=workflow-primary]) button:enabled:hover{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:enabled:focus,:host([intent=workflow-primary]) button:enabled:focus{border-color:var(--tct-btn-primary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-primary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=primary]) button:enabled:focus-visible,:host([intent=workflow-primary]) button:enabled:focus-visible{border-color:var(--tct-btn-primary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-primary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=primary]) button:enabled:active,:host([intent=workflow-primary]) button:enabled:active{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:focus-visible,:host([color=primary]) button:focus-visible:hover:enabled,:host([color=primary]) button:focus,:host([color=primary]) button:focus:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus,:host([intent=workflow-primary]) button:focus:hover:enabled{border-color:var(--tct-btn-primary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-primary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=primary]) button:focus-visible:active:enabled,:host([color=primary]) button:focus:active:enabled,:host([intent=workflow-primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus:active:enabled{border-color:var(--tct-btn-primary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-primary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=primary]) button:disabled,:host([intent=workflow-primary]) button:disabled{border-color:var(--tct-btn-primary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-primary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-primary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-primary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)))}:host([color=secondary]) button,:host([intent=workflow-secondary]) button{--comp-background:var(--tct-btn-secondary-background, var(--tct-btn-secondary-bg, var(--t-button-default-bg, #cccccc)));--comp-hover-background:var(--tct-btn-secondary-hover-background, var(--tct-btn-secondary-hover-bg, var(--t-a11y-active-gray-color-AA, #404040)));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-secondary-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-secondary-hover-outer-ring-color, var(--comp-hover-background));--comp-hover-inner-ring-color:var(--tct-btn-secondary-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-secondary-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-secondary-border-style, var(--comp-border-style));border-width:var(--tct-btn-secondary-border-width, var(--comp-border-width));font-weight:var(--tct-btn-secondary-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-secondary-border-color, var(--comp-border-color));background:var(--tct-btn-secondary-background, var(--comp-background));color:var(--tct-btn-secondary-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-secondary-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([color=secondary]) button:enabled:hover,:host([intent=workflow-secondary]) button:enabled:hover{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:enabled:focus,:host([intent=workflow-secondary]) button:enabled:focus{border-color:var(--tct-btn-secondary-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([color=secondary]) button:enabled:focus-visible,:host([intent=workflow-secondary]) button:enabled:focus-visible{border-color:var(--tct-btn-secondary-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-secondary-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([color=secondary]) button:enabled:active,:host([intent=workflow-secondary]) button:enabled:active{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:focus-visible,:host([color=secondary]) button:focus-visible:hover:enabled,:host([color=secondary]) button:focus,:host([color=secondary]) button:focus:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus,:host([intent=workflow-secondary]) button:focus:hover:enabled{border-color:var(--tct-btn-secondary-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-secondary-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([color=secondary]) button:focus-visible:active:enabled,:host([color=secondary]) button:focus:active:enabled,:host([intent=workflow-secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus:active:enabled{border-color:var(--tct-btn-secondary-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-secondary-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([color=secondary]) button:disabled,:host([intent=workflow-secondary]) button:disabled{border-color:var(--tct-btn-secondary-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-secondary-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-secondary-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-secondary-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([color=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--t-text:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-destroy]) button{--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-font-color:var(--tct-btn-destroy-font-color, var(--app-white));--comp-box-shadow:var(--tct-btn-destroy-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-destroy-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-outer-ring-color:var(--tct-btn-destroy-hover-outer-ring-color, var(--comp-background));--comp-hover-inner-ring-color:var(--tct-btn-destroy-hover-inner-ring-color, var(--comp-font-color));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-destroy-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-destroy-focus-visible-inner-ring-color, var(--comp-font-color));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-destroy-border-style, var(--comp-border-style));border-width:var(--tct-btn-destroy-border-width, var(--comp-border-width));font-weight:var(--tct-btn-destroy-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-destroy-border-color, var(--comp-border-color));background:var(--tct-btn-destroy-background, var(--comp-background));color:var(--tct-btn-destroy-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-destroy-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-destroy]) button:enabled:hover{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus{border-color:var(--tct-btn-destroy-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-destroy]) button:enabled:focus-visible{border-color:var(--tct-btn-destroy-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-destroy-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-destroy]) button:enabled:active{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus,:host([intent=workflow-destroy]) button:focus:hover:enabled{border-color:var(--tct-btn-destroy-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-destroy-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus:active:enabled{border-color:var(--tct-btn-destroy-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-destroy-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-destroy]) button:disabled{border-color:var(--tct-btn-destroy-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-destroy-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-destroy-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-destroy-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-destroy]) button ::slotted(q2-icon){--t-text:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=workflow-escape]) button{--comp-background:var(--tct-btn-escape-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-escape-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-escape-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-box-shadow:var(--tct-btn-escape-hover-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-escape-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-hover-background:var(--tct-btn-escape-hover-background, var(--comp-background-alternative));--comp-active-background:var(--tct-btn-escape-active-background, var(--comp-background-alternative));--comp-focus-background:var(--tct-btn-escape-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-escape-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-escape-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-escape-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-escape-border-style, var(--comp-border-style));border-width:var(--tct-btn-escape-border-width, var(--comp-border-width));font-weight:var(--tct-btn-escape-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-escape-border-color, var(--comp-border-color));background:var(--tct-btn-escape-background, var(--comp-background));color:var(--tct-btn-escape-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-escape-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=workflow-escape]) button:enabled:hover{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus{border-color:var(--tct-btn-escape-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-escape-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=workflow-escape]) button:enabled:focus-visible{border-color:var(--tct-btn-escape-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-escape-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=workflow-escape]) button:enabled:active{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus,:host([intent=workflow-escape]) button:focus:hover:enabled{border-color:var(--tct-btn-escape-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-escape-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=workflow-escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus:active:enabled{border-color:var(--tct-btn-escape-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-escape-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=workflow-escape]) button:disabled{border-color:var(--tct-btn-escape-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-escape-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-escape-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-escape-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=workflow-escape]) button ::slotted(q2-icon){--t-text:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral]) button{--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-font-color:var(--tct-btn-neutral-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-focus-box-shadow:var(--tct-btn-neutral-focus-box-shadow, var(--comp-btn-fallback-box-shadow));--comp-border-width:1px;--comp-border-style:solid;--comp-border-color:var(--comp-font-color);--comp-hover-outer-ring-color:var(--tct-btn-neutral-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-hover-inner-ring-color, var(--app-white));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-background, var(--comp-background));color:var(--tct-btn-neutral-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral]) button:enabled:hover{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:enabled:focus{border-color:var(--tct-btn-neutral-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral]) button:enabled:active{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:focus-visible,:host([intent=neutral]) button:focus-visible:hover:enabled,:host([intent=neutral]) button:focus,:host([intent=neutral]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral]) button:focus-visible:active:enabled,:host([intent=neutral]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral]) button:disabled{border-color:var(--tct-btn-neutral-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)))}:host([intent=neutral-text]) button{--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-font-color:var(--tct-btn-neutral-text-font-color, var(--tct-btn-primary-background, var(--tct-btn-primary-bg, var(--t-a11y-active-gray-color-AA, #404040))));--comp-box-shadow:var(--tct-btn-neutral-text-box-shadow);--comp-hover-text-decoration:underline;--comp-focus-background:var(--tct-btn-neutral-text-focus-background, var(--comp-background-alternative));--comp-hover-outer-ring-color:var(--tct-btn-neutral-text-hover-outer-ring-color, var(--comp-font-color));--comp-hover-inner-ring-color:var(--tct-btn-neutral-text-hover-inner-ring-color, var(--comp-background));--comp-hover-box-shadow:0 0 0 2px var(--comp-hover-inner-ring-color),\n 0 0 0 4px var(--comp-hover-outer-ring-color);--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-neutral-text-focus-visible-outer-ring-color, var(--const-focus-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-text-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:0 0 0 2px var(--comp-focus-visible-inner-ring-color),\n 0 0 0 4px var(--comp-focus-visible-outer-ring-color);border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}:host(:not([size])) button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)))}button :host(:not([color]):not([intent])):hover,button :host(:not([color]):not([intent])):focus,button.icon-only:hover,button.icon-only:focus{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])[active]) button.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}:host(:not([intent])) button.icon-only:hover *,:host(:not([intent])) button.icon-only:focus *,:host(:not([intent])[active]) button.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}:host(:not([intent])) button:not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}:host(:not([intent])) button:not(.icon-only):hover,:host(:not([intent])) button:not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 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%}";
10
10
  const Q2BtnStyle0 = q2BtnCss;
11
11
 
12
12
  const Q2Btn = class {
@@ -94,6 +94,12 @@ const Q2Btn = class {
94
94
  }
95
95
  this.primaryBtn.focus();
96
96
  }
97
+ handleClick(ev) {
98
+ if (this.loading) {
99
+ ev.stopImmediatePropagation();
100
+ }
101
+ this.primaryBtn.focus();
102
+ }
97
103
  delegateFocus(event) {
98
104
  if (!index$1.isEventFromElement(event, this.hostElement))
99
105
  return;
@@ -108,15 +114,20 @@ const Q2Btn = class {
108
114
  this.handleButtonSize();
109
115
  }
110
116
  get buttonAttributes() {
111
- var _a, _b, _c;
112
117
  return {
113
- ariaExpanded: this.ariaExpanded !== undefined ? `${((_a = this.ariaExpanded) === null || _a === void 0 ? void 0 : _a.toString()) === 'true'}` : undefined,
114
- ariaHasPopup: this.ariaHasPopup !== undefined
115
- ? `${this.ariaHasPopup === 'true' || this.ariaHasPopup === 'menu'}`
116
- : undefined,
118
+ ariaExpanded: index$1.getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),
119
+ ariaHasPopup: index$1.getAriaValueFromProp(this.ariaHasPopup, [
120
+ 'true',
121
+ 'false',
122
+ 'menu',
123
+ 'listbox',
124
+ 'tree',
125
+ 'grid',
126
+ 'dialog',
127
+ ]),
117
128
  ariaLabel: this.label && this.hideLabel ? index$1.loc(this.label) : undefined,
118
- ariaSelected: this.ariaSelected !== undefined ? `${((_b = this.ariaSelected) === null || _b === void 0 ? void 0 : _b.toString()) === 'true'}` : undefined,
119
- ariaPressed: this.ariaPressed !== undefined ? `${((_c = this.ariaPressed) === null || _c === void 0 ? void 0 : _c.toString()) === 'true'}` : undefined,
129
+ ariaSelected: index$1.getAriaValueFromProp(this.ariaSelected, ['true', 'false']),
130
+ ariaPressed: index$1.getAriaValueFromProp(this.ariaPressed, ['true', 'false']),
120
131
  description: this.description !== undefined ? this.description : undefined,
121
132
  disabled: this.disabled || false,
122
133
  type: this.type,
package/dist/cjs/q2-btn_2.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"q2-btn.q2-loading.entry.cjs.js","mappings":"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","names":["handleDeprecationWarning","h","Fragment","loc","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","skeletonShapes"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-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([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='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\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 // Colors\n :host([color]) &,\n :host([intent]) & {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n text-transform: var-list(--tct-btn-text-transform, --comp-text-transform);\n letter-spacing: var-list(--tct-btn-letter-spacing, --comp-letter-spacing);\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), 14px);\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-medium), 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-large), 20px);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-font-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-font-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-font-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(\n --tct-btn-secondary-hover-background,\n --tct-btn-secondary-hover-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-font-color: var(--app-white, #ffffff);\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-hover-background, --app-white, null);\n @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, disabled, 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-font-color);\n }\n\n :host([intent='workflow-destroy']) & {\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n --comp-font-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-font-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-font-color);\n }\n\n :host([intent='workflow-escape']) & {\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-escape-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\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-font-color, --comp-background, null);\n @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, disabled, 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-font-color);\n }\n\n :host([intent='neutral']) & {\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\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-font-color);\n @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, disabled, 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-font-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-font-color: #{var-list(\n --tct-btn-neutral-text-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\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-font-color, --comp-background, null);\n @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, disabled, 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-font-color);\n }\n\n // Icons\n :host(:not([size])) &.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: 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 // Plain\n :host(:not([intent])) &:not(.icon-only) {\n height: var-list(--tct-btn-height, auto);\n padding-inline: var-list(--tct-btn-padding-inline, 0);\n font-weight: var-list(--tct-btn-font-weight);\n border-radius: var-list(--tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background: var(--tct-btn-hover-background);\n }\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 {\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\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() tabIndex: number;\n\n /**\n * Displays the component in an active state.\n *\n * @info\n * Only intended for use with the `badge` property.\n */\n @Prop({ reflect: true }) active: boolean;\n\n /** Displays the component in a smaller, badge style. */\n @Prop({ reflect: true }) badge: boolean;\n\n /** The component expands to fill the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /**\n * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n */\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n /**\n * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n */\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\n /**\n * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n *\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n @Prop({ reflect: true }) loading: boolean;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true }) type: string = 'button';\n\n /** @deprecated */\n @Prop({ reflect: true }) size: string;\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n /** @deprecated */\n @Prop({ reflect: true }) fab: boolean;\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 this.handleButtonSize();\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 @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\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,\n tabindex: this.tabIndex || undefined,\n };\n }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers*='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers*='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n /**\n * Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n *\n * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n *\n * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n *\n * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n *\n * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n *\n * 1. `count=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `count=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n */\n @Prop({ reflect: true }) counts: string;\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n @Prop({ reflect: true }) inline: boolean;\n\n /**\n * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /**\n * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n *\n * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n */\n @Prop({ reflect: true }) modifiers: string;\n\n /**\n * The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n */\n @Prop({ reflect: true }) shape: string;\n\n /** The type of loading element to display. */\n @Prop({ reflect: true }) type: 'spinner' | 'skeleton';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n\n get loader() {\n const loaderMap = {\n default: this.spinner,\n spinner: this.spinner,\n skeleton: this.skeletonLoader,\n };\n\n return loaderMap[this.type] || loaderMap.default;\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' || !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' || !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n get spinnerShape() {\n const spinnerMap = {\n default: this.halfCircleSpinner,\n 'half-circle': this.halfCircleSpinner,\n };\n\n return spinnerMap[this.type] || spinnerMap.default;\n }\n\n get localizedLabel() {\n return loc(this.label || 'tecton.element.loading.ariaLabel');\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n render() {\n return this.loader();\n }\n\n halfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-label={this.localizedLabel}\n >\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n </div>\n );\n };\n\n spinner = () => {\n return this.halfCircleSpinner();\n };\n\n skeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-label={this.localizedLabel}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n </div>\n );\n };\n}\n"],"version":3}
1
+ {"file":"q2-btn.q2-loading.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,QAAQ,GAAG,495CAA495C,CAAC;AAC9+5C,oBAAe,QAAQ;;MCWV,KAAK;;;QAwHd,qBAAgB,GAAG;YACf,IAAI,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;gBACxBA,gCAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;aAClD;SACJ,CAAC;QAEF,qBAAgB,GAAG;YACf,IAAI,CAAC,WAAW,EAAE,CAAC;SACtB,CAAC;QAEF,gBAAW,GAAG;;YAEV,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,GAAG,EAAE,OAAO;gBAC/F,IAAI,GAAG;oBAAE,OAAO,CAAC,MAAM,EAAE,CAAC;;oBACrB,GAAG,GAAG,OAAO,CAAC;gBACnB,OAAO,GAAG,CAAC;aACd,EAAE,IAAI,CAAC,CAAC;YAET,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC;YACvB,MAAM,MAAM,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC1D,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;YACtD,MAAM,WAAW,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,iBAAiB,KAAK,IAAI,CAAC;YAClG,MAAM,YAAY,GAAG,CAAC,MAAM,IAAI,OAAO,KAAK,OAAO,IAAI,IAAI,CAAC,WAAW,CAAC,gBAAgB,KAAK,IAAI,CAAC;YAClG,MAAM,WAAW,GAAG,CAAC,WAAW,IAAI,CAAC,YAAY,IAAI,OAAO,CAAC;YAE7D,IAAI,YAAY,CAAC;YACjB,IAAI,WAAW;gBAAE,YAAY,GAAG,MAAM,CAAC;iBAClC,IAAI,WAAW;gBAAE,YAAY,GAAG,MAAM,CAAC;iBACvC,IAAI,YAAY;gBAAE,YAAY,GAAG,OAAO,CAAC;YAC9C,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;SACpC,CAAC;QAEF,iBAAY,GAAG;YACX,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,GAClG,IAAI,CAAC,gBAAgB,CAAC;YAC1B,MAAM,EAAE,YAAY,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC;YAChE,MAAM,oBAAoB,GAAG,YAAY,IAAI,OAAO,CAAC;YACrD,MAAM,sBAAsB,GAAG,CAAC,YAAY,IAAI,KAAK,CAAC;YACtD,QACIC,QAACC,cAAQ,QACLD,oBACI,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,UAAU,GAAG,EAAE,aAAF,EAAE,cAAF,EAAE,GAAI,IAAI,CAAC,UAAU,CAAC,mBACrC,YAAY,mBACZ,YAAY,gBACf,SAAS,IAAIE,WAAG,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,IAElEF,qBACK,oBAAoB,KACjBA,wBACI,MAAM,EAAE,CAAC,OAAO,EAChB,SAAS,EAAE,sBAAsB,GAAG,QAAQ,GAAG,SAAS,GAC1D,CACL,EACA,CAAC,SAAS,IAAI,KAAK,GAAGE,WAAG,CAAC,KAAK,CAAC,GAAGF,kBAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAI,CAC/E,CACD,EACR,CAAC,CAAC,WAAW,KACVA,iBACI,EAAE,EAAC,oBAAoB,iBACX,MAAM,EAClB,KAAK,EAAC,IAAI,IAET,WAAW,CACV,CACT,CACM,EACb;SACL,CAAC;QAEF,WAAM,GAAG;YACL,OAAO,IAAI,CAAC,IAAI,KAAK,OAAO;;YAExBA,iBACI,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;SACL,CAAC;;;;;;;;;;;;;;;;oBA5JsC,QAAQ;;;;;;;;IAmBhD,iBAAiB;QACb,IAAI,CAAC,WAAW,EAAE,CAAC;QACnBG,uBAAe,CAAC,IAAI,CAAC,CAAC;QACtBC,mBAAW,CAAC,IAAI,CAAC,CAAC;KACrB;IAED,gBAAgB;QACZ,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxBC,qBAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;KACnC;IAGD,OAAO,CAAC,EAAS;QACb,IAAI,IAAI,CAAC,QAAQ,EAAE;YACf,EAAE,CAAC,wBAAwB,EAAE,CAAC;SACjC;QACD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KAC3B;IAGD,WAAW,CAAC,EAAS;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE;YACd,EAAE,CAAC,wBAAwB,EAAE,CAAC;SACjC;QACD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KAC3B;IAGD,aAAa,CAAC,KAAiB;QAC3B,IAAI,CAACC,0BAAkB,CAAC,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;YAAE,OAAO;QACzD,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;KAC3B;;;IAOD,iBAAiB;QACbH,uBAAe,CAAC,IAAI,CAAC,CAAC;KACzB;IAGD,YAAY;QACR,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IA8FD,IAAI,gBAAgB;QAChB,OAAO;YACH,YAAY,EAAEI,4BAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACxE,YAAY,EAAEA,4BAAoB,CAAC,IAAI,CAAC,YAAY,EAAE;gBAClD,MAAM;gBACN,OAAO;gBACP,MAAM;gBACN,SAAS;gBACT,MAAM;gBACN,MAAM;gBACN,QAAQ;aACX,CAAC;YACF,SAAS,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,SAAS,GAAGL,WAAG,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,SAAS;YACrE,YAAY,EAAEK,4BAAoB,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACxE,WAAW,EAAEA,4BAAoB,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;YACtE,WAAW,EAAE,IAAI,CAAC,WAAW,KAAK,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,SAAS;YAC1E,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;YAChC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,SAAS;SACvC,CAAC;KACL;;;;;;;;;ACpPL,MAAM,YAAY,GAAG,u2IAAu2I,CAAC;AAC73I,wBAAe,YAAY;;MCId,SAAS;;;QA6GlB,sBAAiB,GAAG;YAChB,QACIP,iBACI,KAAK,EAAC,0CAA0C,gBACpC,IAAI,CAAC,cAAc,IAE/BA,iBAAK,KAAK,EAAC,iBAAiB,GAAO,EACnCA,iBAAK,KAAK,EAAC,iBAAiB,GAAO,CACjC,EACR;SACL,CAAC;QAEF,YAAO,GAAG;YACN,OAAO,IAAI,CAAC,iBAAiB,EAAE,CAAC;SACnC,CAAC;QAEF,mBAAc,GAAG;YACb,QACIA,iBACI,KAAK,EAAC,qBAAqB,gBACf,IAAI,CAAC,cAAc,IAE9B,IAAI,CAAC,KAAK,KAAK,QAAQ,GAAGA,qBAAQ,GAAG,IAAI,CAAC,aAAa,EACxDA,iBAAK,KAAK,EAAC,6BAA6B,GAAO,CAC7C,EACR;SACL,CAAC;;;;;;;;;IAlFF,IAAI,MAAM;QACN,MAAM,SAAS,GAAG;YACd,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,QAAQ,EAAE,IAAI,CAAC,cAAc;SAChC,CAAC;QAEF,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,SAAS,CAAC,OAAO,CAAC;KACpD;IAED,IAAI,YAAY;QACZ,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YAC7C,OAAO,SAAS,CAAC;SACpB;QAED,OAAO,IAAI,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;KAC7C;IAED,IAAI,WAAW;QACX,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;YAC1C,OAAO,SAAS,CAAC;SACpB;QAED,OAAO,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;KAC7C;IAED,IAAI,aAAa;;QACb,OAAO,MAAA,MAAAQ,aAAc,CAAC,IAAI,CAAC,KAAK,CAAC,8DAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,YAAY,CAAC,mCAAI,EAAE,CAAC;KAClF;IAED,IAAI,YAAY;QACZ,MAAM,UAAU,GAAG;YACf,OAAO,EAAE,IAAI,CAAC,iBAAiB;YAC/B,aAAa,EAAE,IAAI,CAAC,iBAAiB;SACxC,CAAC;QAEF,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC;KACtD;IAED,IAAI,cAAc;QACd,OAAON,WAAG,CAAC,IAAI,CAAC,KAAK,IAAI,kCAAkC,CAAC,CAAC;KAChE;IAED,iBAAiB;QACbC,uBAAe,CAAC,IAAI,CAAC,CAAC;KACzB;IAGD,iBAAiB;QACbA,uBAAe,CAAC,IAAI,CAAC,CAAC;KACzB;IAED,MAAM;QACF,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC;KACxB;;;;;;;;;;;","names":["handleDeprecationWarning","h","Fragment","loc","handleAriaLabel","handleColor","overrideFocus","isEventFromElement","getAriaValueFromProp","skeletonShapes"],"sources":["src/components/q2-btn/q2-btn.scss?tag=q2-btn&encapsulation=shadow","src/components/q2-btn/q2-btn.tsx","src/components/q2-loading/q2-loading.scss?tag=q2-loading&encapsulation=shadow","src/components/q2-loading/q2-loading.tsx"],"sourcesContent":["@import '../../styles/host.scss';\n@import '../../styles/functions';\n@import './q2-btn-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([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='1']) & {\n padding: var-list(--tct-scale-1, --app-scale-1x, 5px);\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 // Colors\n :host([color]) &,\n :host([intent]) & {\n font-size: var-list(var-prefixer(btn-font-size), inherit);\n border-radius: var-list(--tct-btn-border-radius, --comp-border-radius);\n text-transform: var-list(--tct-btn-text-transform, --comp-text-transform);\n letter-spacing: var-list(--tct-btn-letter-spacing, --comp-letter-spacing);\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), 14px);\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-medium), 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-large), 20px);\n }\n\n :host([color='primary']) &,\n :host([intent='workflow-primary']) & {\n --comp-background: #{var-list(\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-background: #{var-list(--tct-btn-primary-hover-background, --tct-btn-primary-hover-bg)};\n --comp-font-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-font-color, null);\n @include btn-ring(primary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(primary, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(primary);\n @include btn-icon-color(primary, --comp-font-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(\n --tct-btn-secondary-hover-background,\n --tct-btn-secondary-hover-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\n --comp-hover-font-color: var(--app-white, #ffffff);\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-hover-background, --app-white, null);\n @include btn-ring(secondary, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(secondary, disabled, 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-font-color);\n }\n\n :host([intent='workflow-destroy']) & {\n --comp-background: #{var-list(--tct-btn-destroy-background, --const-stoplight-alert, #d20a0a)};\n --comp-font-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-font-color, null);\n @include btn-ring(destroy, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, disabled, transparent, transparent, --comp-box-shadow);\n @include btn-ring(destroy, focus-visible, --const-focus-color, --comp-font-color, null);\n @include btn-intent(destroy);\n @include btn-icon-color(destroy, --comp-font-color);\n }\n\n :host([intent='workflow-escape']) & {\n --comp-background: #{var-list(--tct-btn-escape-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-escape-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\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-font-color, --comp-background, null);\n @include btn-ring(escape, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(escape, disabled, 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-font-color);\n }\n\n :host([intent='neutral']) & {\n --comp-background: #{var-list(--tct-btn-neutral-background, --app-white, #ffffff)};\n --comp-font-color: #{var-list(\n --tct-btn-neutral-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\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-font-color);\n @include btn-ring(neutral, hover, --comp-font-color, --app-white, null);\n @include btn-ring(neutral, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral, disabled, 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-font-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-font-color: #{var-list(\n --tct-btn-neutral-text-font-color,\n --tct-btn-primary-background,\n --tct-btn-primary-bg,\n --t-a11y-active-gray-color-AA,\n #404040\n )};\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-font-color, --comp-background, null);\n @include btn-ring(neutral-text, active, transparent, transparent, --comp-box-shadow);\n @include btn-ring(neutral-text, disabled, 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-font-color);\n }\n\n // Icons\n :host(:not([size])) &.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\n :host(:not([color]):not([intent])),\n &.icon-only {\n &:hover,\n &:focus {\n background: 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 // Plain\n :host(:not([intent])) &:not(.icon-only) {\n height: var-list(--tct-btn-height, auto);\n padding-inline: var-list(--tct-btn-padding-inline, 0);\n font-weight: var-list(--tct-btn-font-weight);\n border-radius: var-list(--tct-btn-border-radius, 0);\n\n &:hover,\n &:focus {\n background: var(--tct-btn-hover-background);\n }\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 {\n getAriaValueFromProp,\n handleAriaLabel,\n handleColor,\n isEventFromElement,\n loc,\n overrideFocus,\n handleDeprecationWarning,\n} from 'src/utils';\n\n@Component({ tag: 'q2-btn', shadow: true, styleUrl: 'q2-btn.scss' })\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() tabIndex: number;\n\n /**\n * Displays the component in an active state.\n *\n * @info\n * Only intended for use with the `badge` property.\n */\n @Prop({ reflect: true }) active: boolean;\n\n /** Displays the component in a smaller, badge style. */\n @Prop({ reflect: true }) badge: boolean;\n\n /** The component expands to fill the width of its parent element. */\n @Prop({ reflect: true }) block: boolean;\n\n /** Marks the component as disabled and displays a `not-allowed` cursor on hover. */\n @Prop({ reflect: true }) disabled: boolean;\n\n /**\n * Hides the `label`, and assigns its value to the `aria-label` attribute on the `<button>` element.\n */\n @Prop({ reflect: true, mutable: true }) hideLabel: boolean;\n\n /**\n * Indicates the role of the component in the workflow, which will apply appropriate styling to the component.\n */\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\n /**\n * Defines the text content of the button if it is not provided in the `<slot>` of the element.\n * Also used for the `aria-label` of the `<button>` element when only displaying an icon.\n *\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /** Displays the button with a loading spinner to indicate something is happening in the background and the user should not click again. */\n @Prop({ reflect: true }) loading: boolean;\n\n /** The default behavior of the button. */\n @Prop({ reflect: true }) type: string = 'button';\n\n /** @deprecated */\n @Prop({ reflect: true }) size: string;\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) color: string; // deprecated but need it to use utils/handleColor\n /** @deprecated */\n @Prop({ reflect: true }) fab: boolean;\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 this.handleButtonSize();\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('click', { capture: true })\n handleClick(ev: Event) {\n if (this.loading) {\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 @Watch('size')\n sizeObserver() {\n this.handleButtonSize();\n }\n\n handleButtonSize = () => {\n if (Number(this.size) <= 4) {\n handleDeprecationWarning(this, 'size', 'prop');\n }\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: getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),\n ariaHasPopup: getAriaValueFromProp(this.ariaHasPopup, [\n 'true',\n 'false',\n 'menu',\n 'listbox',\n 'tree',\n 'grid',\n 'dialog',\n ]),\n ariaLabel: this.label && this.hideLabel ? loc(this.label) : undefined,\n ariaSelected: getAriaValueFromProp(this.ariaSelected, ['true', 'false']),\n ariaPressed: getAriaValueFromProp(this.ariaPressed, ['true', 'false']),\n description: this.description !== undefined ? this.description : undefined,\n disabled: this.disabled || false,\n type: this.type,\n tabindex: this.tabIndex || undefined,\n };\n }\n}\n","@import '../../styles/host.scss';\n@import '../../styles/utility.scss';\n@import '../../styles/functions';\n\n:host {\n display: block;\n}\n\n:host([inline]),\n:host([modifiers*='inline']) {\n display: inline-block;\n}\n\n:host([hidden]) {\n display: none;\n}\n\n:host(:not([inline]):not([modifiers*='inline'])) {\n font-size: var-list(var-prefixer(loading-spinner-size), --app-scale-12x, 60px);\n}\n\n.q2-loading-animation {\n height: 1em;\n width: 1em;\n}\n\n@import './spinners/half-circle-spinner.scss';\n@import './skeleton/skeleton.scss';\n","import { Component, Prop, h, ComponentInterface, Element, Watch } from '@stencil/core';\nimport { handleAriaLabel, loc } from 'src/utils';\nimport skeletonShapes from './skeleton/shapes';\n\n@Component({ tag: 'q2-loading', shadow: true, styleUrl: 'q2-loading.scss' })\nexport class Q2Loading implements ComponentInterface {\n /**\n * Numeric adjustments are available for specific `type` and `shape` combinations.\n * These may impact the number of items, columns, and/or rows that display.\n *\n * When `shape=\"text\"`, `shape=\"detailed-item\"`, or `shape=\"label-value\"`, the `counts` attribute determines the number of rows to display.\n *\n * When `shape=\"table\"`, the `counts` attribute can be used in two ways:\n *\n * 1. `counts=\"CxR\"` = Provides a skeleton table of `C` columns and `R` rows. The default value is `\"5x5\"\n * 2. `counts=\"N\"` - Provides a skeleton table of `N` columns and 5 rows.\n *\n * When `shape=\"form\"`, the `counts` attribute can be used in two ways:\n *\n * 1. `count=\"CxR\" - Provides a skeleton form of `C` columns and `R` rows of fields. The default value is `\"1x1\"`.\n * 2. `count=\"N\"` - Provides a skeleton form of `N` fields stacked in single columns.\n */\n @Prop({ reflect: true }) counts: string;\n\n /** Styles the component to have a `height` and `width` of `1em`, making it easy to place alongside text. */\n @Prop({ reflect: true }) inline: boolean;\n\n /**\n * The label that is associated with the component. This is not displayed visually but is presented by screen readers.\n * @localizable\n */\n @Prop({ reflect: true, mutable: true }) label: string;\n\n /**\n * Visual adjustments available to specific type and shape combinations, written as a hyphen (`-`) separated string.\n *\n * Supported values depend on the type and shape selected, and are listed in detail in the shape sections above.\n */\n @Prop({ reflect: true }) modifiers: string;\n\n /**\n * The specific visual presentation of a loading element `type`.\n * @snippet\n * // when type=\"spinner\"\n * type ShapeValues = \"half-circle\";\n * // when type=\"skeleton\"\n * type ShapeValues = \"circle | \"rectangle\" | \"text\" | \"table\" | \"field\" | \"form\" | \"detailed-item\" | \"label-value\";\n */\n @Prop({ reflect: true }) shape: string;\n\n /** The type of loading element to display. */\n @Prop({ reflect: true }) type: 'spinner' | 'skeleton';\n\n /** @deprecated */\n @Prop({ reflect: true, mutable: true }) ariaLabel: string;\n\n @Element() hostElement: HTMLElement;\n\n get loader() {\n const loaderMap = {\n default: this.spinner,\n spinner: this.spinner,\n skeleton: this.skeletonLoader,\n };\n\n return loaderMap[this.type] || loaderMap.default;\n }\n\n get modifiersSet(): Set<string> {\n if (this.type !== 'skeleton' || !this.modifiers) {\n return undefined;\n }\n\n return new Set(this.modifiers.split('-'));\n }\n\n get countsArray(): number[] {\n if (this.type !== 'skeleton' || !this.counts) {\n return undefined;\n }\n\n return this.counts.split('x').map(Number);\n }\n\n get skeletonShape() {\n return skeletonShapes[this.shape]?.(this.countsArray, this.modifiersSet) ?? '';\n }\n\n get spinnerShape() {\n const spinnerMap = {\n default: this.halfCircleSpinner,\n 'half-circle': this.halfCircleSpinner,\n };\n\n return spinnerMap[this.type] || spinnerMap.default;\n }\n\n get localizedLabel() {\n return loc(this.label || 'tecton.element.loading.ariaLabel');\n }\n\n componentWillLoad() {\n handleAriaLabel(this);\n }\n\n @Watch('ariaLabel')\n ariaLabelObserver() {\n handleAriaLabel(this);\n }\n\n render() {\n return this.loader();\n }\n\n halfCircleSpinner = () => {\n return (\n <div\n class=\"q2-loading-animation half-circle-spinner\"\n aria-label={this.localizedLabel}\n >\n <div class=\"circle circle-1\"></div>\n <div class=\"circle circle-2\"></div>\n </div>\n );\n };\n\n spinner = () => {\n return this.halfCircleSpinner();\n };\n\n skeletonLoader = () => {\n return (\n <div\n class=\"q2-loading-skeleton\"\n aria-label={this.localizedLabel}\n >\n {this.shape === 'custom' ? <slot /> : this.skeletonShape}\n <div class=\"q2-loading-skeleton-shimmer\"></div>\n </div>\n );\n };\n}\n"],"version":3}
package/dist/cjs/q2-calendar.cjs.entry.js CHANGED
@@ -3,8 +3,8 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index$2 = require('./index-14c3693c.js');
6
- const index$1 = require('./index-9272f57a.js');
7
- const index = require('./index-1deac3ee.js');
6
+ const index$1 = require('./index-0430339e.js');
7
+ const index = require('./index-0e15dc8d.js');
8
8
 
9
9
  function formatDateISO(value) {
10
10
  const date = new Date(value);
@@ -91,7 +91,7 @@ function stringToDate(date) {
91
91
  // [mm, dd, yyyy] -> [yyyy, mm, dd]
92
92
  if (isStandardSlashDate)
93
93
  dateParts.unshift(dateParts.pop());
94
- result = new Date(dateParts.join('-'));
94
+ result = new Date(Date.UTC(parseInt(dateParts[0]), parseInt(dateParts[1]) - 1, parseInt(dateParts[2])));
95
95
  }
96
96
  else if (isPartialDate) {
97
97
  const now = new Date();
@@ -425,6 +425,7 @@ const Q2Calendar = class {
425
425
  this.formatModifier = 'M/D/YYYY'; // To allow missing leading zero, 4/3/2021 => converts into 04/03/2021
426
426
  this.defaultFormatString = 'mm/dd/yyyy';
427
427
  this.scheduledAfterRender = [];
428
+ this.internalError = '';
428
429
  this.dayAbbrStrings = getDays();
429
430
  this.dayStrings = getDaysOfWeek();
430
431
  this.monthStrings = getMonths();
@@ -496,7 +497,7 @@ const Q2Calendar = class {
496
497
  const { isValid, message, messageType, inputDate, isAvailable, calendarPosition } = validateInput(typedValue, validDays, this.validDates, this.invalidDates, this.startDate, this.endDate, this.defaultFormatString, this.assume);
497
498
  if (calendarPosition) {
498
499
  const [mm, dd, yyyy] = calendarPosition;
499
- const date = new Date(`${yyyy}-${mm}-${dd}`);
500
+ const date = new Date(yyyy, mm - 1, dd);
500
501
  if (index$1.dateFns.isValid(date)) {
501
502
  this.selectedMonthYear = setupMonthYear(date);
502
503
  this.dateList = this.buildDateList(this.selectedMonthYear);
@@ -551,6 +552,7 @@ const Q2Calendar = class {
551
552
  this.setCompleteInput(inputDate);
552
553
  }
553
554
  else if (this.value) {
555
+ this.valueOnBlur = this.value;
554
556
  this.value = null;
555
557
  this.change.emit({ value: null });
556
558
  this.typedValue = typedValue;
@@ -559,8 +561,15 @@ const Q2Calendar = class {
559
561
  this.onInputFocus = (event) => {
560
562
  if (!this.isTypeable)
561
563
  return;
562
- if (event.target === this.controlElement)
564
+ if (event.target === this.controlElement) {
565
+ if (this.valueOnBlur && !this.value) {
566
+ const tmpTypedValue = this.typedValue;
567
+ this.value = this.valueOnBlur;
568
+ this.typedValue = tmpTypedValue;
569
+ this.valueOnBlur = null;
570
+ }
563
571
  this.closeCalendar();
572
+ }
564
573
  };
565
574
  this.onInputClick = () => {
566
575
  if (this.disabled)
@@ -594,6 +603,7 @@ const Q2Calendar = class {
594
603
  this.change.emit({ value: formatDateISO(newDate) });
595
604
  this.typedValue = formatDateShort(newDate);
596
605
  this.invalid = false;
606
+ this.success.emit({ value: formatDateISO(newDate) });
597
607
  };
598
608
  this.onDateSelection = (event) => {
599
609
  const dateCell = event.target.closest('td:not([aria-hidden])');
@@ -825,14 +835,21 @@ const Q2Calendar = class {
825
835
  return this.typeable;
826
836
  }
827
837
  get errorList() {
828
- const { errors, hintMessageType, hintMessage, invalid } = this;
829
- if (Array.isArray(errors) && errors.length)
830
- return errors.filter(error => !!error).map(error => index.loc(error));
831
- if (hintMessageType === 'error' && hintMessage)
832
- return [hintMessage];
833
- if (invalid)
838
+ const { errors, internalError, invalid } = this;
839
+ let list = [];
840
+ if (internalError) {
841
+ list = [internalError];
842
+ }
843
+ if (Array.isArray(errors) && errors.length) {
844
+ list = errors
845
+ .filter(error => !!error)
846
+ .map(error => index.loc(error))
847
+ .concat(list);
848
+ }
849
+ else if (!internalError && invalid) {
834
850
  return ['tecton.element.calendar.invalid'];
835
- return [];
851
+ }
852
+ return list;
836
853
  }
837
854
  get hintList() {
838
855
  const { hints, hintMessageType, hintMessage } = this;
@@ -850,11 +867,12 @@ const Q2Calendar = class {
850
867
  }
851
868
  defaultErrorHandler(event) {
852
869
  if (event.target === this.hostElement && !this.hostElement.onerror) {
853
- const { errors } = this;
854
- if (Array.isArray(errors) && errors.includes('tecton.element.calendar.hint.invalidDate')) {
855
- return;
870
+ if (this.hintMessageType === 'error' && this.hintMessage) {
871
+ this.internalError = this.hintMessage;
872
+ }
873
+ else {
874
+ this.internalError = index.loc('tecton.element.calendar.hint.invalidDate');
856
875
  }
857
- this.errors = (errors || []).concat(['tecton.element.calendar.hint.invalidDate']);
858
876
  }
859
877
  }
860
878
  defaultSuccessHandler(event) {
@@ -865,9 +883,11 @@ const Q2Calendar = class {
865
883
  this.onsuccess(event);
866
884
  }
867
885
  else {
868
- const { errors } = this;
869
- if (Array.isArray(errors) && errors.includes('tecton.element.calendar.hint.invalidDate')) {
870
- this.errors = errors.filter(x => x !== 'tecton.element.calendar.hint.invalidDate');
886
+ this.internalError = '';
887
+ if (this.hintMessageType === 'error' && this.hintMessage) {
888
+ this.hintMessage = null;
889
+ this.hintMessageType = null;
890
+ this.invalid = false;
871
891
  }
872
892
  }
873
893
  }
@@ -1107,7 +1127,7 @@ const Q2Calendar = class {
1107
1127
  (_a = this.calendarBody.querySelector(`td[data-day="${date.getDate()}"]`)) === null || _a === void 0 ? void 0 : _a.focus();
1108
1128
  }
1109
1129
  render() {
1110
- return (index$2.h("click-elsewhere", { key: '31cb3c3163c5e158275c270996788b15048e9e8e', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.inputField(), index$2.h("q2-popover", { key: '716aae6b9e6e2c7a48b46a6d9104f07ba50a3e5c', ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, block: true }, this.hintField(), this.calendarPopover())));
1130
+ return (index$2.h("click-elsewhere", { key: '37ead1601e1af52ba69be28e46c3b42559a9a167', class: this.open ? 'dropdown-open' : undefined, onChange: this.onClickElsewhere }, this.inputField(), index$2.h("q2-popover", { key: '387403920626e2da363de17d92511fd215339e88', ref: el => (this.popoverElement = el), controlElement: this.innerInputContainer, open: this.open, direction: this.popoverDirection, minHeight: this.popoverMinHeight, align: this.popoverAlignment, block: true }, this.hintField(), this.calendarPopover())));
1111
1131
  }
1112
1132
  hintField() {
1113
1133
  if (!this.hintMessage)
@@ -1121,11 +1141,23 @@ const Q2Calendar = class {
1121
1141
  this.invalid = !isValid;
1122
1142
  this.hintMessage = message;
1123
1143
  this.hintMessageType = messageType;
1144
+ if (messageType === 'error' && message) {
1145
+ this.internalError = message;
1146
+ this.error.emit({
1147
+ errors: [
1148
+ {
1149
+ message,
1150
+ errorCode: 'generalInvalid',
1151
+ },
1152
+ ],
1153
+ });
1154
+ }
1124
1155
  }
1125
1156
  setCompleteInput(inputDate) {
1126
1157
  const formattedDate = formatDateShort(inputDate);
1127
1158
  this.change.emit({ value: formatDateISO(inputDate) });
1128
1159
  this.typedValue = formattedDate;
1160
+ this.internalError = null;
1129
1161
  this.setHints({
1130
1162
  isValid: true,
1131
1163
  message: null,