q2-tecton-elements 1.71.4 → 1.73.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (415) hide show
  1. package/dist/bundle-report.json +32564 -26687
  2. package/dist/cjs/{charting-ClN1ldqv.js → charting-CdNTrVBe.js} +80 -0
  3. package/dist/cjs/click-elsewhere_3.cjs.entry.js +85 -20
  4. package/dist/cjs/{dataSample-BYR-wrOn.js → dataSample-B4blhlH4.js} +1 -1
  5. package/dist/cjs/date-picker-helpers-UYvPn98R.js +257 -0
  6. package/dist/cjs/{index-SpDCZABA.js → index-BqyWHpNu.js} +2 -2
  7. package/dist/cjs/loader.cjs.js +1 -1
  8. package/dist/cjs/{q2-action-group_2.cjs.entry.js → q2-action-group.cjs.entry.js} +1 -89
  9. package/dist/cjs/q2-action-sheet.cjs.entry.js +98 -18
  10. package/dist/cjs/q2-avatar.cjs.entry.js +1 -1
  11. package/dist/cjs/q2-badge_2.cjs.entry.js +113 -12
  12. package/dist/cjs/q2-btn_2.cjs.entry.js +2 -2
  13. package/dist/cjs/q2-calendar.cjs.entry.js +14 -7
  14. package/dist/cjs/q2-card-image.cjs.entry.js +4 -4
  15. package/dist/cjs/q2-card.cjs.entry.js +1 -1
  16. package/dist/cjs/q2-carousel-pane.cjs.entry.js +3 -3
  17. package/dist/cjs/q2-carousel.cjs.entry.js +20 -6
  18. package/dist/cjs/q2-chart-area.cjs.entry.js +38 -7
  19. package/dist/cjs/q2-chart-bar.cjs.entry.js +39 -8
  20. package/dist/cjs/q2-chart-donut.cjs.entry.js +31 -13
  21. package/dist/cjs/q2-checkbox-group.cjs.entry.js +3 -3
  22. package/dist/cjs/q2-checkbox_2.cjs.entry.js +9 -6
  23. package/dist/cjs/q2-context.cjs.entry.js +6 -5
  24. package/dist/cjs/q2-currency.cjs.entry.js +1 -1
  25. package/dist/cjs/q2-data-table.cjs.entry.js +7 -7
  26. package/dist/cjs/q2-date-calendar.cjs.entry.js +452 -0
  27. package/dist/cjs/q2-date-picker_2.cjs.entry.js +968 -0
  28. package/dist/cjs/q2-detail.cjs.entry.js +2 -2
  29. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  30. package/dist/cjs/q2-dropdown.cjs.entry.js +4 -4
  31. package/dist/cjs/q2-editable-field.cjs.entry.js +51 -37
  32. package/dist/cjs/q2-example.cjs.entry.js +1 -1
  33. package/dist/cjs/q2-file-picker.cjs.entry.js +60 -4
  34. package/dist/cjs/q2-form.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-formatted-text.cjs.entry.js +1 -1
  36. package/dist/cjs/q2-icon.cjs.entry.js +1 -1
  37. package/dist/cjs/q2-item.cjs.entry.js +21 -3
  38. package/dist/cjs/q2-legend.cjs.entry.js +1 -1
  39. package/dist/cjs/q2-link_2.cjs.entry.js +2 -2
  40. package/dist/cjs/q2-loc.cjs.entry.js +1 -1
  41. package/dist/cjs/q2-message.cjs.entry.js +3 -3
  42. package/dist/cjs/q2-meter.cjs.entry.js +2 -2
  43. package/dist/cjs/q2-modal.cjs.entry.js +59 -17
  44. package/dist/cjs/q2-month-picker.cjs.entry.js +3 -3
  45. package/dist/cjs/q2-mutation-observer.cjs.entry.js +1 -1
  46. package/dist/cjs/q2-option.cjs.entry.js +1 -1
  47. package/dist/cjs/q2-otp.cjs.entry.js +5 -5
  48. package/dist/cjs/q2-pagination.cjs.entry.js +4 -4
  49. package/dist/cjs/q2-pill.cjs.entry.js +8 -5
  50. package/dist/cjs/q2-radio-group.cjs.entry.js +22 -4
  51. package/dist/cjs/q2-radio.cjs.entry.js +3 -3
  52. package/dist/cjs/q2-relative-time.cjs.entry.js +3 -3
  53. package/dist/cjs/q2-resize-observer.cjs.entry.js +92 -0
  54. package/dist/cjs/q2-search.cjs.entry.js +4 -4
  55. package/dist/cjs/q2-section.cjs.entry.js +7 -7
  56. package/dist/cjs/q2-select.cjs.entry.js +41 -21
  57. package/dist/cjs/q2-stepper-pane.cjs.entry.js +2 -2
  58. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +2 -2
  59. package/dist/cjs/q2-stepper.cjs.entry.js +2 -2
  60. package/dist/cjs/q2-surface.cjs.entry.js +1 -1
  61. package/dist/cjs/q2-tab-container.cjs.entry.js +2 -2
  62. package/dist/cjs/q2-tab-pane.cjs.entry.js +1 -1
  63. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  64. package/dist/cjs/q2-textarea.cjs.entry.js +2 -2
  65. package/dist/cjs/q2-toast.cjs.entry.js +1 -1
  66. package/dist/cjs/q2-tooltip.cjs.entry.js +1 -1
  67. package/dist/cjs/{sectorHelper-9TWL-3dw.js → sectorHelper-CxhDl5ql.js} +1 -1
  68. package/dist/cjs/tecton-tab-pane.cjs.entry.js +5 -3
  69. package/dist/collection/collection-manifest.json +2 -0
  70. package/dist/collection/components/q2-action-sheet/q2-action-sheet.css +52 -0
  71. package/dist/collection/components/q2-action-sheet/q2-action-sheet.js +98 -18
  72. package/dist/collection/components/q2-action-sheet/test/q2-action-sheet-test.vr.js +124 -0
  73. package/dist/collection/components/q2-avatar/q2-avatar.js +1 -1
  74. package/dist/collection/components/q2-btn/q2-btn.css +152 -146
  75. package/dist/collection/components/q2-btn/q2-btn.js +10 -4
  76. package/dist/collection/components/q2-btn/test/q2-btn-test.vr.js +229 -20
  77. package/dist/collection/components/q2-calendar/q2-calendar.css +3 -0
  78. package/dist/collection/components/q2-calendar/q2-calendar.js +20 -7
  79. package/dist/collection/components/q2-calendar/q2-month-picker.js +2 -2
  80. package/dist/collection/components/q2-calendar/test/q2-calendar-test.vr.js +26 -15
  81. package/dist/collection/components/q2-card/test/q2-card-test.vr.js +4 -0
  82. package/dist/collection/components/q2-card-image/q2-card-image.css +89 -134
  83. package/dist/collection/components/q2-card-image/q2-card-image.js +4 -4
  84. package/dist/collection/components/q2-card-image/test/q2-card-image-test.vr.js +4 -0
  85. package/dist/collection/components/q2-carousel/q2-carousel.js +19 -5
  86. package/dist/collection/components/q2-carousel/test/q2-carousel-test.vr.js +45 -0
  87. package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js +2 -2
  88. package/dist/collection/components/q2-chart-area/q2-chart-area.css +11 -0
  89. package/dist/collection/components/q2-chart-area/q2-chart-area.js +53 -7
  90. package/dist/collection/components/q2-chart-area/test/q2-chart-area-test.vr.js +14 -0
  91. package/dist/collection/components/q2-chart-bar/q2-chart-bar.css +11 -0
  92. package/dist/collection/components/q2-chart-bar/q2-chart-bar.js +50 -4
  93. package/dist/collection/components/q2-chart-bar/test/q2-chart-bar-test.vr.js +14 -0
  94. package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +30 -10
  95. package/dist/collection/components/q2-chart-donut/test/q2-chart-donut-test.vr.js +25 -0
  96. package/dist/collection/components/q2-checkbox/q2-checkbox.css +2 -2
  97. package/dist/collection/components/q2-checkbox/q2-checkbox.js +6 -3
  98. package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.css +2 -0
  99. package/dist/collection/components/q2-checkbox-group/q2-checkbox-group.js +6 -3
  100. package/dist/collection/components/q2-context/q2-context.css +5 -0
  101. package/dist/collection/components/q2-context/q2-context.js +4 -3
  102. package/dist/collection/components/q2-context/test/q2-context-test.vr.js +14 -4
  103. package/dist/collection/components/q2-currency/q2-currency.js +1 -1
  104. package/dist/collection/components/q2-data-table/q2-data-table.css +6 -0
  105. package/dist/collection/components/q2-data-table/q2-data-table.js +5 -5
  106. package/dist/collection/components/q2-data-table/test/q2-data-table-test.vr.js +52 -0
  107. package/dist/collection/components/q2-date-calendar/q2-date-calendar.css +393 -0
  108. package/dist/collection/components/q2-date-calendar/q2-date-calendar.js +1022 -0
  109. package/dist/collection/components/q2-date-calendar/test/q2-date-calendar-test.vr.js +111 -0
  110. package/dist/collection/components/q2-date-picker/q2-date-picker.css +138 -0
  111. package/dist/collection/components/q2-date-picker/q2-date-picker.js +2010 -0
  112. package/dist/collection/components/q2-date-picker/test/q2-date-picker-test.vr.js +179 -0
  113. package/dist/collection/components/q2-detail/q2-detail.js +1 -1
  114. package/dist/collection/components/q2-dropdown/q2-dropdown.css +2 -0
  115. package/dist/collection/components/q2-dropdown/q2-dropdown.js +5 -5
  116. package/dist/collection/components/q2-dropdown/test/q2-dropdown-test.vr.js +30 -0
  117. package/dist/collection/components/q2-editable-field/q2-editable-field.css +2 -0
  118. package/dist/collection/components/q2-editable-field/q2-editable-field.js +59 -45
  119. package/dist/collection/components/q2-example/q2-example.js +1 -1
  120. package/dist/collection/components/q2-file-picker/q2-file-picker.css +27 -0
  121. package/dist/collection/components/q2-file-picker/q2-file-picker.js +98 -2
  122. package/dist/collection/components/q2-file-picker/test/q2-file-picker-test.vr.js +22 -0
  123. package/dist/collection/components/q2-form/q2-form.js +1 -1
  124. package/dist/collection/components/q2-formatted-text/q2-formatted-text.js +1 -1
  125. package/dist/collection/components/q2-input/q2-input.css +67 -1
  126. package/dist/collection/components/q2-input/q2-input.js +160 -15
  127. package/dist/collection/components/q2-input/test/q2-input-test.vr.js +35 -0
  128. package/dist/collection/components/q2-item/q2-item.css +3 -1
  129. package/dist/collection/components/q2-item/q2-item.js +19 -1
  130. package/dist/collection/components/q2-item/test/q2-item-test.vr.js +8 -2
  131. package/dist/collection/components/q2-legend/q2-legend.js +1 -1
  132. package/dist/collection/components/q2-list/q2-list.js +1 -1
  133. package/dist/collection/components/q2-message/q2-message.css +5 -5
  134. package/dist/collection/components/q2-message/q2-message.js +1 -1
  135. package/dist/collection/components/q2-meter/q2-meter.js +1 -1
  136. package/dist/collection/components/q2-modal/q2-modal.css +40 -3
  137. package/dist/collection/components/q2-modal/q2-modal.js +100 -16
  138. package/dist/collection/components/q2-modal/test/q2-modal-test.vr.js +32 -7
  139. package/dist/collection/components/q2-mutation-observer/q2-mutation-observer.js +1 -1
  140. package/dist/collection/components/q2-optgroup/q2-optgroup.js +1 -1
  141. package/dist/collection/components/q2-option-list/q2-option-list.js +33 -4
  142. package/dist/collection/components/q2-otp/q2-otp.js +4 -4
  143. package/dist/collection/components/q2-pagination/q2-pagination.js +3 -3
  144. package/dist/collection/components/q2-pill/q2-pill.css +2 -2
  145. package/dist/collection/components/q2-pill/q2-pill.js +6 -3
  146. package/dist/collection/components/q2-popover/q2-popover.css +4 -2
  147. package/dist/collection/components/q2-popover/q2-popover.js +50 -14
  148. package/dist/collection/components/q2-radio/q2-radio.css +158 -104
  149. package/dist/collection/components/q2-radio/q2-radio.js +5 -2
  150. package/dist/collection/components/q2-radio/test/q2-radio-test.vr.js +25 -2
  151. package/dist/collection/components/q2-radio-group/q2-radio-group.css +39 -2
  152. package/dist/collection/components/q2-radio-group/q2-radio-group.js +73 -4
  153. package/dist/collection/components/q2-radio-group/test/q2-radio-group-test.vr.js +43 -1
  154. package/dist/collection/components/q2-relative-time/q2-relative-time.js +2 -2
  155. package/dist/collection/components/q2-resize-observer/q2-resize-observer.js +1 -1
  156. package/dist/collection/components/q2-search/q2-search.css +2 -0
  157. package/dist/collection/components/q2-search/q2-search.js +6 -3
  158. package/dist/collection/components/q2-section/q2-section.css +2 -0
  159. package/dist/collection/components/q2-section/q2-section.js +6 -6
  160. package/dist/collection/components/q2-select/q2-select.css +3 -0
  161. package/dist/collection/components/q2-select/q2-select.js +48 -22
  162. package/dist/collection/components/q2-select/test/q2-select-test.vr.js +13 -0
  163. package/dist/collection/components/q2-stepper/q2-stepper.js +1 -1
  164. package/dist/collection/components/q2-stepper-pane/q2-stepper-pane.js +1 -1
  165. package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +1 -1
  166. package/dist/collection/components/q2-surface/q2-surface.js +1 -1
  167. package/dist/collection/components/q2-surface/test/q2-surface-test.vr.js +2 -2
  168. package/dist/collection/components/q2-tab-container/q2-tab-container.js +1 -1
  169. package/dist/collection/components/q2-tab-pane/q2-tab-pane.js +1 -1
  170. package/dist/collection/components/q2-tag/q2-tag.js +6 -3
  171. package/dist/collection/components/q2-textarea/q2-textarea.js +6 -3
  172. package/dist/collection/components/q2-tooltip/test/q2-tooltip-test.vr.js +1 -1
  173. package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +5 -3
  174. package/dist/collection/utils/chart-keyboard.js +76 -0
  175. package/dist/collection/utils/date-picker/date-picker-helpers.js +239 -0
  176. package/dist/collection/utils/date-picker/date-picker-types.js +1 -0
  177. package/dist/collection/utils/index.js +2 -2
  178. package/dist/collection/utils/test/vr-helpers.js +16 -2
  179. package/dist/components/charting.js +1603 -1532
  180. package/dist/components/dataSample.js +7 -7
  181. package/dist/components/index.js +57 -53
  182. package/dist/components/index2.js +3 -3
  183. package/dist/components/q2-action-sheet.js +224 -103
  184. package/dist/components/q2-avatar2.js +8 -8
  185. package/dist/components/q2-btn2.js +2 -2
  186. package/dist/components/q2-calendar.js +15 -10
  187. package/dist/components/q2-card-image.js +24 -24
  188. package/dist/components/q2-carousel-pane2.js +3 -3
  189. package/dist/components/q2-carousel.js +37 -24
  190. package/dist/components/q2-chart-area.js +415 -369
  191. package/dist/components/q2-chart-bar.js +193 -148
  192. package/dist/components/q2-chart-donut.js +185 -158
  193. package/dist/components/q2-checkbox-group.js +12 -12
  194. package/dist/components/q2-checkbox2.js +12 -12
  195. package/dist/components/q2-context.js +30 -29
  196. package/dist/components/q2-currency.js +9 -9
  197. package/dist/components/q2-data-table.js +111 -111
  198. package/dist/components/q2-date-calendar.d.ts +11 -0
  199. package/dist/components/q2-date-calendar.js +5 -0
  200. package/dist/components/q2-date-calendar2.js +678 -0
  201. package/dist/components/q2-date-picker.d.ts +11 -0
  202. package/dist/components/q2-date-picker.js +5 -0
  203. package/dist/components/q2-date-picker2.js +875 -0
  204. package/dist/components/q2-detail.js +3 -3
  205. package/dist/components/q2-dropdown.js +13 -13
  206. package/dist/components/q2-editable-field.js +45 -36
  207. package/dist/components/q2-example.js +11 -11
  208. package/dist/components/q2-file-picker.js +71 -11
  209. package/dist/components/q2-form.js +6 -6
  210. package/dist/components/q2-formatted-text.js +2 -2
  211. package/dist/components/q2-input2.js +268 -163
  212. package/dist/components/q2-item2.js +33 -23
  213. package/dist/components/q2-legend2.js +7 -7
  214. package/dist/components/q2-list2.js +6 -6
  215. package/dist/components/q2-message2.js +29 -29
  216. package/dist/components/q2-meter.js +7 -7
  217. package/dist/components/q2-modal.js +94 -76
  218. package/dist/components/q2-month-picker.js +17 -17
  219. package/dist/components/q2-mutation-observer.js +1 -1
  220. package/dist/components/q2-optgroup2.js +7 -7
  221. package/dist/components/q2-option-list2.js +52 -32
  222. package/dist/components/q2-otp.js +8 -8
  223. package/dist/components/q2-pagination.js +67 -67
  224. package/dist/components/q2-pill.js +17 -15
  225. package/dist/components/q2-popover2.js +77 -53
  226. package/dist/components/q2-radio-group.js +70 -40
  227. package/dist/components/q2-radio.js +40 -55
  228. package/dist/components/q2-relative-time.js +5 -5
  229. package/dist/components/q2-resize-observer2.js +23 -23
  230. package/dist/components/q2-search.js +6 -6
  231. package/dist/components/q2-section.js +33 -33
  232. package/dist/components/q2-select2.js +47 -40
  233. package/dist/components/q2-stepper-pane.js +17 -13
  234. package/dist/components/q2-stepper-vertical.js +4 -4
  235. package/dist/components/q2-stepper.js +57 -57
  236. package/dist/components/q2-surface.js +3 -3
  237. package/dist/components/q2-tab-container.js +18 -18
  238. package/dist/components/q2-tab-pane.js +2 -2
  239. package/dist/components/q2-tag2.js +8 -6
  240. package/dist/components/q2-textarea.js +3 -3
  241. package/dist/components/sectorHelper.js +78 -78
  242. package/dist/components/tecton-tab-pane.js +12 -11
  243. package/dist/esm/{charting-DOZct-UB.js → charting-DFXJklqs.js} +79 -1
  244. package/dist/esm/click-elsewhere_3.entry.js +85 -20
  245. package/dist/esm/{dataSample-Dm1zpQNi.js → dataSample-CP_VKNqt.js} +1 -1
  246. package/dist/esm/date-picker-helpers-D8QnN_AS.js +242 -0
  247. package/dist/esm/{index-Cps4jSQM.js → index-CP8pXJ-l.js} +2 -2
  248. package/dist/esm/loader.js +1 -1
  249. package/dist/esm/{q2-action-group_2.entry.js → q2-action-group.entry.js} +3 -90
  250. package/dist/esm/q2-action-sheet.entry.js +99 -19
  251. package/dist/esm/q2-avatar.entry.js +1 -1
  252. package/dist/esm/q2-badge_2.entry.js +113 -12
  253. package/dist/esm/q2-btn_2.entry.js +2 -2
  254. package/dist/esm/q2-calendar.entry.js +14 -7
  255. package/dist/esm/q2-card-image.entry.js +4 -4
  256. package/dist/esm/q2-card.entry.js +1 -1
  257. package/dist/esm/q2-carousel-pane.entry.js +3 -3
  258. package/dist/esm/q2-carousel.entry.js +20 -6
  259. package/dist/esm/q2-chart-area.entry.js +38 -7
  260. package/dist/esm/q2-chart-bar.entry.js +39 -8
  261. package/dist/esm/q2-chart-donut.entry.js +31 -13
  262. package/dist/esm/q2-checkbox-group.entry.js +3 -3
  263. package/dist/esm/q2-checkbox_2.entry.js +9 -6
  264. package/dist/esm/q2-context.entry.js +6 -5
  265. package/dist/esm/q2-currency.entry.js +1 -1
  266. package/dist/esm/q2-data-table.entry.js +7 -7
  267. package/dist/esm/q2-date-calendar.entry.js +450 -0
  268. package/dist/esm/q2-date-picker_2.entry.js +965 -0
  269. package/dist/esm/q2-detail.entry.js +2 -2
  270. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  271. package/dist/esm/q2-dropdown.entry.js +4 -4
  272. package/dist/esm/q2-editable-field.entry.js +51 -37
  273. package/dist/esm/q2-example.entry.js +1 -1
  274. package/dist/esm/q2-file-picker.entry.js +60 -4
  275. package/dist/esm/q2-form.entry.js +1 -1
  276. package/dist/esm/q2-formatted-text.entry.js +1 -1
  277. package/dist/esm/q2-icon.entry.js +1 -1
  278. package/dist/esm/q2-item.entry.js +21 -3
  279. package/dist/esm/q2-legend.entry.js +1 -1
  280. package/dist/esm/q2-link_2.entry.js +2 -2
  281. package/dist/esm/q2-loc.entry.js +1 -1
  282. package/dist/esm/q2-message.entry.js +3 -3
  283. package/dist/esm/q2-meter.entry.js +2 -2
  284. package/dist/esm/q2-modal.entry.js +59 -17
  285. package/dist/esm/q2-month-picker.entry.js +3 -3
  286. package/dist/esm/q2-mutation-observer.entry.js +1 -1
  287. package/dist/esm/q2-option.entry.js +1 -1
  288. package/dist/esm/q2-otp.entry.js +5 -5
  289. package/dist/esm/q2-pagination.entry.js +4 -4
  290. package/dist/esm/q2-pill.entry.js +8 -5
  291. package/dist/esm/q2-radio-group.entry.js +22 -4
  292. package/dist/esm/q2-radio.entry.js +3 -3
  293. package/dist/esm/q2-relative-time.entry.js +3 -3
  294. package/dist/esm/q2-resize-observer.entry.js +90 -0
  295. package/dist/esm/q2-search.entry.js +4 -4
  296. package/dist/esm/q2-section.entry.js +7 -7
  297. package/dist/esm/q2-select.entry.js +41 -21
  298. package/dist/esm/q2-stepper-pane.entry.js +2 -2
  299. package/dist/esm/q2-stepper-vertical.entry.js +2 -2
  300. package/dist/esm/q2-stepper.entry.js +2 -2
  301. package/dist/esm/q2-surface.entry.js +1 -1
  302. package/dist/esm/q2-tab-container.entry.js +2 -2
  303. package/dist/esm/q2-tab-pane.entry.js +1 -1
  304. package/dist/esm/q2-tecton-elements.js +1 -1
  305. package/dist/esm/q2-textarea.entry.js +2 -2
  306. package/dist/esm/q2-toast.entry.js +1 -1
  307. package/dist/esm/q2-tooltip.entry.js +1 -1
  308. package/dist/esm/{sectorHelper--RMGWGAy.js → sectorHelper-DBtkWtpl.js} +1 -1
  309. package/dist/esm/tecton-tab-pane.entry.js +5 -3
  310. package/dist/q2-tecton-elements/{charting-DOZct-UB.js → charting-DFXJklqs.js} +1625 -1554
  311. package/dist/q2-tecton-elements/click-elsewhere_3.entry.js +98 -54
  312. package/dist/q2-tecton-elements/{dataSample-Dm1zpQNi.js → dataSample-CP_VKNqt.js} +33 -33
  313. package/dist/q2-tecton-elements/date-picker-helpers-D8QnN_AS.js +153 -0
  314. package/dist/q2-tecton-elements/{index-Cps4jSQM.js → index-CP8pXJ-l.js} +2 -2
  315. package/dist/q2-tecton-elements/{q2-action-group_2.entry.js → q2-action-group.entry.js} +35 -113
  316. package/dist/q2-tecton-elements/q2-action-sheet.entry.js +169 -84
  317. package/dist/q2-tecton-elements/q2-avatar.entry.js +8 -8
  318. package/dist/q2-tecton-elements/q2-badge_2.entry.js +240 -140
  319. package/dist/q2-tecton-elements/q2-btn_2.entry.js +23 -23
  320. package/dist/q2-tecton-elements/q2-calendar.entry.js +18 -13
  321. package/dist/q2-tecton-elements/q2-card-image.entry.js +9 -9
  322. package/dist/q2-tecton-elements/q2-card.entry.js +1 -1
  323. package/dist/q2-tecton-elements/q2-carousel-pane.entry.js +4 -4
  324. package/dist/q2-tecton-elements/q2-carousel.entry.js +24 -11
  325. package/dist/q2-tecton-elements/q2-chart-area.entry.js +190 -144
  326. package/dist/q2-tecton-elements/q2-chart-bar.entry.js +382 -338
  327. package/dist/q2-tecton-elements/q2-chart-donut.entry.js +186 -160
  328. package/dist/q2-tecton-elements/q2-checkbox-group.entry.js +8 -8
  329. package/dist/q2-tecton-elements/q2-checkbox_2.entry.js +21 -19
  330. package/dist/q2-tecton-elements/q2-context.entry.js +18 -17
  331. package/dist/q2-tecton-elements/q2-currency.entry.js +9 -9
  332. package/dist/q2-tecton-elements/q2-data-table.entry.js +38 -38
  333. package/dist/q2-tecton-elements/q2-date-calendar.entry.js +438 -0
  334. package/dist/q2-tecton-elements/q2-date-picker_2.entry.js +792 -0
  335. package/dist/q2-tecton-elements/q2-detail.entry.js +4 -4
  336. package/dist/q2-tecton-elements/q2-dropdown-item.entry.js +1 -1
  337. package/dist/q2-tecton-elements/q2-dropdown.entry.js +10 -10
  338. package/dist/q2-tecton-elements/q2-editable-field.entry.js +50 -41
  339. package/dist/q2-tecton-elements/q2-example.entry.js +1 -1
  340. package/dist/q2-tecton-elements/q2-file-picker.entry.js +62 -7
  341. package/dist/q2-tecton-elements/q2-form.entry.js +2 -2
  342. package/dist/q2-tecton-elements/q2-formatted-text.entry.js +2 -2
  343. package/dist/q2-tecton-elements/q2-icon.entry.js +1 -1
  344. package/dist/q2-tecton-elements/q2-item.entry.js +27 -17
  345. package/dist/q2-tecton-elements/q2-legend.entry.js +2 -2
  346. package/dist/q2-tecton-elements/q2-link_2.entry.js +7 -7
  347. package/dist/q2-tecton-elements/q2-loc.entry.js +1 -1
  348. package/dist/q2-tecton-elements/q2-message.entry.js +30 -30
  349. package/dist/q2-tecton-elements/q2-meter.entry.js +8 -8
  350. package/dist/q2-tecton-elements/q2-modal.entry.js +61 -45
  351. package/dist/q2-tecton-elements/q2-month-picker.entry.js +14 -14
  352. package/dist/q2-tecton-elements/q2-mutation-observer.entry.js +1 -1
  353. package/dist/q2-tecton-elements/q2-option.entry.js +1 -1
  354. package/dist/q2-tecton-elements/q2-otp.entry.js +9 -9
  355. package/dist/q2-tecton-elements/q2-pagination.entry.js +20 -20
  356. package/dist/q2-tecton-elements/q2-pill.entry.js +43 -41
  357. package/dist/q2-tecton-elements/q2-radio-group.entry.js +55 -34
  358. package/dist/q2-tecton-elements/q2-radio.entry.js +38 -53
  359. package/dist/q2-tecton-elements/q2-relative-time.entry.js +11 -11
  360. package/dist/q2-tecton-elements/q2-resize-observer.entry.js +81 -0
  361. package/dist/q2-tecton-elements/q2-search.entry.js +7 -7
  362. package/dist/q2-tecton-elements/q2-section.entry.js +25 -25
  363. package/dist/q2-tecton-elements/q2-select.entry.js +28 -21
  364. package/dist/q2-tecton-elements/q2-stepper-pane.entry.js +19 -15
  365. package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +9 -9
  366. package/dist/q2-tecton-elements/q2-stepper.entry.js +45 -45
  367. package/dist/q2-tecton-elements/q2-surface.entry.js +3 -3
  368. package/dist/q2-tecton-elements/q2-tab-container.entry.js +15 -15
  369. package/dist/q2-tecton-elements/q2-tab-pane.entry.js +9 -9
  370. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  371. package/dist/q2-tecton-elements/q2-textarea.entry.js +3 -3
  372. package/dist/q2-tecton-elements/q2-toast.entry.js +1 -1
  373. package/dist/q2-tecton-elements/q2-tooltip.entry.js +1 -1
  374. package/dist/q2-tecton-elements/{sectorHelper--RMGWGAy.js → sectorHelper-DBtkWtpl.js} +56 -56
  375. package/dist/q2-tecton-elements/tecton-tab-pane.entry.js +8 -7
  376. package/dist/types/components/q2-action-sheet/q2-action-sheet.d.ts +21 -1
  377. package/dist/types/components/q2-action-sheet/test/q2-action-sheet-test.vr.d.ts +1 -0
  378. package/dist/types/components/q2-btn/q2-btn.d.ts +7 -3
  379. package/dist/types/components/q2-calendar/q2-calendar.d.ts +10 -2
  380. package/dist/types/components/q2-card-image/q2-card-image.d.ts +1 -1
  381. package/dist/types/components/q2-carousel/q2-carousel.d.ts +5 -0
  382. package/dist/types/components/q2-chart-area/q2-chart-area.d.ts +11 -2
  383. package/dist/types/components/q2-chart-bar/q2-chart-bar.d.ts +9 -0
  384. package/dist/types/components/q2-chart-donut/q2-chart-donut.d.ts +1 -0
  385. package/dist/types/components/q2-checkbox/q2-checkbox.d.ts +4 -3
  386. package/dist/types/components/q2-checkbox-group/q2-checkbox-group.d.ts +4 -2
  387. package/dist/types/components/q2-date-calendar/q2-date-calendar.d.ts +122 -0
  388. package/dist/types/components/q2-date-calendar/test/q2-date-calendar-test.vr.d.ts +1 -0
  389. package/dist/types/components/q2-date-picker/q2-date-picker.d.ts +304 -0
  390. package/dist/types/components/q2-date-picker/test/q2-date-picker-test.vr.d.ts +1 -0
  391. package/dist/types/components/q2-dropdown/q2-dropdown.d.ts +3 -3
  392. package/dist/types/components/q2-dropdown/test/q2-dropdown-test.vr.d.ts +1 -0
  393. package/dist/types/components/q2-editable-field/q2-editable-field.d.ts +20 -2
  394. package/dist/types/components/q2-file-picker/q2-file-picker.d.ts +20 -0
  395. package/dist/types/components/q2-input/q2-input.d.ts +32 -4
  396. package/dist/types/components/q2-item/q2-item.d.ts +3 -0
  397. package/dist/types/components/q2-modal/q2-modal.d.ts +10 -1
  398. package/dist/types/components/q2-option-list/q2-option-list.d.ts +1 -0
  399. package/dist/types/components/q2-popover/q2-popover.d.ts +4 -0
  400. package/dist/types/components/q2-radio/q2-radio.d.ts +3 -2
  401. package/dist/types/components/q2-radio-group/q2-radio-group.d.ts +18 -2
  402. package/dist/types/components/q2-search/q2-search.d.ts +3 -1
  403. package/dist/types/components/q2-select/q2-select.d.ts +12 -4
  404. package/dist/types/components/q2-textarea/q2-textarea.d.ts +4 -2
  405. package/dist/types/components.d.ts +1112 -195
  406. package/dist/types/global.d.ts +1 -0
  407. package/dist/types/index.d.ts +1 -0
  408. package/dist/types/utils/chart-keyboard.d.ts +16 -0
  409. package/dist/types/utils/date-picker/date-picker-helpers.d.ts +47 -0
  410. package/dist/types/utils/date-picker/date-picker-types.d.ts +42 -0
  411. package/dist/types/utils/test/vr-helpers.d.ts +2 -0
  412. package/package.json +3 -3
  413. package/dist/cjs/q2-optgroup.cjs.entry.js +0 -70
  414. package/dist/esm/q2-optgroup.entry.js +0 -68
  415. package/dist/q2-tecton-elements/q2-optgroup.entry.js +0 -88
package/dist/components/q2-btn2.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { proxyCustomElement as o, HTMLElement as t, createEvent as r, h as a, Fragment as c, transformTag as e } from "@stencil/core/internal/client";
2
2
 
3
- import { j as n, h as i, k as b, o as d, i as v, m as s, l } from "./index2.js";
3
+ import { f as n, h as i, k as b, o as d, i as v, m as s, l } from "./index2.js";
4
4
 
5
5
  import { d as p } from "./q2-loading2.js";
6
6
 
@@ -158,7 +158,7 @@ const u = o(class extends t {
158
158
  };
159
159
  }
160
160
  static get style() {
161
- return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]:not([loading=false])) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none;margin-block:-100px}button.icon-only ::slotted(q2-icon){margin-block:0}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff}:host .btn-height-wrapper{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width;outline:0;min-height:var(--tct-btn-min-height, none);letter-spacing:var(--tct-btn-letter-spacing, inherit)}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}button.has-color,button.has-intent{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform)}button.has-color:not(.has-size),button.has-intent:not(.has-size){padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}button:not(.has-size):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}:host([size="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size="2"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size="3"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size="4x"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size="4"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only){padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 6px 13px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, var(--const-px-14, 14px)));line-height:var(--tct-btn-line-height-small, var(--app-line-height, var(--const-px-14, 14px)));min-height:var(--tct-btn-min-height-small, 36px)}:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 14px)}:host(:is(:not([size]),[size=medium])) button.has-intent:not(.intent-coin):not(.icon-only){padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 10px 13px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, var(--const-px-14, 14px)));line-height:var(--tct-btn-line-height-medium, var(--app-line-height, var(--const-px-14, 14px)));min-height:var(--tct-btn-min-height-medium, 44px)}:host(:is(:not([size]),[size=medium])) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, 16px)}:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only){padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 13px 18px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, var(--const-px-14, 14px)));line-height:var(--tct-btn-line-height-large, var(--app-line-height, var(--const-px-14, 14px)));min-height:var(--tct-btn-min-height-large, 50px)}:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, 18px)}:host(:not([intent])) button:focus-visible{--comp-double-focus-ring-fallback:0 0 0 2px #ffffff, 0 0 0 4px #0066cc;box-shadow:var(--tct-btn-default-double-focus-visible-ring, var(--const-double-focus-ring, var(--comp-double-focus-ring-fallback)))}:host([color=primary]) button,:host([intent=workflow-primary]) button{backdrop-filter:var(--tct-btn-primary-backdrop-filter);--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:var( --tct-btn-primary-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-active-box-shadow:var(--comp-box-shadow);--comp-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:var( --tct-btn-primary-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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{backdrop-filter:var(--tct-btn-secondary-backdrop-filter);--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:var( --tct-btn-secondary-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-active-box-shadow:var(--comp-box-shadow);--comp-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:var( --tct-btn-secondary-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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{backdrop-filter:var(--tct-btn-destroy-backdrop-filter);--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:var( --tct-btn-destroy-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-active-box-shadow:var(--comp-box-shadow);--comp-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:var( --tct-btn-destroy-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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{backdrop-filter:var(--tct-btn-escape-backdrop-filter);--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:var( --tct-btn-escape-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-active-box-shadow:var(--comp-box-shadow);--comp-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:var( --tct-btn-escape-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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{backdrop-filter:var(--tct-btn-neutral-backdrop-filter);--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:var( --tct-btn-neutral-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-active-box-shadow:var(--comp-box-shadow);--comp-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:var( --tct-btn-neutral-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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{backdrop-filter:var(--tct-btn-neutral-text-backdrop-filter);--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:var( --tct-btn-neutral-text-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-active-box-shadow:var(--comp-box-shadow);--comp-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:var( --tct-btn-neutral-text-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-style:var(--tct-btn-neutral-text-border-style, var(--comp-border-style));border-width:var(--tct-btn-neutral-text-border-width, var(--comp-border-width));font-weight:var(--tct-btn-neutral-text-font-weight, var(--comp-font-weight));border-color:var(--tct-btn-neutral-text-border-color, var(--comp-border-color));background:var(--tct-btn-neutral-text-background, var(--comp-background));color:var(--tct-btn-neutral-text-font-color, var(--comp-font-color));text-decoration:var(--tct-btn-neutral-text-text-decoration, var(--comp-text-decoration));box-shadow:var(--comp-box-shadow)}:host([intent=neutral-text]) button:enabled:hover{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:enabled:focus{border-color:var(--tct-btn-neutral-text-focus-border-color, var(--comp-focus-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-background, var(--comp-focus-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-font-color, var(--comp-focus-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-text-decoration, var(--comp-focus-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-box-shadow)}:host([intent=neutral-text]) button:enabled:focus-visible{border-color:var(--tct-btn-neutral-text-focus-visible-border-color, var(--comp-focus-visible-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-focus-visible-background, var(--comp-focus-visible-background, var(--comp-background)));color:var(--tct-btn-neutral-text-focus-visible-font-color, var(--comp-focus-visible-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-focus-visible-text-decoration, var(--comp-focus-visible-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-focus-visible-box-shadow)}:host([intent=neutral-text]) button:enabled:active{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:focus-visible,:host([intent=neutral-text]) button:focus-visible:hover:enabled,:host([intent=neutral-text]) button:focus,:host([intent=neutral-text]) button:focus:hover:enabled{border-color:var(--tct-btn-neutral-text-hover-border-color, var(--comp-hover-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-hover-background, var(--comp-hover-background, var(--comp-background)));color:var(--tct-btn-neutral-text-hover-font-color, var(--comp-hover-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-hover-text-decoration, var(--comp-hover-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-hover-box-shadow)}:host([intent=neutral-text]) button:focus-visible:active:enabled,:host([intent=neutral-text]) button:focus:active:enabled{border-color:var(--tct-btn-neutral-text-active-border-color, var(--comp-active-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-active-background, var(--comp-active-background, var(--comp-background)));color:var(--tct-btn-neutral-text-active-font-color, var(--comp-active-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-active-text-decoration, var(--comp-active-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-active-box-shadow)}:host([intent=neutral-text]) button:disabled{border-color:var(--tct-btn-neutral-text-disabled-border-color, var(--comp-disabled-border-color, var(--comp-border-color)));background:var(--tct-btn-neutral-text-disabled-background, var(--comp-disabled-background, var(--comp-background)));color:var(--tct-btn-neutral-text-disabled-font-color, var(--comp-disabled-font-color, var(--comp-font-color)));text-decoration:var(--tct-btn-neutral-text-disabled-text-decoration, var(--comp-disabled-text-decoration, var(--comp-text-decoration)));box-shadow:var(--comp-disabled-box-shadow)}:host([intent=neutral-text]) button ::slotted(q2-icon){--t-text:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)))}button.icon-only{width:var(--tct-btn-icon-width, var(--t-btn-icon-width, 44px));height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));min-height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));padding:var(--tct-btn-icon-padding, 0px)}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}button.icon-only.has-size{padding:var(--tct-btn-icon-padding, 0px)}button.icon-only.has-intent{padding:var(--tct-btn-icon-padding, 10px);border-radius:var(--tct-btn-icon-border-radius, var(--comp-border-radius))}button:not(.has-color):not(.has-intent):hover,button:not(.has-color):not(.has-intent):focus,button.icon-only:hover,button.icon-only:focus{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).is-active.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).icon-only:hover *,button:not(.has-intent).icon-only:focus *,button:not(.has-intent).is-active.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}button:not(.has-intent):not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}button:not(.has-intent):not(.icon-only):hover,button:not(.has-intent):not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-btn-coin-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-primary:var(--tct-btn-coin-avatar-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-secondary:var(--tct-btn-coin-avatar-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-avatar-border:var(--tct-btn-coin-border, 0);--tct-avatar-fallback-border-radius:var(--tct-btn-coin-border-radius, 50%);--tct-btn-border-radius:var(--tct-btn-coin-border-radius, 50%);width:auto;backdrop-filter:var(--tct-btn-coin-backdrop-filter);box-shadow:var(--tct-btn-coin-box-shadow)}button.intent-coin:hover:not([disabled]),button.intent-coin:hover:focus:not(:active):not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff, 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));--tct-avatar-background:var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));--tct-avatar-fallback-background:var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));box-shadow:var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring)))}button.intent-coin:focus:not([disabled]){--const-double-focus-ring:0;box-shadow:var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, 0))}button.intent-coin:focus-visible:not([disabled]){--const-double-focus-ring:0 0 0 2px #ffffff, 0 0 0 4px var(--tct-btn-coin-focus-ring, var(--t-primary, #6a4a9e));box-shadow:var(--tct-btn-coin-focus-visible-box-shadow, var(--tct-btn-coin-focus-box-shadow, var(--tct-btn-coin-box-shadow, var(--const-double-focus-ring))))}button.intent-coin:focus:active:not([disabled]){--tct-avatar-background:var(--tct-btn-coin-active-background);--tct-avatar-fallback-background:var(--tct-btn-coin-active-background);box-shadow:none}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}';
161
+ return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}q2-loading{--tct-loading-primary-color:currentcolor;--tct-loading-secondary-color:currentcolor;--tct-loading-spinner-size:24px}.slot-container{display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);pointer-events:none}:host([loading]) .icon-right .slot-container{flex-direction:row-reverse}:host([loading]) ::slotted(q2-icon){display:none}:host([loading]:not([loading=false])) button{pointer-events:none}:host([block]) button,:host([block]) button.icon-only{display:block;width:100%}:host{display:inline-block}:host([hidden]){display:none}:host([block]){display:block;width:100%}::slotted(q2-icon){pointer-events:none;margin-block:-100px}button.icon-only ::slotted(q2-icon){margin-block:0}:host{--comp-font-weight:600;--comp-border-radius:var(--tct-btn-border-radius, var(--app-border-radius-1, 4px));--comp-btn-tween:var(--tct-btn-tween, var(--t-btn-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));--comp-btn-fallback-box-shadow:0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);--comp-background-alternative:#ebf8ff;--comp-focus-ring-color:var(--t-focus-color, var(--const-focus-color))}:host .btn-height-wrapper{cursor:pointer;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px)}:host .btn-height-wrapper:active{box-shadow:none}button{margin:var(--tct-scale-0, var(--app-scale-0x, 0));padding:var(--tct-scale-0, var(--app-scale-0x, 0));display:inline-block;width:100%;hyphens:auto;border:var(--tct-btn-border);background:transparent;box-shadow:none;border-radius:0;font-weight:400;color:inherit;cursor:pointer;transition:var(--comp-btn-tween);transition-property:background, color, box-shadow, fill, border-color, border-width, transform;outline:0;min-height:var(--tct-btn-min-height, none);letter-spacing:var(--tct-btn-letter-spacing, inherit)}button:disabled{opacity:var(--tct-btn-disabled-opacity, var(--t-btn-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))));cursor:not-allowed}button.has-color,button.has-intent{font-size:var(--tct-btn-font-size, var(--t-btn-font-size, inherit));border-radius:var(--tct-btn-border-radius, var(--comp-border-radius));text-transform:var(--tct-btn-text-transform)}button.has-intent:enabled:active{transform-origin:center;transform:scale(0.97) translateZ(0)}button.has-color:not(.has-size),button.has-intent:not(.has-size){padding:var(--tct-btn-padding, var(--t-btn-padding, var(--tct-scale-2, var(--app-scale-2x, 10px))))}button:not(.has-size):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size, 18px)}:host([size="1"]) button{padding:var(--tct-scale-1, var(--app-scale-1x, 5px))}:host([size="2"]) button{padding:var(--tct-scale-2, var(--app-scale-2x, 10px))}:host([size="3"]) button{padding:var(--tct-scale-3, var(--app-scale-3x, 15px))}:host([size="4x"]) button{padding:var(--tct-scale-4x, var(--app-scale-4x, 20px))}:host([size="4"]) button{padding:var(--tct-scale-6x, var(--app-scale-6x, 30px))}:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only){padding:var(--tct-btn-padding-size-small, var(--t-btn-padding-size-small, 6px 13px));font-size:var(--tct-btn-font-size-small, var(--t-btn-font-size-small, var(--const-px-14, 14px)));line-height:var(--tct-btn-line-height-small, var(--app-line-height, var(--const-px-14, 14px)));min-height:var(--tct-btn-min-height-small, 36px)}:host([size=small]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-small, 14px)}:host(:is(:not([size]),[size=medium])) button.has-intent:not(.intent-coin):not(.icon-only){padding:var(--tct-btn-padding-size-medium, var(--t-btn-padding-size-medium, 10px 13px));font-size:var(--tct-btn-font-size-medium, var(--t-btn-font-size-medium, var(--const-px-14, 14px)));line-height:var(--tct-btn-line-height-medium, var(--app-line-height, var(--const-px-14, 14px)));min-height:var(--tct-btn-min-height-medium, 44px)}:host(:is(:not([size]),[size=medium])) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-medium, 16px)}:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only){padding:var(--tct-btn-padding-size-large, var(--t-btn-padding-size-large, 13px 18px));font-size:var(--tct-btn-font-size-large, var(--t-btn-font-size-large, var(--const-px-14, 14px)));line-height:var(--tct-btn-line-height-large, var(--app-line-height, var(--const-px-14, 14px)));min-height:var(--tct-btn-min-height-large, 50px)}:host([size=large]) button.has-intent:not(.intent-coin):not(.icon-only) ::slotted(q2-icon){--tct-icon-size:var(--tct-btn-icon-size-large, 18px)}:host(:not([intent])) button:focus-visible{--comp-default-focus-visible-box-shadow:0 0 0 2px #ffffff, 0 0 0 4px var(--comp-focus-ring-color);box-shadow:var(--tct-btn-default-double-focus-visible-ring, var(--comp-default-focus-visible-box-shadow))}:host([color=primary]) button,:host([intent=primary]) button,:host([intent=workflow-primary]) button{--comp-btn-tween:var(--tct-btn-primary-tween, 100ms ease-out);backdrop-filter:var(--tct-btn-primary-backdrop-filter);--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, #5e408b));--comp-hover-border-color:#5e408b;--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-active-background:var(--tct-btn-primary-active-background, #523578);--comp-active-border-color:#523578;--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:var( --tct-btn-primary-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-active-box-shadow:var(--comp-box-shadow);--comp-disabled-box-shadow:var(--comp-box-shadow);--comp-focus-visible-outer-ring-color:var(--tct-btn-primary-focus-visible-outer-ring-color, var(--comp-focus-ring-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-primary-focus-visible-inner-ring-color, #ffffff);--comp-focus-visible-box-shadow:var( --tct-btn-primary-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );--comp-hover-box-shadow:var( --tct-btn-primary-hover-box-shadow, var(--comp-btn-fallback-box-shadow) );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=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-visible,:host([intent=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=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([intent=primary]) button:focus-visible,:host([intent=primary]) button:focus-visible:hover:enabled,:host([intent=workflow-primary]) button:focus-visible,:host([intent=workflow-primary]) button:focus-visible: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([intent=primary]) button:focus-visible:active:enabled,:host([intent=workflow-primary]) button:focus-visible: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=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=primary]) button ::slotted(q2-icon),:host([intent=workflow-primary]) button ::slotted(q2-icon){--comp-btn-icon-color:var(--tct-btn-primary-icon-color, var(--t-btn-primary-icon-color, var(--comp-font-color, currentcolor)));--t-text:var(--comp-btn-icon-color);--tct-icon-stroke-primary:var(--comp-btn-icon-color);--tct-icon-stroke-secondary:var(--comp-btn-icon-color)}:host([color=primary]) button:enabled:focus-visible,:host([intent=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=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);transform:scale(var(--tct-btn-primary-active-scale, 0.97)) var(--tct-btn-primary-compositor-transform, translateZ(0))}:host([color=secondary]) button,:host([intent=secondary]) button,:host([intent=workflow-secondary]) button{backdrop-filter:var(--tct-btn-secondary-backdrop-filter);--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-active-background:var(--tct-btn-secondary-active-background, var(--comp-hover-background));--comp-hover-font-color:var(--app-white, #ffffff);--comp-box-shadow:var(--tct-btn-secondary-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:var( --tct-btn-secondary-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-hover-box-shadow:var( --tct-btn-secondary-hover-box-shadow, var(--tct-btn-secondary-box-shadow, none) );--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(--comp-focus-ring-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-secondary-focus-visible-inner-ring-color, var(--app-white));--comp-focus-visible-box-shadow:var( --tct-btn-secondary-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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=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-visible,:host([intent=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=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([intent=secondary]) button:focus-visible,:host([intent=secondary]) button:focus-visible:hover:enabled,:host([intent=workflow-secondary]) button:focus-visible,:host([intent=workflow-secondary]) button:focus-visible: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([intent=secondary]) button:focus-visible:active:enabled,:host([intent=workflow-secondary]) button:focus-visible: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=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=secondary]) button ::slotted(q2-icon),:host([intent=workflow-secondary]) button ::slotted(q2-icon){--comp-btn-icon-color:var(--tct-btn-secondary-icon-color, var(--t-btn-secondary-icon-color, var(--comp-font-color, currentcolor)));--t-text:var(--comp-btn-icon-color);--tct-icon-stroke-primary:var(--comp-btn-icon-color);--tct-icon-stroke-secondary:var(--comp-btn-icon-color)}:host([intent=destroy]) button,:host([intent=workflow-destroy]) button{backdrop-filter:var(--tct-btn-destroy-backdrop-filter);--comp-background:var(--tct-btn-destroy-background, var(--const-stoplight-alert, #d20a0a));--comp-active-background:var( --tct-btn-destroy-active-background, color-mix(in srgb, var(--comp-background) 85%, #000000) );--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-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:var( --tct-btn-destroy-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-hover-box-shadow:var( --tct-btn-destroy-hover-box-shadow, var(--tct-btn-destroy-box-shadow, none) );--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(--comp-focus-ring-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:var( --tct-btn-destroy-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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=destroy]) button:enabled:hover,: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=destroy]) button:enabled:focus-visible,: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=destroy]) button:enabled:active,: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=destroy]) button:focus-visible,:host([intent=destroy]) button:focus-visible:hover:enabled,:host([intent=workflow-destroy]) button:focus-visible,:host([intent=workflow-destroy]) button:focus-visible: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=destroy]) button:focus-visible:active:enabled,:host([intent=workflow-destroy]) button:focus-visible: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=destroy]) button:disabled,: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=destroy]) button ::slotted(q2-icon),:host([intent=workflow-destroy]) button ::slotted(q2-icon){--comp-btn-icon-color:var(--tct-btn-destroy-icon-color, var(--t-btn-destroy-icon-color, var(--comp-font-color, currentcolor)));--t-text:var(--comp-btn-icon-color);--tct-icon-stroke-primary:var(--comp-btn-icon-color);--tct-icon-stroke-secondary:var(--comp-btn-icon-color)}:host([intent=escape]) button,:host([intent=workflow-escape]) button{backdrop-filter:var(--tct-btn-escape-backdrop-filter);--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-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-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:var( --tct-btn-escape-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-hover-box-shadow:var( --tct-btn-escape-hover-box-shadow, var(--tct-btn-escape-box-shadow, none) );--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(--comp-focus-ring-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-escape-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:var( --tct-btn-escape-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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=escape]) button:enabled:hover,: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=escape]) button:enabled:focus-visible,: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=escape]) button:enabled:active,: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=escape]) button:focus-visible,:host([intent=escape]) button:focus-visible:hover:enabled,:host([intent=workflow-escape]) button:focus-visible,:host([intent=workflow-escape]) button:focus-visible: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=escape]) button:focus-visible:active:enabled,:host([intent=workflow-escape]) button:focus-visible: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=escape]) button:disabled,: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=escape]) button ::slotted(q2-icon),:host([intent=workflow-escape]) button ::slotted(q2-icon){--comp-btn-icon-color:var(--tct-btn-escape-icon-color, var(--t-btn-escape-icon-color, var(--comp-font-color, currentcolor)));--t-text:var(--comp-btn-icon-color);--tct-icon-stroke-primary:var(--comp-btn-icon-color);--tct-icon-stroke-secondary:var(--comp-btn-icon-color)}:host([intent=neutral]) button{backdrop-filter:var(--tct-btn-neutral-backdrop-filter);--comp-background:var(--tct-btn-neutral-background, var(--app-white, #ffffff));--comp-active-background:var(--tct-btn-neutral-active-background, var(--comp-background-alternative));--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-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:var( --tct-btn-neutral-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-hover-box-shadow:var( --tct-btn-neutral-hover-box-shadow, var(--tct-btn-neutral-box-shadow, none) );--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(--comp-focus-ring-color));--comp-focus-visible-inner-ring-color:var(--tct-btn-neutral-focus-visible-inner-ring-color, var(--comp-background));--comp-focus-visible-box-shadow:var( --tct-btn-neutral-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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-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{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{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){--comp-btn-icon-color:var(--tct-btn-neutral-icon-color, var(--t-btn-neutral-icon-color, var(--comp-font-color, currentcolor)));--t-text:var(--comp-btn-icon-color);--tct-icon-stroke-primary:var(--comp-btn-icon-color);--tct-icon-stroke-secondary:var(--comp-btn-icon-color)}:host([intent=neutral-text]) button{backdrop-filter:var(--tct-btn-neutral-text-backdrop-filter);--comp-background:var(--tct-btn-neutral-text-background, var(--tct-btn-neutral-text-bg, var(--app-white, #ffffff)));--comp-active-background:var(--tct-btn-neutral-text-active-background, var(--comp-background-alternative));--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-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:var( --tct-btn-neutral-text-hover-box-shadow, 0 0 0 2px var(--comp-hover-inner-ring-color), 0 0 0 4px var(--comp-hover-outer-ring-color) );--comp-hover-box-shadow:var( --tct-btn-neutral-text-hover-box-shadow, var(--tct-btn-neutral-text-box-shadow, none) );--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(--comp-focus-ring-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:var( --tct-btn-neutral-text-focus-visible-box-shadow, 0 0 0 2px var(--comp-focus-visible-inner-ring-color), 0 0 0 4px var(--comp-focus-visible-outer-ring-color) );border-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-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{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{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){--comp-btn-icon-color:var(--tct-btn-neutral-text-icon-color, var(--t-btn-neutral-text-icon-color, var(--comp-font-color, currentcolor)));--t-text:var(--comp-btn-icon-color);--tct-icon-stroke-primary:var(--comp-btn-icon-color);--tct-icon-stroke-secondary:var(--comp-btn-icon-color)}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));min-height:var(--tct-btn-icon-height, var(--t-btn-icon-height, 44px));border-radius:var(--tct-btn-icon-border-radius, var(--t-btn-icon-border-radius, var(--tct-btn-border-radius, 0)));padding:var(--tct-btn-icon-padding, 0px)}button.icon-only ::slotted(q2-icon){--tct-icon-size:unset}button.icon-only.has-size{padding:var(--tct-btn-icon-padding, 0px)}button.icon-only.has-intent{padding:var(--tct-btn-icon-padding, 10px);border-radius:var(--tct-btn-icon-border-radius, var(--comp-border-radius))}button:not(.has-color):not(.has-intent):hover,button.icon-only:hover{background:var(--tct-btn-icon-hover-background, var(--tct-btn-icon-hover-bg, var(--t-btn-icon-hover-bg, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).is-active.icon-only{background-color:var(--tct-btn-icon-active-background, var(--tct-btn-icon-active-bg, var(--t-btn-icon-active-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))))}button:not(.has-intent).icon-only:hover *,button:not(.has-intent).is-active.icon-only *{color:var(--tct-btn-icon-hover-color, var(--t-btn-icon-hover-color, var(--tct-link-hover-color, var(--t-link-hover-color, #080808))))}button:not(.has-intent):not(.icon-only){height:var(--tct-btn-height, auto);padding-inline:var(--tct-btn-padding-inline, 0);font-weight:var(--tct-btn-font-weight);border-radius:var(--tct-btn-border-radius, 0)}button:not(.has-intent):not(.icon-only):hover,button:not(.has-intent):not(.icon-only):focus{background:var(--tct-btn-hover-background)}:host([badge]) button{padding:var(--tct-btn-badge-padding, var(--t-btn-badge-padding, 2px 5px));font-size:var(--tct-btn-badge-font-size, var(--t-btn-badge-font-size, var(--tct-btn-font-size, var(--t-btn-font-size, inherit))));border-radius:var(--tct-btn-badge-border-radius, var(--t-btn-badge-border-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));background-color:var(--tct-btn-badge-background, var(--tct-btn-badge-bg, var(--t-btn-badge-bg, transparent)));color:var(--tct-btn-badge-font-color, var(--t-btn-badge-font-color, inherit))}:host([badge]) button ::slotted(q2-icon){--tct-icon-size:1em}:host([badge]:hover) button:enabled{background-color:var(--tct-btn-badge-hover-background, var(--tct-btn-badge-hover-bg, var(--t-btn-badge-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));color:var(--tct-btn-badge-hover-font-color, var(--t-btn-badge-hover-font-color, var(--tct-gray-5, var(--t-gray-5, var(--tct-gray-d2, var(--app-gray-d2, #404040))))))}:host(.selected[badge]) button,:host([active][badge]) button{background-color:var(--tct-btn-badge-active-background, var(--tct-btn-badge-active-bg, var(--t-btn-badge-active-bg, var(--comp-btn-primary-background))));color:var(--tct-btn-badge-active-font-color, var(--t-btn-badge-active-font-color, var(--comp-btn-primary-font-color)))}button.intent-coin{--tct-avatar-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-avatar-height:var(--tct-btn-coin-height, 44px);--tct-avatar-width:var(--tct-btn-coin-width, 44px);--tct-avatar-fallback-background:var(--tct-btn-coin-background, var(--t-primary-l5, #b4a0d3));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-icon-stroke-secondary:var(--tct-btn-coin-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-primary:var(--tct-btn-coin-avatar-icon-stroke-primary, var(--t-text, #4d4d4d));--tct-avatar-icon-stroke-secondary:var(--tct-btn-coin-avatar-icon-stroke-secondary, var(--t-text, #4d4d4d));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-text, #4d4d4d));--tct-icon-stroke-width:var(--tct-btn-coin-icon-stroke-width, 1px);--tct-btn-padding:0;--tct-avatar-border:var(--tct-btn-coin-border, 0);--tct-avatar-fallback-border-radius:var(--tct-btn-coin-border-radius, 50%);--tct-btn-border-radius:var(--tct-btn-coin-border-radius, 50%);width:auto;backdrop-filter:var(--tct-btn-coin-backdrop-filter);box-shadow:var(--tct-btn-coin-box-shadow)}button.intent-coin:hover:not([disabled]),button.intent-coin:hover:focus:not(:active):not([disabled]){--tct-avatar-background:var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));--tct-avatar-fallback-background:var(--tct-btn-coin-hover-background, var(--tct-btn-coin-background, var(--t-primary-l3, #957ac1)));--tct-icon-stroke-primary:var(--tct-btn-coin-icon-stroke-primary, var(--t-base, #ffffff));--tct-avatar-text-color:var(--tct-btn-coin-avatar-text-color, var(--t-base, #ffffff));box-shadow:var(--tct-btn-coin-hover-box-shadow, var(--tct-btn-coin-box-shadow, none))}button.intent-coin:focus-visible:not([disabled]){--comp-coin-focus-visible-outer-ring-color:var(--tct-btn-coin-focus-visible-outer-ring-color, var(--comp-focus-ring-color));--comp-coin-focus-visible-box-shadow:0 0 0 2px #ffffff, 0 0 0 4px var(--comp-coin-focus-visible-outer-ring-color);box-shadow:var(--tct-btn-coin-focus-visible-box-shadow, var(--comp-coin-focus-visible-box-shadow))}button.intent-coin:focus:active:not([disabled]){--tct-avatar-background:var(--tct-btn-coin-active-background);--tct-avatar-fallback-background:var(--tct-btn-coin-active-background);box-shadow:none}@container style(--t-prefers-motion: "reduced"){:host([intent]) button.has-intent:enabled:active,:host([color=primary]) button:enabled:active{transform:none}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){:host([intent]) button.has-intent:enabled:active,:host([color=primary]) button:enabled:active{transform:none}}}.coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));max-width:100px;text-align:center;text-overflow:ellipsis;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}.coin-wrapper{--tct-avatar-display:block;display:flex;align-items:center;justify-content:center;gap:var(--app-scale-1x, 5px);flex-direction:column;width:var(--tct-btn-coin-container-width, 95px)}.coin-wrapper ::slotted(:not(q2-avatar,[slot=coin-label])){display:none}.coin-wrapper .coin-label{color:var(--tct-btn-coin-label-color, var(--t-text, #4d4d4d));font-size:var(--tct-btn-coin-label-font-size, var(--app-font-size, var(--const-px-14, 14px)));margin-top:var(--tct-btn-coin-gap, var(--app-scale-2x, 10px));max-width:100px;text-align:center;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}.coin-wrapper .coin-label.disabled{color:var(--tct-btn-coin-label-disabled-color, var(--t-textA, #767676));max-width:100px}';
162
162
  }
163
163
  }, [ 257, "q2-btn", {
164
164
  _role: [ 513 ],
package/dist/components/q2-calendar.js CHANGED
@@ -454,7 +454,7 @@ const O = t(class extends e {
454
454
  handleClear() {
455
455
  p(this, [ "change", "tctChange" ], {
456
456
  value: null
457
- }), this.value = null, this.typedValue = "";
457
+ }), this.internalError = "", this.value = null, this.typedValue = "";
458
458
  }
459
459
  defaultErrorHandler(t) {
460
460
  t.target !== this.hostElement || this.hostElement.onerror || ("error" === this.hintMessageType && this.hintMessage ? this.internalError = this.hintMessage : this.internalError = s("tecton.element.calendar.hint.invalidDate"));
@@ -463,7 +463,10 @@ const O = t(class extends e {
463
463
  c(t, this.hostElement) && this.controlElement.shadowRoot.querySelector(".input-field").focus();
464
464
  }
465
465
  popoverStateHandler({detail: {open: t}}) {
466
- this.open !== t && (this.open = t);
466
+ if (this.open === t) return;
467
+ if (this.open = t, t) return;
468
+ const e = this.typeable ? this.btnCalendarToggle : this.innerInputField;
469
+ null == e || e.focus();
467
470
  }
468
471
  defaultSuccessHandler(t) {
469
472
  t.target === this.hostElement && ("function" == typeof this.onsuccess ? this.onsuccess(t) : (this.internalError = "",
@@ -553,7 +556,7 @@ const O = t(class extends e {
553
556
  }
554
557
  valueObserver(t) {
555
558
  // resetting by empty string
556
- if ("" === t) return this.value = void 0, void this.setHints({
559
+ if ("" === t) return this.value = void 0, this.internalError = "", void this.setHints({
557
560
  isValid: !0,
558
561
  message: this.defaultHintMessage,
559
562
  messageType: "info"
@@ -864,9 +867,9 @@ const O = t(class extends e {
864
867
  placeholder: this.computedPlaceholder,
865
868
  optional: !!this.optional,
866
869
  valid: this.valid,
867
- ariaExpanded: "" + !!this.open,
868
- ariaControls: "calendar-popover",
869
- ariaHaspopup: "dialog",
870
+ ariaExpanded: t ? void 0 : "" + !!this.open,
871
+ ariaControls: t ? void 0 : "calendar-popover",
872
+ ariaHaspopup: t ? void 0 : "dialog",
870
873
  hints: this.hintList,
871
874
  errors: this.errorList,
872
875
  onClick: t ? void 0 : this.onInputClick,
@@ -883,7 +886,8 @@ const O = t(class extends e {
883
886
  type: "date",
884
887
  "hide-messages": !t,
885
888
  "test-id": "inputAndCalendarToggle",
886
- _role: "combobox",
889
+ pseudo: !t,
890
+ _role: t ? void 0 : "combobox",
887
891
  _preventEntry: !t
888
892
  }, t && i("q2-btn", {
889
893
  ref: t => this.btnCalendarToggle = t,
@@ -892,6 +896,7 @@ const O = t(class extends e {
892
896
  "test-id": "calendarToggle",
893
897
  label: s("tecton.element.calendar.toggleAriaLabel", [ s(e || "tecton.element.calendar.defaultLabel") ]),
894
898
  ariaExpanded: "" + !!this.open,
899
+ ariaHasPopup: "dialog",
895
900
  "hide-label": !0,
896
901
  disabled: !!this.disabled || !!this.readonly
897
902
  }, i("q2-icon", {
@@ -900,11 +905,11 @@ const O = t(class extends e {
900
905
  }
901
906
  render() {
902
907
  return i("click-elsewhere", {
903
- key: "e7bcb2f1aec6ca1149742b0b3edc0a7bbf9ce925",
908
+ key: "11162237137dc92ffc61d85ab9facb1e8844ac9f",
904
909
  class: this.open ? "dropdown-open" : void 0,
905
910
  onChange: this.onClickElsewhere
906
911
  }, this.renderInputField(), i("q2-popover", {
907
- key: "c80c5d1ecfb42a319bba294b20f519a2be6808e1",
912
+ key: "00f6dbdec8323951b6e997b544d7581a3d70719c",
908
913
  ref: t => this.popoverElement = t,
909
914
  id: "calendar-popover",
910
915
  controlElement: this.innerInputContainer,
@@ -954,7 +959,7 @@ const O = t(class extends e {
954
959
  };
955
960
  }
956
961
  static get style() {
957
- return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-calendar-margin:var(--tct-calendar-margin-top, var(--t-calendar-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-calendar-margin-bottom, var(--t-calendar-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-calendar-margin, var(--comp-default-calendar-margin))}:host[hidden]{display:none}click-elsewhere{position:relative;display:block}q2-input{margin:0;cursor:pointer;--tct-input-btn-hover-background:var(--tct-calendar-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-input-btn-icon-stroke-primary:var(--tct-calendar-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-input-btn-icon-stroke-secondary:var(--tct-calendar-btn-icon-stroke-secondary, var(--app-gray, #747474))}q2-popover{--comp-min-tappable-size:44px;--comp-table-border-spacing:2px;--comp-min-tappable-size-and-spacing:calc(var(--comp-min-tappable-size) + var(--comp-table-border-spacing));--comp-popover-padding:var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));--comp-min-table-width:calc(var(--comp-min-tappable-size-and-spacing) * 7);--comp-table-container-border-spacing:calc(var(--comp-table-border-spacing) * 2);--comp-popover-total-padding:calc(var(--comp-popover-padding) * 2);--tct-popover-min-width:calc( var(--comp-min-table-width) + var(--comp-table-container-border-spacing) + var(--comp-popover-total-padding) )}.calendar-field-popup{padding:var(--comp-popover-padding)}.calendar-label{--comp-label-padding:var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, var(--const-px-16, 16px)));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--comp-label-padding)}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;align-items:center;font-size:var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, var(--const-px-16, 16px)));font-weight:var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));text-align:center}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px;text-align:center;border-spacing:var(--comp-table-border-spacing)}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:var(--comp-min-tappable-size);cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected=true]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-selected-background, var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}td[aria-selected=true]:focus{box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), 0 0 0 4px var(--tct-calendar-day-focused-outer-ring-color, var(--const-focus-color, #0066cc))}td:focus-visible{box-shadow:0 0 0 2px var(--tct-calendar-day-focus-visible-inner-ring-color, #ffffff), 0 0 0 4px var(--tct-calendar-day-focus-visible-outer-ring-color, var(--const-focus-color, #0066cc))}.today-decorator{text-transform:uppercase;font-weight:700;font-size:var(--tct-calendar-today-decorator-font-size, var(--const-px-10, 10px));height:12px}.day-integer{font-size:var(--tct-calendar-day-integer-font-size, inherit)}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, var(--const-px-12, 12px)))));border-style:solid;border-width:var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));border-color:var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}';
962
+ return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--comp-default-calendar-margin:var(--tct-calendar-margin-top, var(--t-calendar-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-calendar-margin-bottom, var(--t-calendar-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-calendar-margin, var(--comp-default-calendar-margin))}:host[hidden]{display:none}click-elsewhere{position:relative;display:block}q2-input{margin:0;cursor:pointer;letter-spacing:inherit;--tct-input-icon-size:var(--tct-calendar-icon-size, var(--const-px-18, 18px));--tct-input-btn-hover-background:var(--tct-calendar-btn-hover-background, var(--app-gray-l3, #f2f2f2));--tct-input-btn-icon-stroke-primary:var(--tct-calendar-btn-icon-stroke-primary, var(--app-gray, #747474));--tct-input-btn-icon-stroke-secondary:var(--tct-calendar-btn-icon-stroke-secondary, var(--app-gray, #747474))}q2-popover{--comp-min-tappable-size:44px;--comp-table-border-spacing:2px;--comp-min-tappable-size-and-spacing:calc(var(--comp-min-tappable-size) + var(--comp-table-border-spacing));--comp-popover-padding:var(--tct-calendar-popover-padding, var(--t-calendar-popover-padding, var(--app-scale-1x, 5px)));--comp-min-table-width:calc(var(--comp-min-tappable-size-and-spacing) * 7);--comp-table-container-border-spacing:calc(var(--comp-table-border-spacing) * 2);--comp-popover-total-padding:calc(var(--comp-popover-padding) * 2);--tct-popover-min-width:calc( var(--comp-min-table-width) + var(--comp-table-container-border-spacing) + var(--comp-popover-total-padding) )}.calendar-field-popup{padding:var(--comp-popover-padding)}.calendar-label{--comp-label-padding:var(--tct-calendar-label-padding, var(--tct-calendar-label-vertical-padding, var(--t-calendar-label-vertical-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)))) 0);font-size:var(--tct-calendar-label-font-size, var(--t-calendar-label-font-size, var(--const-px-16, 16px)));flex:1 1;flex-basis:calc(100% - var(--tct-btn-icon-width, 44px));margin:0;padding:var(--comp-label-padding)}.cal-month-heading{padding:0 0 0.75rem;display:flex;justify-content:center;align-items:center;font-size:var(--tct-calendar-month-font-size, var(--t-calendar-month-font-size, var(--const-px-16, 16px)));font-weight:var(--tct-calendar-month-font-weight, var(--t-calendar-month-font-weight, 600));text-align:center}.cal-month-text{min-width:82px;display:inline-block}.cal-year-text{min-width:50px;display:inline-block}table{width:100%;margin-bottom:2px;text-align:center;border-spacing:var(--comp-table-border-spacing)}th{font-size:var(--tct-calendar-day-heading-font-size, var(--t-calendar-day-heading-font-size, inherit));font-weight:var(--tct-calendar-day-heading-font-weight, var(--t-calendar-day-heading-font-weight, 600));width:14.285714%}td{height:var(--comp-min-tappable-size);cursor:pointer;border:var(--tct-calendar-day-border, var(--t-calendar-day-border, 0));border-radius:var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))}td.is-unavailable{border:1px solid var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a))}td.is-valid:hover{border:var(--tct-calendar-day-hover-border, var(--t-calendar-day-hover-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-hover-border-radius, var(--t-calendar-day-hover-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--app-gray14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2)))))));color:var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))}td[aria-hidden],td[aria-disabled]{pointer-events:none;cursor:not-allowed}td[aria-disabled]{opacity:var(--tct-calendar-day-disabled-opacity, var(--t-calendar-day-disabled-opacity, var(--app-disabled-opacity, 0.4)))}td[aria-selected=true]{border:var(--tct-calendar-day-selected-border, var(--t-calendar-day-selected-border, var(--tct-calendar-day-border, var(--t-calendar-day-border, 0))));border-radius:var(--tct-calendar-day-selected-border-radius, var(--t-calendar-day-selected-border-radius, var(--tct-calendar-day-border-radius, var(--t-calendar-day-border-radius))));background:var(--tct-calendar-day-selected-background, var(--tct-calendar-day-selected-bg, var(--t-calendar-day-selected-bg, var(--tct-calendar-day-hover-background, var(--tct-calendar-day-hover-bg, var(--t-calendar-day-hover-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l4, var(--app-gray-l4, #f2f2f2))))))))));color:var(--tct-calendar-day-selected-font-color, var(--t-calendar-day-selected-font-color, var(--tct-calendar-day-hover-font-color, var(--t-calendar-day-hover-font-color, inherit))));box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1))))}td[aria-selected=true]:focus{box-shadow:0 0 0 2px var(--tct-calendar-day-selected-outline-color, var(--t-calendar-day-selected-outline-color, var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1)))), 0 0 0 4px var(--tct-calendar-day-focused-outer-ring-color, var(--const-focus-color, #0066cc))}td:focus-visible{box-shadow:0 0 0 2px var(--tct-calendar-day-focus-visible-inner-ring-color, #ffffff), 0 0 0 4px var(--tct-calendar-day-focus-visible-outer-ring-color, var(--const-focus-color, #0066cc))}.today-decorator{text-transform:uppercase;font-weight:700;font-size:var(--tct-calendar-today-decorator-font-size, var(--const-px-10, 10px));height:12px}.day-integer{font-size:var(--tct-calendar-day-integer-font-size, inherit)}.calendar-disclaimer{font-size:var(--tct-calendar-disclaimer-font-size, var(--t-calendar-disclaimer-font-size, var(--tct-font-size-small, var(--app-font-size-small, var(--const-px-12, 12px)))));border-style:solid;border-width:var(--tct-calendar-disclaimer-border-width, var(--t-calendar-disclaimer-border-width, 1px 0 0 0));border-color:var(--tct-calendar-disclaimer-border-color, var(--t-calendar-disclaimer-border-color, var(--tct-gray-13, var(--t-gray-13, var(--tct-gray-l3, var(--app-gray-l3, #e6e6e6))))));padding:var(--tct-calendar-disclaimer-padding, var(--tct-scale-2, var(--app-scale-2x, 10px)));text-align:left}';
958
963
  }
959
964
  }, [ 1, "q2-calendar", {
960
965
  ariaLabel: [ 1537, "aria-label" ],
package/dist/components/q2-card-image.js CHANGED
@@ -1,14 +1,14 @@
1
- import { proxyCustomElement as t, HTMLElement as a, createEvent as r, getAssetPath as i, h as e, Host as o, transformTag as c } from "@stencil/core/internal/client";
1
+ import { proxyCustomElement as t, HTMLElement as a, createEvent as i, getAssetPath as r, h as e, Host as o, transformTag as c } from "@stencil/core/internal/client";
2
2
 
3
- import { b as s, l as d } from "./index2.js";
3
+ import { b as s, l as n } from "./index2.js";
4
4
 
5
- import { d as n } from "./q2-btn2.js";
5
+ import { d } from "./q2-btn2.js";
6
6
 
7
7
  import { d as l } from "./q2-loading2.js";
8
8
 
9
9
  const h = t(class extends a {
10
10
  constructor(t) {
11
- super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctClick = r(this, "tctClick", 7),
11
+ super(), !1 !== t && this.__registerHost(), this.__attachShadow(), this.tctClick = i(this, "tctClick", 7),
12
12
  // #region Own Properties
13
13
  this.predefinedBackgrounds = [ "primary", "secondary", "tertiary", "gradient" ],
14
14
  this.sizeBreakpoints = {
@@ -151,8 +151,8 @@ const h = t(class extends a {
151
151
  * Returns the resolved file path for the chip SVG, or null if no chip is set.
152
152
  */ getChipPath(t) {
153
153
  if (!this.chip || "tiny" === this.size) return null;
154
- const a = "vertical" === t ? "-vertical" : "", r = "gold" === this.chip ? `chip-gold${a}.svg` : `chip-silver${a}.svg`;
155
- return i("assets/card-chip/" + r);
154
+ const a = "vertical" === t ? "-vertical" : "", i = "gold" === this.chip ? `chip-gold${a}.svg` : `chip-silver${a}.svg`;
155
+ return r("assets/card-chip/" + i);
156
156
  }
157
157
  /**
158
158
  * Returns the formatted card number for display, or an empty string if invalid.
@@ -201,8 +201,8 @@ const h = t(class extends a {
201
201
  // Custom vendor logo takes precedence
202
202
  if (this.vendorLogo) return this.vendorLogo;
203
203
  if (!this.vendor) return null;
204
- const a = null !== (t = this.vendorColor) && void 0 !== t ? t : "visa" === this.vendor ? "white" : "brand", r = "mastercard" === this.vendor ? "mc" : "visa";
205
- return i(`assets/card-vendor/${r}-${a}.svg`);
204
+ const a = null !== (t = this.vendorColor) && void 0 !== t ? t : "visa" === this.vendor ? "white" : "brand", i = "mastercard" === this.vendor ? "mc" : "visa";
205
+ return r(`assets/card-vendor/${i}-${a}.svg`);
206
206
  }
207
207
  /**
208
208
  * Validates and normalizes the action slot content.
@@ -285,7 +285,7 @@ const h = t(class extends a {
285
285
  renderHorizontalCardDetails() {
286
286
  const t = this.fiLogo ? {
287
287
  "--tct-card-image-fi-logo": `url(${this.fiLogo})`
288
- } : {}, a = this.getChipPath("horizontal"), r = this.getVendorPath(), i = this.getCardTypeColorStyle();
288
+ } : {}, a = this.getChipPath("horizontal"), i = this.getVendorPath(), r = this.getCardTypeColorStyle();
289
289
  return e("div", {
290
290
  class: "card-details-horizontal"
291
291
  }, e("div", {
@@ -307,7 +307,7 @@ const h = t(class extends a {
307
307
  class: "horizontal-exp-date-wrapper"
308
308
  }, this.showExpirationDateLabel() && e("div", {
309
309
  class: "horizontal-exp-date-label card-text"
310
- }, d("tecton.element.cardImage.expires")), this.getFormattedExpirationDate() && e("div", {
310
+ }, n("tecton.element.cardImage.expires")), this.getFormattedExpirationDate() && e("div", {
311
311
  class: "horizontal-exp-date-value card-text"
312
312
  }, this.getFormattedExpirationDate())), e("div", {
313
313
  class: {
@@ -316,19 +316,19 @@ const h = t(class extends a {
316
316
  "vendor-mastercard": "mastercard" === this.vendor,
317
317
  "vendor-visa": "visa" === this.vendor
318
318
  },
319
- style: i
319
+ style: r
320
320
  }, this.getCardTypeText())), e("div", {
321
321
  class: "horizontal-card-holder-vendor-row"
322
322
  }, e("div", {
323
323
  class: "horizontal-card-holder-wrapper"
324
324
  }, this.showCardHolderLabel() && e("div", {
325
325
  class: "horizontal-card-holder-label card-text"
326
- }, d("tecton.element.cardImage.cardHolder")), this.getCardHolderName() && e("div", {
326
+ }, n("tecton.element.cardImage.cardHolder")), this.getCardHolderName() && e("div", {
327
327
  class: "horizontal-card-holder-value card-text"
328
328
  }, this.getCardHolderName())), e("div", {
329
329
  class: "horizontal-vendor"
330
- }, r && e("img", {
331
- src: r,
330
+ }, i && e("img", {
331
+ src: i,
332
332
  alt: "",
333
333
  "aria-hidden": "true"
334
334
  }))));
@@ -349,7 +349,7 @@ const h = t(class extends a {
349
349
  renderVerticalCardDetails() {
350
350
  const t = this.fiLogo ? {
351
351
  "--tct-card-image-fi-logo": `url(${this.fiLogo})`
352
- } : {}, a = this.getChipPath("vertical"), r = this.getVendorPath(), i = this.getCardTypeColorStyle();
352
+ } : {}, a = this.getChipPath("vertical"), i = this.getVendorPath(), r = this.getCardTypeColorStyle();
353
353
  return e("div", {
354
354
  class: "card-details-vertical"
355
355
  }, e("div", {
@@ -369,7 +369,7 @@ const h = t(class extends a {
369
369
  class: "vertical-card-holder-wrapper"
370
370
  }, this.showCardHolderLabel() && e("div", {
371
371
  class: "vertical-card-holder-label card-text"
372
- }, d("tecton.element.cardImage.cardHolder")), this.getCardHolderName() && e("div", {
372
+ }, n("tecton.element.cardImage.cardHolder")), this.getCardHolderName() && e("div", {
373
373
  class: "vertical-card-holder-value card-text"
374
374
  }, this.getCardHolderName())), e("div", {
375
375
  class: "vertical-exp-date-card-type-row"
@@ -377,7 +377,7 @@ const h = t(class extends a {
377
377
  class: "vertical-exp-date-wrapper"
378
378
  }, this.showExpirationDateLabel() && e("div", {
379
379
  class: "vertical-exp-date-label card-text"
380
- }, d("tecton.element.cardImage.expires")), this.getFormattedExpirationDate() && e("div", {
380
+ }, n("tecton.element.cardImage.expires")), this.getFormattedExpirationDate() && e("div", {
381
381
  class: "vertical-exp-date-value card-text"
382
382
  }, this.getFormattedExpirationDate())), e("div", {
383
383
  class: {
@@ -386,13 +386,13 @@ const h = t(class extends a {
386
386
  "vendor-mastercard": "mastercard" === this.vendor,
387
387
  "vendor-visa": "visa" === this.vendor
388
388
  },
389
- style: i
389
+ style: r
390
390
  }, this.getCardTypeText())), e("div", {
391
391
  class: "vertical-vendor-row"
392
392
  }, e("div", {
393
393
  class: "vertical-vendor"
394
- }, r && e("img", {
395
- src: r,
394
+ }, i && e("img", {
395
+ src: i,
396
396
  alt: "",
397
397
  "aria-hidden": "true"
398
398
  }))));
@@ -406,14 +406,14 @@ const h = t(class extends a {
406
406
  onClick: this.handleCardClick
407
407
  }, this.renderCardContent()) : this.renderCardContent(), a = !!this.cardStatus && "large" === this.size;
408
408
  return e(o, {
409
- key: "4425c2f04d081d93b56ed67f00b949c8143d0046",
409
+ key: "1210673a91d22bac5106d3807ec08179fb6cfd9f",
410
410
  class: {
411
411
  ["" + this.orientation]: !0,
412
412
  "has-action": this.hasActionSlotContent,
413
413
  "has-banner": a
414
414
  }
415
415
  }, this.renderStatusBanner(), e("div", {
416
- key: "1d264f88e00805b9153a7ac59f4ea367bf28dc3f",
416
+ key: "b81dd3c1b02260e9ff1d7e7321d88a3c2d209f83",
417
417
  class: "card-wrapper"
418
418
  }, t, this.renderAction()));
419
419
  }
@@ -424,7 +424,7 @@ const h = t(class extends a {
424
424
  return this;
425
425
  }
426
426
  static get style() {
427
- return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{--tct-card-image-base-blur:0px;--tct-card-image-primary-color:var(--t-primary, #5446a4);--tct-card-image-secondary-color:var(--t-secondary, #2a7de1);--tct-card-image-tertiary-color:var(--t-tertiary, #6b7280);--tct-card-image-base-gradient-deg:110.95deg;--tct-card-image-base-gradient-left-color:var(--t-gray-2, #1a1a1a);--tct-card-image-base-gradient-left-stop:0.54%;--tct-card-image-base-gradient-middle-color:var(--t-gray-11, #cccccc);--tct-card-image-base-gradient-middle-stop:60.22%;--tct-card-image-base-gradient-right-color:var(--t-gray-2, #1a1a1a);--tct-card-image-base-gradient-right-stop:100%;--tct-card-image-overlay-opacity:1;--tct-card-image-overlay-mix-blend-mode:normal;--tct-card-image-dot-size:0.5px;--tct-card-image-dot-spacing:2px;--tct-card-image-dot-color:rgba(128, 128, 128, 0.5);--tct-card-image-font-color:var(--t-base, #fff);--tct-card-image-text-shadow:0px 0px 1px rgba(0, 0, 0, 0.85);--tct-card-image-status-box-shadow:var( --app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14) );--tct-card-image-status-background-digital:var(--tct-black, #000);--tct-card-image-status-color-digital:var(--tct-white, #fff);--tct-card-image-status-background-enabled:var(--tct-stoplight-info, #0079c1);--tct-card-image-status-color-enabled:var(--tct-white, #fff);--tct-card-image-status-background-disabled:var(--tct-stoplight-alert, #d20a0a);--tct-card-image-status-color-disabled:var(--tct-white, #fff);--tct-card-image-status-background-locked:var(--tct-stoplight-alert, #d20a0a);--tct-card-image-status-color-locked:var(--tct-white, #fff);--tct-card-image-status-background-damaged:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-damaged:var(--tct-white, #fff);--tct-card-image-status-background-lost:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-lost:var(--tct-white, #fff);--tct-card-image-status-background-stolen:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-stolen:var(--tct-white, #fff);--tct-card-image-status-background-lost-or-stolen:var(--tct-stoplight-warning, #c35500);--tct-card-image-status-color-lost-or-stolen:var(--tct-white, #fff);}:host{display:flex;flex-direction:column;max-width:100%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}:host([inline]){display:inline-flex}:host(.horizontal){max-width:var(--tct-card-image-max-width, min(400px, 100%));min-width:var(--tct-card-image-min-width, 40px);width:var(--tct-card-image-width)}:host(.vertical){max-width:var(--tct-card-image-max-width, min(250px, 100%));min-width:var(--tct-card-image-min-width, 25px);width:var(--tct-card-image-width)}:host(.has-action){margin-top:22px;margin-right:22px}:host(.has-action.has-banner){margin-top:11px}:host(:hover) .card-image-container.clickable,:host(:focus-within) .card-image-container.clickable{transform:translateY(-8px) scale(1.03);box-shadow:var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))}:host(:hover) .card-status-banner.clickable,:host(:focus-within) .card-status-banner.clickable{transform:translateY(-8px) scale(1.03)}:host([disabled]:not([disabled=false])) .card-image-container{opacity:var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([disabled]:not([disabled=false])) .card-status-banner{cursor:not-allowed}.card-wrapper>q2-btn{--const-double-focus-ring:none;--tct-btn-min-height-medium:0;--tct-btn-padding-size-medium:0;--tct-btn-font-size-medium:inherit;width:100%;max-width:100%}.card-wrapper{position:relative;max-width:100%}.card-action{position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:5}.card-image-container{overflow:hidden;position:relative;border:1px solid transparent;background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(200, 200, 200) 33%, rgb(150, 150, 150)) border-box;background-origin:border-box;background-clip:padding-box, border-box;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))}.card-image-container.inline{display:inline-block}.card-image-container.clickable{cursor:pointer;will-change:transform;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-image-container.block{display:block}.card-image-container.horizontal{aspect-ratio:8/5;border-radius:3%/4.8%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 400px);min-width:var(--tct-card-image-min-width, 40px);flex-shrink:0}.card-image-container.vertical{aspect-ratio:5/8;border-radius:4.8%/3%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 250px);min-width:var(--tct-card-image-min-width, 25px);flex-shrink:0}.card-image,.card-image-overlay{position:absolute;inset:0;width:100%;height:100%}.card-image{z-index:1;filter:blur(var(--tct-card-image-base-blur))}.card-image-overlay{z-index:2;opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-primary{background-color:var(--tct-card-image-primary-color)}.card-image.bg-secondary{background-color:var(--tct-card-image-secondary-color)}.card-image.bg-tertiary{background-color:var(--tct-card-image-tertiary-color)}.card-image.bg-gradient{background:linear-gradient(var(--tct-card-image-base-gradient-deg), var(--tct-card-image-base-gradient-left-color) var(--tct-card-image-base-gradient-left-stop), var(--tct-card-image-base-gradient-middle-color) var(--tct-card-image-base-gradient-middle-stop), var(--tct-card-image-base-gradient-right-color) var(--tct-card-image-base-gradient-right-stop))}.card-image-overlay.bg-dot{background-image:radial-gradient(circle, var(--tct-card-image-dot-color) var(--tct-card-image-dot-size), transparent var(--tct-card-image-dot-size));background-size:var(--tct-card-image-dot-spacing) var(--tct-card-image-dot-spacing);mix-blend-mode:var(--tct-card-image-overlay-mix-blend-mode);opacity:var(--tct-card-image-overlay-opacity)}.card-image.bg-custom{background-image:var(--tct-card-image-base-url);background-size:cover;background-position:center}.card-image-overlay.bg-custom{background-image:var(--tct-card-image-overlay-url);background-size:cover;background-position:center}.card-status-banner{position:relative;z-index:4;width:fit-content;min-width:33.33%;max-width:72%;height:22px;margin:0 auto -11px;padding:0 12px;border:1px solid rgba(0, 0, 0, 0.2);border-radius:5px/5px;box-shadow:var(--tct-card-image-status-box-shadow);display:flex;align-items:center;justify-content:center}.card-status-banner.vertical{min-width:60%}.card-status-banner.clickable{cursor:pointer;transition:transform 0.3s ease}.card-status-text{font-size:var(--const-px-14, 14px);font-family:var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);text-transform:uppercase;white-space:nowrap}.card-status-banner.status-enabled{background-color:var(--tct-card-image-status-background-enabled);color:var(--tct-card-image-status-color-enabled)}.card-status-banner.status-disabled{background-color:var(--tct-card-image-status-background-disabled);color:var(--tct-card-image-status-color-disabled)}.card-status-banner.status-locked{background-color:var(--tct-card-image-status-background-locked);color:var(--tct-card-image-status-color-locked)}.card-status-banner.status-damaged{background-color:var(--tct-card-image-status-background-damaged);color:var(--tct-card-image-status-color-damaged)}.card-status-banner.status-lost{background-color:var(--tct-card-image-status-background-lost);color:var(--tct-card-image-status-color-lost)}.card-status-banner.status-stolen{background-color:var(--tct-card-image-status-background-stolen);color:var(--tct-card-image-status-color-stolen)}.card-status-banner.status-lost-or-stolen{background-color:var(--tct-card-image-status-background-lost-or-stolen);color:var(--tct-card-image-status-color-lost-or-stolen)}.card-status-banner.status-digital{background-color:var(--tct-card-image-status-background-digital);color:var(--tct-card-image-status-color-digital)}.card-details-wrapper{container-type:inline-size;position:relative;z-index:3;height:calc(100% + 2px);width:calc(100% + 2px);margin-left:-1px;margin-top:-1px}.card-text{color:var(--tct-card-image-font-color);font-family:"Open Sans", Arial, sans-serif;font-weight:600;line-height:1;letter-spacing:1.55px;text-shadow:var(--tct-card-image-text-shadow);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card-details-horizontal{padding:2.5cqw;height:100%;width:100%;overflow:hidden}.horizontal-logo-wrapper{padding:0 1.25cqw;margin:1.25cqw 0 2.5cqw 0;width:70cqw;height:11.25cqw}.horizontal-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:left center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 2.5cqw 0);width:100%;height:100%}.horizontal-chip{width:15cqw;height:10cqw;margin-left:8.75cqw}.horizontal-chip img{display:block;width:100%;height:100%;object-fit:contain}.horizontal-card-number{padding-top:2.5cqw;text-align:left;font-size:5cqw;height:7.5cqw;width:85cqw;margin-left:5cqw}.horizontal-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:10cqw;margin:1.25cqw 0}.horizontal-exp-date-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:25cqw;height:100%;margin-left:1.25cqw}.horizontal-exp-date-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-exp-date-value{font-size:3.5cqw}.horizontal-card-type{font-size:var(--tct-card-image-type-font-size, 4cqw);color:var(--tct-card-image-type-color, var(--tct-card-image-font-color));margin-right:var(--tct-card-image-type-margin-right, 4.15cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10.1cqw)}.horizontal-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 1.25cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.horizontal-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 0.09cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -6.25cqw)}.horizontal-card-holder-vendor-row{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.horizontal-card-holder-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:73.75cqw;height:10cqw;padding:0 1.25cqw;margin-right:1.25cqw;min-width:0}.horizontal-card-holder-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-card-holder-value{font-size:4.5cqw}.horizontal-vendor{width:20cqw;height:12.5cqw;flex-shrink:0}.horizontal-vendor img{display:block;width:100%;height:100%;object-fit:contain}.card-details-vertical{position:relative;z-index:3;padding:4cqw;height:100%;width:100%;overflow:hidden}.vertical-chip{width:16cqw;height:24cqw;margin:12cqw 0 30cqw 46cqw}.vertical-chip img{display:block;width:100%;height:100%;object-fit:contain}.vertical-logo-wrapper{padding:0 2cqw;margin-bottom:4cqw;width:100%;height:18cqw}.vertical-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:center center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 4cqw 0);width:100%;height:100%}.vertical-card-number{text-align:left;font-size:8cqw;height:12cqw;width:100%;padding:0 2cqw}.vertical-card-holder-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:16cqw;padding:0 2cqw;min-width:0}.vertical-card-holder-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-card-holder-value{font-size:7.2cqw}.vertical-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:16cqw}.vertical-exp-date-wrapper{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:40cqw;height:100%;margin-left:2cqw;padding-bottom:2cqw}.vertical-exp-date-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-exp-date-value{font-size:5.6cqw}.vertical-card-type{font-size:var(--tct-card-image-type-font-size, 6.4cqw);padding-bottom:2cqw;color:var(--tct-card-image-type-color, var(--tct-card-image-font-color));margin-right:var(--tct-card-image-type-margin-right, 3cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -19cqw)}.vertical-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 2cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.vertical-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 0.05625cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10cqw)}.vertical-vendor-row{display:flex;justify-content:end}.vertical-vendor{width:32cqw;height:20cqw;flex-shrink:0}.vertical-vendor img{display:block;width:100%;height:100%;object-fit:contain}';
427
+ return '*{box-sizing:border-box}*:active{outline:none}*:focus-visible{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}@container style(--t-prefers-motion: "reduced"){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}@container (not style(--t-prefers-motion: "normal")) and (not style(--t-prefers-motion: "reduced")){@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0.01ms !important;transition-duration:0.01ms !important;animation-delay:0ms !important;transition-delay:0ms !important}}}:host{display:flex;flex-direction:column;max-width:100%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}:host([inline]){display:inline-flex}:host(.horizontal){max-width:var(--tct-card-image-max-width, min(400px, 100%));min-width:var(--tct-card-image-min-width, 40px);width:var(--tct-card-image-width)}:host(.vertical){max-width:var(--tct-card-image-max-width, min(250px, 100%));min-width:var(--tct-card-image-min-width, 25px);width:var(--tct-card-image-width)}:host(.has-action){margin-top:22px;margin-right:22px}:host(.has-action.has-banner){margin-top:11px}:host(:hover) .card-image-container.clickable,:host(:focus-within) .card-image-container.clickable{transform:translateY(-8px) scale(1.03);box-shadow:var(--app-shadow-3, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 8px 16px rgba(0, 0, 0, 0.14))}:host(:hover) .card-status-banner.clickable,:host(:focus-within) .card-status-banner.clickable{transform:translateY(-8px) scale(1.03)}:host([disabled]:not([disabled=false])) .card-image-container{opacity:var(--tct-card-image-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4)));cursor:not-allowed}:host([disabled]:not([disabled=false])) .card-status-banner{cursor:not-allowed}.card-wrapper>q2-btn{--tct-btn-default-double-focus-visible-ring:var(--comp-aesthetic-btn-focus-ring, none);--const-double-focus-ring:none;--tct-btn-min-height-medium:0;--tct-btn-padding-size-medium:0;--tct-btn-font-size-medium:inherit;width:100%;max-width:100%}.card-wrapper{position:relative;max-width:100%;--comp-aesthetic-btn-focus-ring:var(--tct-btn-default-double-focus-visible-ring)}.card-action{position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:5}.card-image-container{overflow:hidden;position:relative;border:1px solid transparent;background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to right, rgb(200, 200, 200) 33%, rgb(150, 150, 150)) border-box;background-origin:border-box;background-clip:padding-box, border-box;box-shadow:var(--app-shadow-2, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 4px 8px rgba(0, 0, 0, 0.14))}.card-image-container.inline{display:inline-block}.card-image-container.clickable{cursor:pointer;will-change:transform;transition:transform 0.3s ease, box-shadow 0.3s ease}.card-image-container.block{display:block}.card-image-container.horizontal{aspect-ratio:8/5;border-radius:3%/4.8%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 400px);min-width:var(--tct-card-image-min-width, 40px);flex-shrink:0}.card-image-container.vertical{aspect-ratio:5/8;border-radius:4.8%/3%;width:var(--tct-card-image-width, 100%);max-width:var(--tct-card-image-max-width, 250px);min-width:var(--tct-card-image-min-width, 25px);flex-shrink:0}.card-image,.card-image-overlay{position:absolute;inset:0;width:100%;height:100%}.card-image{z-index:1;filter:blur(var(--tct-card-image-base-blur, 0px))}.card-image-overlay{z-index:2;opacity:var(--tct-card-image-overlay-opacity, 1)}.card-image.bg-primary{background-color:var(--tct-card-image-primary-color, var(--t-primary, #5446a4))}.card-image.bg-secondary{background-color:var(--tct-card-image-secondary-color, var(--t-secondary, #2a7de1))}.card-image.bg-tertiary{background-color:var(--tct-card-image-tertiary-color, var(--t-tertiary, #6b7280))}.card-image.bg-gradient{background:linear-gradient(var(--tct-card-image-base-gradient-deg, 110.95deg), var(--tct-card-image-base-gradient-left-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-left-stop, 0.54%), var(--tct-card-image-base-gradient-middle-color, var(--t-gray-11, #cccccc)) var(--tct-card-image-base-gradient-middle-stop, 60.22%), var(--tct-card-image-base-gradient-right-color, var(--t-gray-2, #1a1a1a)) var(--tct-card-image-base-gradient-right-stop, 100%))}.card-image-overlay.bg-dot{background-image:radial-gradient(circle, var(--tct-card-image-dot-color, rgba(128, 128, 128, 0.5)) var(--tct-card-image-dot-size, 0.5px), transparent var(--tct-card-image-dot-size, 0.5px));background-size:var(--tct-card-image-dot-spacing, 2px) var(--tct-card-image-dot-spacing, 2px);mix-blend-mode:var(--tct-card-image-overlay-mix-blend-mode, normal);opacity:var(--tct-card-image-overlay-opacity, 1)}.card-image.bg-custom{background-image:var(--tct-card-image-base-url);background-size:cover;background-position:center}.card-image-overlay.bg-custom{background-image:var(--tct-card-image-overlay-url);background-size:cover;background-position:center}.card-status-banner{position:relative;z-index:4;width:fit-content;min-width:33.33%;max-width:72%;height:22px;margin:0 auto -11px;padding:0 12px;border:1px solid rgba(0, 0, 0, 0.2);border-radius:5px/5px;box-shadow:var(--tct-card-image-status-box-shadow, var(--app-shadow-3));display:flex;align-items:center;justify-content:center}.card-status-banner.vertical{min-width:60%}.card-status-banner.clickable{cursor:pointer;transition:transform 0.3s ease}.card-status-text{font-size:var(--const-px-14, 14px);font-family:var(--uux-app-fontFamily, OpenSans, Helvetica Neue, Helvetica, Arial, sans-serif);text-transform:uppercase;white-space:nowrap}.card-status-banner.status-enabled{background-color:var(--tct-card-image-status-background-enabled, var(--const-stoplight-success, #0e8a00));color:var(--tct-card-image-status-color-enabled, var(--tct-white, #fff))}.card-status-banner.status-new{background-color:var(--tct-card-image-status-background-new, var(--const-stoplight-info, #0079c1));color:var(--tct-card-image-status-color-new, var(--tct-white, #fff))}.card-status-banner.status-disabled{background-color:var(--tct-card-image-status-background-disabled, var(--const-stoplight-alert, #d20a0a));color:var(--tct-card-image-status-color-disabled, var(--tct-white, #fff))}.card-status-banner.status-locked{background-color:var(--tct-card-image-status-background-locked, var(--const-stoplight-alert, #d20a0a));color:var(--tct-card-image-status-color-locked, var(--tct-white, #fff))}.card-status-banner.status-damaged{background-color:var(--tct-card-image-status-background-damaged, var(--const-stoplight-warning, #c35500));color:var(--tct-card-image-status-color-damaged, var(--tct-white, #fff))}.card-status-banner.status-lost{background-color:var(--tct-card-image-status-background-lost, var(--const-stoplight-warning, #c35500));color:var(--tct-card-image-status-color-lost, var(--tct-white, #fff))}.card-status-banner.status-stolen{background-color:var(--tct-card-image-status-background-stolen, var(--const-stoplight-warning, #c35500));color:var(--tct-card-image-status-color-stolen, var(--tct-white, #fff))}.card-status-banner.status-lost-or-stolen{background-color:var(--tct-card-image-status-background-lost-or-stolen, var(--const-stoplight-warning, #c35500));color:var(--tct-card-image-status-color-lost-or-stolen, var(--tct-white, #fff))}.card-status-banner.status-digital{background-color:var(--tct-card-image-status-background-digital, var(--tct-black, #000));color:var(--tct-card-image-status-color-digital, var(--tct-white, #fff))}.card-details-wrapper{container-type:inline-size;position:relative;z-index:3;height:calc(100% + 2px);width:calc(100% + 2px);margin-left:-1px;margin-top:-1px}.card-text{color:var(--tct-card-image-font-color, var(--t-base, #fff));font-family:"Open Sans", Arial, sans-serif;font-weight:600;line-height:1;letter-spacing:1.55px;text-shadow:var(--tct-card-image-text-shadow, 0px 0px 1px rgba(0, 0, 0, 0.85));text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.card-details-horizontal{padding:2.5cqw;height:100%;width:100%;overflow:hidden}.horizontal-logo-wrapper{padding:0 1.25cqw;margin:1.25cqw 0 2.5cqw 0;width:70cqw;height:11.25cqw}.horizontal-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:left center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 2.5cqw 0);width:100%;height:100%}.horizontal-chip{width:15cqw;height:10cqw;margin-left:8.75cqw}.horizontal-chip img{display:block;width:100%;height:100%;object-fit:contain}.horizontal-card-number{padding-top:2.5cqw;text-align:left;font-size:5cqw;height:7.5cqw;width:85cqw;margin-left:5cqw}.horizontal-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:10cqw;margin:1.25cqw 0}.horizontal-exp-date-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:25cqw;height:100%;margin-left:1.25cqw}.horizontal-exp-date-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-exp-date-value{font-size:3.5cqw}.horizontal-card-type{font-size:var(--tct-card-image-type-font-size, 4cqw);color:var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));margin-right:var(--tct-card-image-type-margin-right, 4.15cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10.1cqw)}.horizontal-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 1.25cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.horizontal-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 3cqw);margin-right:var(--tct-card-image-type-margin-right, 0.09cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -6.25cqw)}.horizontal-card-holder-vendor-row{display:flex;flex-direction:row;flex-wrap:nowrap;width:100%}.horizontal-card-holder-wrapper{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:73.75cqw;height:10cqw;padding:0 1.25cqw;margin-right:1.25cqw;min-width:0}.horizontal-card-holder-label{font-size:2.5cqw;margin-bottom:1cqw}.horizontal-card-holder-value{font-size:4.5cqw}.horizontal-vendor{width:20cqw;height:12.5cqw;flex-shrink:0}.horizontal-vendor img{display:block;width:100%;height:100%;object-fit:contain}.card-details-vertical{position:relative;z-index:3;padding:4cqw;height:100%;width:100%;overflow:hidden}.vertical-chip{width:16cqw;height:24cqw;margin:12cqw 0 30cqw 46cqw}.vertical-chip img{display:block;width:100%;height:100%;object-fit:contain}.vertical-logo-wrapper{padding:0 2cqw;margin-bottom:4cqw;width:100%;height:18cqw}.vertical-logo{background-image:var(--tct-card-image-fi-logo, var(--uux-logoImageHighContrast, var(--uux-logoImage)));background-size:contain;background-repeat:no-repeat;background-position:center center;background-origin:content-box;padding:var(--tct-card-image-logo-padding, 4cqw 0);width:100%;height:100%}.vertical-card-number{text-align:left;font-size:8cqw;height:12cqw;width:100%;padding:0 2cqw}.vertical-card-holder-wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;width:100%;height:16cqw;padding:0 2cqw;min-width:0}.vertical-card-holder-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-card-holder-value{font-size:7.2cqw}.vertical-exp-date-card-type-row{display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;align-items:flex-end;width:100%;height:16cqw}.vertical-exp-date-wrapper{display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;width:40cqw;height:100%;margin-left:2cqw;padding-bottom:2cqw}.vertical-exp-date-label{font-size:4cqw;margin-bottom:1.6cqw}.vertical-exp-date-value{font-size:5.6cqw}.vertical-card-type{font-size:var(--tct-card-image-type-font-size, 6.4cqw);padding-bottom:2cqw;color:var(--tct-card-image-type-color, var(--tct-card-image-font-color, var(--t-base, #fff)));margin-right:var(--tct-card-image-type-margin-right, 3cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -19cqw)}.vertical-card-type.vendor-mastercard{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 2cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, 0cqw)}.vertical-card-type.vendor-visa{font-size:var(--tct-card-image-type-font-size, 4.8cqw);margin-right:var(--tct-card-image-type-margin-right, 0.05625cqw);margin-bottom:var(--tct-card-image-type-margin-bottom, -10cqw)}.vertical-vendor-row{display:flex;justify-content:end}.vertical-vendor{width:32cqw;height:20cqw;flex-shrink:0}.vertical-vendor img{display:block;width:100%;height:100%;object-fit:contain}';
428
428
  }
429
429
  }, [ 257, "q2-card-image", {
430
430
  background: [ 513 ],
@@ -460,7 +460,7 @@ const g = h, defineCustomElement = function() {
460
460
  break;
461
461
 
462
462
  case "q2-btn":
463
- customElements.get(c(t)) || n();
463
+ customElements.get(c(t)) || d();
464
464
  break;
465
465
 
466
466
  case "q2-loading":