q2-tecton-elements 1.57.2 → 1.58.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (274) hide show
  1. package/dist/bundle-report.json +68 -70
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/q2-action-group_2.cjs.entry.js +2 -2
  4. package/dist/cjs/q2-action-sheet.cjs.entry.js +1 -1
  5. package/dist/cjs/q2-avatar.cjs.entry.js +1 -1
  6. package/dist/cjs/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.cjs.js.map +1 -1
  7. package/dist/cjs/q2-badge_7.cjs.entry.js +14 -12
  8. package/dist/cjs/q2-badge_7.cjs.entry.js.map +1 -1
  9. package/dist/cjs/q2-calendar.cjs.entry.js +35 -33
  10. package/dist/cjs/q2-calendar.cjs.entry.js.map +1 -1
  11. package/dist/cjs/q2-calendar.entry.cjs.js.map +1 -1
  12. package/dist/cjs/q2-carousel-pane.cjs.entry.js +2 -2
  13. package/dist/cjs/q2-carousel.cjs.entry.js +2 -2
  14. package/dist/cjs/q2-carousel.cjs.entry.js.map +1 -1
  15. package/dist/cjs/q2-carousel.entry.cjs.js.map +1 -1
  16. package/dist/cjs/q2-chart-area.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-chart-bar.cjs.entry.js +1 -1
  18. package/dist/cjs/q2-chart-donut.cjs.entry.js +1 -1
  19. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  20. package/dist/cjs/q2-checkbox.cjs.entry.js.map +1 -1
  21. package/dist/cjs/q2-checkbox.entry.cjs.js.map +1 -1
  22. package/dist/cjs/q2-context.cjs.entry.js +1 -1
  23. package/dist/cjs/q2-currency.cjs.entry.js +1 -1
  24. package/dist/cjs/q2-detail.cjs.entry.js +1 -1
  25. package/dist/cjs/q2-example.cjs.entry.js +1 -1
  26. package/dist/cjs/q2-file-picker.cjs.entry.js +21 -13
  27. package/dist/cjs/q2-file-picker.cjs.entry.js.map +1 -1
  28. package/dist/cjs/q2-file-picker.entry.cjs.js.map +1 -1
  29. package/dist/cjs/q2-form.cjs.entry.js +1 -1
  30. package/dist/cjs/q2-formatted-text.cjs.entry.js +1 -1
  31. package/dist/cjs/q2-item.cjs.entry.js +1 -1
  32. package/dist/cjs/q2-legend.cjs.entry.js +1 -1
  33. package/dist/cjs/q2-link_2.cjs.entry.js +1 -1
  34. package/dist/cjs/q2-loading-element.cjs.entry.js +1 -1
  35. package/dist/cjs/q2-loading-element.cjs.entry.js.map +1 -1
  36. package/dist/cjs/q2-loading-element.entry.cjs.js.map +1 -1
  37. package/dist/cjs/q2-message.cjs.entry.js +7 -7
  38. package/dist/cjs/q2-message.cjs.entry.js.map +1 -1
  39. package/dist/cjs/q2-message.entry.cjs.js.map +1 -1
  40. package/dist/cjs/q2-modal.cjs.entry.js +1 -1
  41. package/dist/cjs/q2-month-picker.cjs.entry.js +2 -2
  42. package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
  43. package/dist/cjs/q2-option-list.q2-popover.entry.cjs.js.map +1 -1
  44. package/dist/cjs/q2-option-list_2.cjs.entry.js +2 -2
  45. package/dist/cjs/q2-option-list_2.cjs.entry.js.map +1 -1
  46. package/dist/cjs/q2-pagination.cjs.entry.js +3 -3
  47. package/dist/cjs/q2-pill.cjs.entry.js +1 -1
  48. package/dist/cjs/q2-relative-time.cjs.entry.js +1 -1
  49. package/dist/cjs/q2-section.cjs.entry.js +2 -2
  50. package/dist/cjs/q2-stepper-vertical.cjs.entry.js +1 -1
  51. package/dist/cjs/q2-stepper.cjs.entry.js +35 -15
  52. package/dist/cjs/q2-stepper.cjs.entry.js.map +1 -1
  53. package/dist/cjs/q2-stepper.entry.cjs.js.map +1 -1
  54. package/dist/cjs/q2-tag.cjs.entry.js +1 -1
  55. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  56. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  57. package/dist/cjs/tecton-tab-pane.cjs.entry.js +2 -2
  58. package/dist/collection/components/q2-action-group/q2-action-group.js +1 -1
  59. package/dist/collection/components/q2-action-sheet/q2-action-sheet.js +1 -1
  60. package/dist/collection/components/q2-avatar/q2-avatar.js +1 -1
  61. package/dist/collection/components/q2-calendar/q2-calendar.css +2 -2
  62. package/dist/collection/components/q2-calendar/q2-calendar.js +34 -32
  63. package/dist/collection/components/q2-calendar/q2-calendar.js.map +1 -1
  64. package/dist/collection/components/q2-calendar/q2-month-picker.js +2 -2
  65. package/dist/collection/components/q2-carousel/q2-carousel.js +2 -2
  66. package/dist/collection/components/q2-carousel/q2-carousel.js.map +1 -1
  67. package/dist/collection/components/q2-carousel-pane/q2-carousel-pane.js +2 -2
  68. package/dist/collection/components/q2-chart-area/q2-chart-area.js +1 -1
  69. package/dist/collection/components/q2-chart-bar/q2-chart-bar.js +1 -1
  70. package/dist/collection/components/q2-chart-donut/q2-chart-donut.js +1 -1
  71. package/dist/collection/components/q2-checkbox/q2-checkbox.css +3 -3
  72. package/dist/collection/components/q2-context/q2-context.js +1 -1
  73. package/dist/collection/components/q2-currency/q2-currency.js +1 -1
  74. package/dist/collection/components/q2-detail/q2-detail.js +1 -1
  75. package/dist/collection/components/q2-example/q2-example.js +1 -1
  76. package/dist/collection/components/q2-file-picker/q2-file-picker.js +31 -23
  77. package/dist/collection/components/q2-file-picker/q2-file-picker.js.map +1 -1
  78. package/dist/collection/components/q2-form/q2-form.js +1 -1
  79. package/dist/collection/components/q2-formatted-text/q2-formatted-text.js +1 -1
  80. package/dist/collection/components/q2-input/formatting/phone.js +1 -1
  81. package/dist/collection/components/q2-input/formatting/phone.js.map +1 -1
  82. package/dist/collection/components/q2-input/q2-input.css +1 -1
  83. package/dist/collection/components/q2-input/q2-input.js +10 -8
  84. package/dist/collection/components/q2-input/q2-input.js.map +1 -1
  85. package/dist/collection/components/q2-item/q2-item.js +1 -1
  86. package/dist/collection/components/q2-legend/q2-legend.js +1 -1
  87. package/dist/collection/components/q2-list/q2-list.js +1 -1
  88. package/dist/collection/components/q2-loading/q2-loading.css +10 -0
  89. package/dist/collection/components/q2-loading/skeleton/q2-loading-element/styles.css +1 -0
  90. package/dist/collection/components/q2-message/q2-message.css +30 -17
  91. package/dist/collection/components/q2-message/q2-message.js +6 -6
  92. package/dist/collection/components/q2-message/q2-message.js.map +1 -1
  93. package/dist/collection/components/q2-modal/q2-modal.js +1 -1
  94. package/dist/collection/components/q2-optgroup/q2-optgroup.js +1 -1
  95. package/dist/collection/components/q2-pagination/q2-pagination.js +3 -3
  96. package/dist/collection/components/q2-pill/q2-pill.js +1 -1
  97. package/dist/collection/components/q2-popover/q2-popover.js +8 -4
  98. package/dist/collection/components/q2-popover/q2-popover.js.map +1 -1
  99. package/dist/collection/components/q2-relative-time/q2-relative-time.js +1 -1
  100. package/dist/collection/components/q2-resize-observer/q2-resize-observer.js +1 -1
  101. package/dist/collection/components/q2-section/q2-section.js +2 -2
  102. package/dist/collection/components/q2-stepper/q2-stepper.css +4 -4
  103. package/dist/collection/components/q2-stepper/q2-stepper.js +40 -16
  104. package/dist/collection/components/q2-stepper/q2-stepper.js.map +1 -1
  105. package/dist/collection/components/q2-stepper-vertical/q2-stepper-vertical.js +1 -1
  106. package/dist/collection/components/q2-tab-container/q2-tab-container.js +2 -2
  107. package/dist/collection/components/q2-tab-container/q2-tab-container.js.map +1 -1
  108. package/dist/collection/components/q2-tab-pane/q2-tab-pane.js +1 -1
  109. package/dist/collection/components/q2-tag/q2-tag.js +1 -1
  110. package/dist/collection/components/q2-textarea/q2-textarea.js +1 -1
  111. package/dist/collection/components/tecton-tab-pane/tecton-tab-pane.js +2 -2
  112. package/dist/components/q2-action-group2.js +1 -1
  113. package/dist/components/q2-action-sheet.js +1 -1
  114. package/dist/components/q2-avatar2.js +1 -1
  115. package/dist/components/q2-calendar.js +35 -33
  116. package/dist/components/q2-calendar.js.map +1 -1
  117. package/dist/components/q2-carousel-pane.js +2 -2
  118. package/dist/components/q2-carousel.js +2 -2
  119. package/dist/components/q2-carousel.js.map +1 -1
  120. package/dist/components/q2-chart-area.js +1 -1
  121. package/dist/components/q2-chart-bar.js +1 -1
  122. package/dist/components/q2-chart-donut.js +1 -1
  123. package/dist/components/q2-checkbox2.js +1 -1
  124. package/dist/components/q2-checkbox2.js.map +1 -1
  125. package/dist/components/q2-context.js +1 -1
  126. package/dist/components/q2-currency.js +1 -1
  127. package/dist/components/q2-detail.js +1 -1
  128. package/dist/components/q2-example.js +1 -1
  129. package/dist/components/q2-file-picker.js +21 -13
  130. package/dist/components/q2-file-picker.js.map +1 -1
  131. package/dist/components/q2-form.js +1 -1
  132. package/dist/components/q2-formatted-text.js +1 -1
  133. package/dist/components/q2-input2.js +12 -10
  134. package/dist/components/q2-input2.js.map +1 -1
  135. package/dist/components/q2-item2.js +1 -1
  136. package/dist/components/q2-legend2.js +1 -1
  137. package/dist/components/q2-list2.js +1 -1
  138. package/dist/components/q2-loading-element.js +1 -1
  139. package/dist/components/q2-loading-element.js.map +1 -1
  140. package/dist/components/q2-loading2.js +1 -1
  141. package/dist/components/q2-loading2.js.map +1 -1
  142. package/dist/components/q2-message2.js +7 -7
  143. package/dist/components/q2-message2.js.map +1 -1
  144. package/dist/components/q2-modal.js +1 -1
  145. package/dist/components/q2-month-picker.js +2 -2
  146. package/dist/components/q2-optgroup2.js +1 -1
  147. package/dist/components/q2-pagination.js +3 -3
  148. package/dist/components/q2-pill.js +1 -1
  149. package/dist/components/q2-popover2.js +2 -2
  150. package/dist/components/q2-popover2.js.map +1 -1
  151. package/dist/components/q2-relative-time.js +1 -1
  152. package/dist/components/q2-resize-observer2.js +1 -1
  153. package/dist/components/q2-section.js +2 -2
  154. package/dist/components/q2-stepper-vertical.js +1 -1
  155. package/dist/components/q2-stepper.js +38 -17
  156. package/dist/components/q2-stepper.js.map +1 -1
  157. package/dist/components/q2-tab-container.js +2 -2
  158. package/dist/components/q2-tab-container.js.map +1 -1
  159. package/dist/components/q2-tab-pane.js +1 -1
  160. package/dist/components/q2-tag.js +1 -1
  161. package/dist/components/q2-textarea.js +1 -1
  162. package/dist/components/tecton-tab-pane.js +2 -2
  163. package/dist/esm/loader.js +1 -1
  164. package/dist/esm/q2-action-group_2.entry.js +2 -2
  165. package/dist/esm/q2-action-sheet.entry.js +1 -1
  166. package/dist/esm/q2-avatar.entry.js +1 -1
  167. package/dist/esm/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.js.map +1 -1
  168. package/dist/esm/q2-badge_7.entry.js +16 -14
  169. package/dist/esm/q2-badge_7.entry.js.map +1 -1
  170. package/dist/esm/q2-calendar.entry.js +35 -33
  171. package/dist/esm/q2-calendar.entry.js.map +1 -1
  172. package/dist/esm/q2-carousel-pane.entry.js +2 -2
  173. package/dist/esm/q2-carousel.entry.js +2 -2
  174. package/dist/esm/q2-carousel.entry.js.map +1 -1
  175. package/dist/esm/q2-chart-area.entry.js +1 -1
  176. package/dist/esm/q2-chart-bar.entry.js +1 -1
  177. package/dist/esm/q2-chart-donut.entry.js +1 -1
  178. package/dist/esm/q2-checkbox.entry.js +1 -1
  179. package/dist/esm/q2-checkbox.entry.js.map +1 -1
  180. package/dist/esm/q2-context.entry.js +1 -1
  181. package/dist/esm/q2-currency.entry.js +1 -1
  182. package/dist/esm/q2-detail.entry.js +1 -1
  183. package/dist/esm/q2-example.entry.js +1 -1
  184. package/dist/esm/q2-file-picker.entry.js +21 -13
  185. package/dist/esm/q2-file-picker.entry.js.map +1 -1
  186. package/dist/esm/q2-form.entry.js +1 -1
  187. package/dist/esm/q2-formatted-text.entry.js +1 -1
  188. package/dist/esm/q2-item.entry.js +1 -1
  189. package/dist/esm/q2-legend.entry.js +1 -1
  190. package/dist/esm/q2-link_2.entry.js +1 -1
  191. package/dist/esm/q2-loading-element.entry.js +1 -1
  192. package/dist/esm/q2-loading-element.entry.js.map +1 -1
  193. package/dist/esm/q2-message.entry.js +7 -7
  194. package/dist/esm/q2-message.entry.js.map +1 -1
  195. package/dist/esm/q2-modal.entry.js +1 -1
  196. package/dist/esm/q2-month-picker.entry.js +2 -2
  197. package/dist/esm/q2-optgroup.entry.js +1 -1
  198. package/dist/esm/q2-option-list.q2-popover.entry.js.map +1 -1
  199. package/dist/esm/q2-option-list_2.entry.js +2 -2
  200. package/dist/esm/q2-option-list_2.entry.js.map +1 -1
  201. package/dist/esm/q2-pagination.entry.js +3 -3
  202. package/dist/esm/q2-pill.entry.js +1 -1
  203. package/dist/esm/q2-relative-time.entry.js +1 -1
  204. package/dist/esm/q2-section.entry.js +2 -2
  205. package/dist/esm/q2-stepper-vertical.entry.js +1 -1
  206. package/dist/esm/q2-stepper.entry.js +35 -15
  207. package/dist/esm/q2-stepper.entry.js.map +1 -1
  208. package/dist/esm/q2-tag.entry.js +1 -1
  209. package/dist/esm/q2-tecton-elements.js +1 -1
  210. package/dist/esm/q2-textarea.entry.js +1 -1
  211. package/dist/esm/tecton-tab-pane.entry.js +2 -2
  212. package/dist/jest.setup.js +7 -0
  213. package/dist/jest.setup.js.map +1 -1
  214. package/dist/q2-tecton-elements/q2-action-group_2.entry.js +7 -7
  215. package/dist/q2-tecton-elements/q2-action-sheet.entry.js +8 -8
  216. package/dist/q2-tecton-elements/q2-avatar.entry.js +6 -6
  217. package/dist/q2-tecton-elements/q2-badge.q2-btn.q2-icon.q2-input.q2-loading.q2-tab-container.q2-tab-pane.entry.esm.js.map +1 -1
  218. package/dist/q2-tecton-elements/q2-badge_7.entry.js +319 -314
  219. package/dist/q2-tecton-elements/q2-badge_7.entry.js.map +1 -1
  220. package/dist/q2-tecton-elements/q2-calendar.entry.esm.js.map +1 -1
  221. package/dist/q2-tecton-elements/q2-calendar.entry.js +151 -146
  222. package/dist/q2-tecton-elements/q2-calendar.entry.js.map +1 -1
  223. package/dist/q2-tecton-elements/q2-carousel-pane.entry.js +3 -3
  224. package/dist/q2-tecton-elements/q2-carousel.entry.esm.js.map +1 -1
  225. package/dist/q2-tecton-elements/q2-carousel.entry.js +2 -2
  226. package/dist/q2-tecton-elements/q2-carousel.entry.js.map +1 -1
  227. package/dist/q2-tecton-elements/q2-chart-area.entry.js +4 -4
  228. package/dist/q2-tecton-elements/q2-chart-bar.entry.js +2 -2
  229. package/dist/q2-tecton-elements/q2-chart-donut.entry.js +63 -63
  230. package/dist/q2-tecton-elements/q2-checkbox.entry.esm.js.map +1 -1
  231. package/dist/q2-tecton-elements/q2-checkbox.entry.js +33 -33
  232. package/dist/q2-tecton-elements/q2-checkbox.entry.js.map +1 -1
  233. package/dist/q2-tecton-elements/q2-context.entry.js +11 -11
  234. package/dist/q2-tecton-elements/q2-currency.entry.js +6 -6
  235. package/dist/q2-tecton-elements/q2-detail.entry.js +3 -3
  236. package/dist/q2-tecton-elements/q2-example.entry.js +1 -1
  237. package/dist/q2-tecton-elements/q2-file-picker.entry.esm.js.map +1 -1
  238. package/dist/q2-tecton-elements/q2-file-picker.entry.js +21 -13
  239. package/dist/q2-tecton-elements/q2-file-picker.entry.js.map +1 -1
  240. package/dist/q2-tecton-elements/q2-form.entry.js +2 -2
  241. package/dist/q2-tecton-elements/q2-formatted-text.entry.js +2 -2
  242. package/dist/q2-tecton-elements/q2-item.entry.js +12 -12
  243. package/dist/q2-tecton-elements/q2-legend.entry.js +2 -2
  244. package/dist/q2-tecton-elements/q2-link_2.entry.js +9 -9
  245. package/dist/q2-tecton-elements/q2-loading-element.entry.esm.js.map +1 -1
  246. package/dist/q2-tecton-elements/q2-loading-element.entry.js +1 -1
  247. package/dist/q2-tecton-elements/q2-message.entry.esm.js.map +1 -1
  248. package/dist/q2-tecton-elements/q2-message.entry.js +32 -32
  249. package/dist/q2-tecton-elements/q2-message.entry.js.map +1 -1
  250. package/dist/q2-tecton-elements/q2-modal.entry.js +21 -21
  251. package/dist/q2-tecton-elements/q2-month-picker.entry.js +13 -13
  252. package/dist/q2-tecton-elements/q2-optgroup.entry.js +4 -4
  253. package/dist/q2-tecton-elements/q2-option-list.q2-popover.entry.esm.js.map +1 -1
  254. package/dist/q2-tecton-elements/q2-option-list_2.entry.js +16 -16
  255. package/dist/q2-tecton-elements/q2-option-list_2.entry.js.map +1 -1
  256. package/dist/q2-tecton-elements/q2-pagination.entry.js +24 -24
  257. package/dist/q2-tecton-elements/q2-pill.entry.js +13 -13
  258. package/dist/q2-tecton-elements/q2-relative-time.entry.js +4 -4
  259. package/dist/q2-tecton-elements/q2-section.entry.js +11 -11
  260. package/dist/q2-tecton-elements/q2-stepper-vertical.entry.js +4 -4
  261. package/dist/q2-tecton-elements/q2-stepper.entry.esm.js.map +1 -1
  262. package/dist/q2-tecton-elements/q2-stepper.entry.js +77 -59
  263. package/dist/q2-tecton-elements/q2-stepper.entry.js.map +1 -1
  264. package/dist/q2-tecton-elements/q2-tag.entry.js +5 -5
  265. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  266. package/dist/q2-tecton-elements/q2-textarea.entry.js +5 -5
  267. package/dist/q2-tecton-elements/tecton-tab-pane.entry.js +6 -6
  268. package/dist/types/components/q2-calendar/q2-calendar.d.ts +1 -1
  269. package/dist/types/components/q2-file-picker/q2-file-picker.d.ts +48 -24
  270. package/dist/types/components/q2-input/q2-input.d.ts +4 -3
  271. package/dist/types/components/q2-popover/q2-popover.d.ts +6 -2
  272. package/dist/types/components/q2-stepper/q2-stepper.d.ts +2 -0
  273. package/dist/types/components.d.ts +33 -20
  274. package/package.json +3 -3
@@ -2627,7 +2627,7 @@ const phoneNumberFormats = {
2627
2627
  prefix: '+220 ',
2628
2628
  },
2629
2629
  GE: {
2630
- mask: '########',
2630
+ mask: '########?',
2631
2631
  prefix: '+995 ',
2632
2632
  },
2633
2633
  /* DE: {
@@ -3829,7 +3829,7 @@ const formatCreditCard = {
3829
3829
  unknownFormatter,
3830
3830
  };
3831
3831
 
3832
- const q2InputCss = "*{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}:host{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, --t-text, inherit)}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, --t-text, inherit);-webkit-text-fill-color:var(--tct-input-autofill-font-color, --t-text, inherit)}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
3832
+ const q2InputCss = "*{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}:host{--comp-default-input-margin:var(--tct-input-margin-top, var(--t-input-margin-top, var(--app-scale-5x, 25px))) 0 var(--tct-input-margin-bottom, var(--t-input-margin-bottom, var(--app-scale-5x, 25px)));display:block;margin:var(--tct-input-margin, var(--comp-default-input-margin));font-size:var(--tct-input-font-size, var(--t-input-font-size, var(--app-font-size, inherit)))}:host([hidden]){display:none}.field-container,.input-container{position:relative}.field-container{--comp-input-tween:var(--tct-input-tween, var(--t-input-tween, var(--tct-tween-2, var(--app-tween-2, 0.4s ease))))}.field-container.is-small .btn-clear{--tct-btn-icon-width:20px;--tct-icon-size:17px}.input-label{--comp-label-padding:var(--tct-input-label-padding, 0 var(--tct-input-label-padding-right, var(--t-input-label-padding-right, 0)) 0 var(--tct-input-label-padding-left, var(--t-input-label-padding-left, 0)));display:block;padding:var(--comp-label-padding);color:var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit));font-size:var(--tct-input-label-font-size, var(--t-input-label-font-size, inherit));font-weight:var(--tct-input-label-font-weight, var(--t-input-label-font-weight, 600));text-transform:var(--tct-input-label-text-transform, var(--t-input-label-text-transform, none));letter-spacing:var(--tct-input-label-letter-spacing, var(--t-input-label-letter-spacing, inherit));transition:color var(--comp-input-tween)}.optional-tag{--comp-label-optional-margin:var(--tct-input-label-optional-margin, 0 0 0 var(--tct-input-label-optional-margin-left, var(--t-input-label-optional-margin-left, var(--tct-scale-1, var(--app-scale-1x, 5px)))));margin:var(--comp-label-optional-margin);color:var(--tct-input-label-optional-font-color, var(--t-input-label-optional-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77)))));font-size:var(--tct-input-label-optional-font-size, var(--t-input-label-optional-font-size, var(--app-font-size-small, 12px)));font-weight:var(--tct-input-label-optional-font-weight, var(--t-input-label-optional-font-weight, 400));line-height:1em}.count-tag{color:var(--tct-input-count-font-color, var(--t-textA, var(--t-a11y-gray-color, rgba(77, 77, 77, 0.77))));font-size:var(--tct-input-count-font-size, var(--app-font-size-small, 12px));font-weight:var(--tct-input-count-font-weight, 400);text-align:right;width:var(--tct-input-count-width, auto)}.label-wrapper{--comp-label-margin:var(--tct-input-label-margin, var(--tct-input-label-margin-top, var(--t-input-label-margin-top, 0)) 0 var(--tct-input-label-margin-bottom, var(--t-input-label-margin-bottom, var(--tct-scale-1, var(--app-scale-1x, 5px)))));display:flex;gap:var(--tct-input-label-gap, var(--app-scale-2x, 10px));justify-content:space-between;align-items:end;margin:var(--comp-label-margin);line-height:var(--tct-input-label-line-height, var(--t-input-label-line-height, inherit))}.label-wrapper:has(label.sr){margin:0}.input-container{--comp-input-background:var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--t-gray-14, #fcfcfd))));--comp-input-horizontal-gap:var(--tct-input-horizontal-gap, var(--t-input-horizontal-gap, 0));--comp-input-border-top-left-radius:var(--tct-input-border-top-left-radius, var(--t-input-border-top-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-top-right-radius:var(--tct-input-border-top-right-radius, var(--t-input-border-top-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-right-radius:var(--tct-input-border-bottom-right-radius, var(--t-input-border-bottom-right-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-bottom-left-radius:var(--tct-input-border-bottom-left-radius, var(--t-input-border-bottom-left-radius, var(--tct-border-radius-1, var(--app-border-radius-1, 4px))));--comp-input-border-radius:var(--comp-input-border-top-left-radius) var(--comp-input-border-top-right-radius)\n var(--comp-input-border-bottom-right-radius) var(--comp-input-border-bottom-left-radius);--comp-input-border-width:var(--tct-input-border-top-width, 1px) var(--tct-input-border-right-width, 1px)\n var(--tct-input-border-bottom-width, 1px) var(--tct-input-border-left-width, 1px);--comp-input-border-color:var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)));--comp-input-prefix-clearance:calc(3 * var(--tct-input-prefix-font-size, 14px) + var(--tct-scale-1, 5px));--comp-input-icon-clearance:34px;--comp-input-min-height:var(--tct-input-min-height, var(--t-input-min-height, 44px));--comp-input-max-height:var(--tct-input-max-height, var(--t-input-max-height));--comp-input-hover-ring-color:var(--tct-input-hover-ring-color, var(--t-input-hover-ring-color));--comp-input-hover-ring:0 0 0 2px var(--t-base), 0 0 0 4px var(--comp-input-hover-ring-color), var(--tct-input-hover-box-shadow, var(--t-input-hover-box-shadow, 0 0 transparent));background:var(--comp-input-background);display:flex;align-items:center;gap:var(--tct-input-container-gap, var(--app-scale-2x, 10px));padding-inline:var(--tct-input-container-padding-inline);border-width:var(--comp-input-border-width);border-style:solid;border-color:var(--comp-input-border-color);border-radius:var(--comp-input-border-radius);box-shadow:var(--tct-input-box-shadow, var(--t-input-box-shadow, none));transition:border-width var(--comp-input-tween), border-color var(--comp-input-tween), box-shadow var(--comp-input-tween)}:host([disabled]:not([disabled=false])) .input-container{cursor:not-allowed;opacity:var(--tct-input-disabled-opacity, var(--t-input-disabled-opacity, var(--tct-disabled-opacity, var(--app-disabled-opacity, 0.4))))}.has-error .input-container{border-color:var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a));background:var(--tct-input-error-background, var(--comp-input-background));box-shadow:var(--tct-input-error-box-shadow, var(--comp-input-hover-ring))}.input-container:hover{border-color:var(--tct-input-hover-border-color, var(--comp-input-border-color));background:var(--tct-input-hover-background, var(--comp-input-background));box-shadow:var(--tct-input-hover-box-shadow, var(--comp-input-hover-ring))}.has-error .input-container:hover{border-color:var(--tct-input-error-hover-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-hover-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-hover-box-shadow, var(--tct-input-error-box-shadow, var(--comp-input-hover-ring)))}.has-focus .input-container{border-color:var(--tct-input-focus-border-color, var(--t-input-focus-border-color, var(--comp-input-border-color)));background:var(--tct-input-focus-background, var(--comp-input-background));box-shadow:var(--tct-input-focus-box-shadow, var(--const-double-focus-ring))}.has-focus.has-error .input-container,.has-focus.has-error .input-container:hover{border-color:var(--tct-input-error-focus-border-color, var(--tct-input-error-border-color, var(--const-stoplight-alert, #d20a0a)));background:var(--tct-input-error-focus-background, var(--tct-input-error-background, var(--comp-input-background)));box-shadow:var(--tct-input-error-focus-box-shadow, var(--tct-input-error-box-shadow, var(--const-double-focus-ring)))}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)){background:var(--tct-input-autofill-background, #faffbc);color:var(--tct-input-autofill-font-color, --t-text, inherit)}.input-container:has(.input-field:is(:-webkit-autofill,:autofill)) .input-field{box-shadow:0 0 0 1000px var(--tct-input-autofill-background, #faffbc) inset;color:var(--tct-input-autofill-font-color, --t-text, inherit);-webkit-text-fill-color:var(--tct-input-autofill-font-color, --t-text, inherit)}.input-field{flex:1;border:0;-webkit-appearance:none;appearance:none;box-sizing:border-box;min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);overflow-y:hidden;height:var(--tct-input-height, var(--t-input-height, 44px));width:100%;padding:var(--tct-input-padding, 0);background:transparent;color:var(--tct-input-font-color, var(--t-input-font-color, var(--t-text, inherit)));display:inline-block;text-align:var(--tct-input-align, \"start\");font-weight:var(--tct-input-font-weight, var(--t-input-font-weight, 400));letter-spacing:var(--tct-input-letter-spacing, var(--t-input-letter-spacing, inherit));}.input-field:focus{outline:none;box-shadow:none}.input-field::-webkit-outer-spin-button,.input-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.input-field[type=number]{-moz-appearance:textfield}.input-field::-ms-reveal,.input-field::-ms-clear{display:none}.input-field[type=search]::-webkit-search-decoration,.input-field[type=search]::-webkit-search-cancel-button,.input-field[type=search]::-webkit-search-results-button,.input-field[type=search]::-webkit-search-results-decoration{display:none}.input-field[disabled]:not([disabled=false]){cursor:not-allowed}.right-aligned .input-field{text-align:right}.input-field:is(input){flex:1}.input-field:is(button){display:inline-flex;align-items:center}.has-custom-display .input-field:is(button){height:auto;padding:0}.input-field:is(button) span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.custom-display-container{max-width:100%}.has-custom-display .custom-display-container{--comp-default-padding:var(--app-scale-2x, 10px) var(--app-scale-2x, 10px) var(--app-scale-3x, 15px);padding:var(--tct-input-padding, var(--t-input-padding, var(--comp-default-padding)));width:100%}.input-field::placeholder,.placeholder-text{color:var(--tct-input-placeholder-font-color, var(--t-input-placeholder-font-color, var(--t-textA, var(--app-gray-d1, rgba(77, 77, 77, 0.77)))))}.pseudo-input-container{min-width:0;flex:1}.input-icons-container-left,.input-icons-container-right{--tct-btn-icon-hover-background:var(--tct-input-btn-hover-background);--tct-btn-hover-background:var(--tct-input-btn-hover-background);display:flex;flex-direction:row;align-items:center;gap:var(--comp-input-horizontal-gap)}.input-icons-container-left>div:not(.vertical-separator),.input-icons-container-right>div:not(.vertical-separator){min-width:var(--tct-input-icon-container-icon-min-width, 44px);display:flex;justify-content:center;align-items:center;font-size:var(--tct-input-icon-container-font-size, inherit)}.input-icons-container-left:empty,.input-icons-container-right:empty{display:var(--tct-input-icon-container-empty-display, block)}.input-icons-container-left{padding-left:var(--comp-input-horizontal-gap)}.input-icons-container-right{padding-right:var(--comp-input-horizontal-gap);--comp-visibility-toggle-padding:0px var(--app-scale-2x, 10px)}.input-icons-container-right .btn-visibility-toggle{--tct-btn-height:var(--comp-input-min-height);--tct-btn-padding-inline:var(--tct-input-visibility-toggle-padding, var(--app-scale-2x, 10px));--tct-btn-font-weight:var(--tct-input-visibility-toggle-font-weight, 400);color:var(--tct-input-visibility-toggle-font-color, var(--t-primary, #0079c1));font-size:var(--tct-input-visibility-toggle-font-size, var(--app-font-size-small, 12px))}q2-icon{margin-top:calc(var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) / 2);margin-bottom:calc(var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) / 2);pointer-events:none;color:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))));--tct-icon-stroke-primary:var(--tct-input-icon-stroke-primary, var(--t-input-icon-stroke-primary, var(--t-a11y-gray-color, var(--t-textA, var(--app-gray, #747474)))))}.icon-left-muted{opacity:0.5}.input-prefix,.input-suffix{min-height:var(--comp-input-min-height);max-height:var(--comp-input-max-height);height:var(--tct-input-height, var(--t-input-height, 44px));font-size:var(--tct-input-prefix-font-size, var(--t-input-prefix-font-size, inherit));color:var(--tct-input-prefix-font-color, var(--t-input-prefix-font-color, inherit));background:var(--tct-input-prefix-background, var(--tct-input-prefix-bg, var(--t-input-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, #f2f2f2))))))));transition:color var(--comp-input-tween), background var(--comp-input-tween)}.input-prefix{border-top-left-radius:calc(\n var(--comp-input-border-top-left-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );border-bottom-left-radius:calc(\n var(--comp-input-border-bottom-left-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-left-width, var(--t-input-border-left-width, 1px))\n );pointer-events:none;}.input-suffix{border-top-right-radius:calc(\n var(--comp-input-border-top-right-radius) - var(--tct-input-border-top-width, var(--t-input-border-top-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n );border-bottom-right-radius:calc(\n var(--comp-input-border-bottom-right-radius) - var(--tct-input-border-bottom-width, var(--t-input-border-bottom-width, 1px)) - var(--tct-input-border-right-width, var(--t-input-border-right-width, 1px))\n )}.icon-error{color:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a));--tct-icon-stroke-primary:var(--tct-stoplight-error, var(--const-stoplight-alert, #d20a0a))}.messages-container{height:0px;overflow:hidden;background:var(--tct-message-background, var(--tct-message-bg, var(--t-message-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2)))))));box-shadow:var(--tct-input-message-box-shadow, var(--t-input-message-box-shadow, var(--tct-box-shadow-1, var(--app-shadow-1, 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 4px rgba(0, 0, 0, 0.14)))));transition:height var(--tct-input-messages-tween, var(--t-input-messages-tween, var(--tct-tween-1, var(--app-tween-1, 0.2s ease))));margin-top:var(--tct-input-messages-margin-top, 2px);z-index:var(--tct-input-messages-z-index, 5);position:absolute;width:100%;color:var(--tct-input-messages-font-color, var(--t-input-messages-font-color, inherit));border-radius:var(--tct-message-border-radius, --app-border-radius-1, inherit)}.has-error label{color:var(--tct-input-error-label-font-color, var(--t-input-error-label-font-color, var(--tct-input-label-font-color, var(--t-input-label-font-color, inherit))))}.has-error:not(.has-focus) .input-prefix,.has-error:not(.has-focus) .input-suffix{color:var(--tct-input-error-prefix-font-color, var(--t-input-error-prefix-font-color, inherit));background:var(--tct-input-error-prefix-background, var(--tct-input-error-prefix-bg, var(--t-input-error-prefix-bg, var(--tct-input-background, var(--tct-input-bg, var(--t-input-bg, var(--tct-gray-14, var(--t-gray-14, var(--tct-gray-l3, var(--app-gray-l3, #f2f2f2))))))))))}.icon-left{width:26px;height:26px}.vertical-separator{height:calc(var(--comp-input-min-height) - 2px);border-right-width:var(--tct-input-prefix-border-width, 1px);border-right-style:solid;border-right-color:var(--tct-input-prefix-border-color, var(--t-input-prefix-border-color, var(--tct-input-border-color, var(--t-input-border-color, var(--t-a11y-gray-color-AA, #404040)))))}";
3833
3833
 
3834
3834
  const inputTypeMap = {
3835
3835
  text: 'text',
@@ -4139,7 +4139,9 @@ const Q2Input = class {
4139
4139
  // #region Local Methods
4140
4140
  get ariaAttributes() {
4141
4141
  return {
4142
- ariaOwns: index$1.getAriaValueFromProp(this.ariaOwns),
4142
+ ariaActivedescendant: index$1.getAriaValueFromProp(this.ariaActivedescendant),
4143
+ ariaControls: index$1.getAriaValueFromProp(this.ariaControls),
4144
+ ariaExpanded: index$1.getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),
4143
4145
  ariaHaspopup: index$1.getAriaValueFromProp(this.ariaHaspopup, [
4144
4146
  'true',
4145
4147
  'false',
@@ -4149,8 +4151,7 @@ const Q2Input = class {
4149
4151
  'grid',
4150
4152
  'dialog',
4151
4153
  ]),
4152
- ariaExpanded: index$1.getAriaValueFromProp(this.ariaExpanded, ['true', 'false']),
4153
- ariaActivedescendant: index$1.getAriaValueFromProp(this.ariaActivedescendant),
4154
+ ariaOwns: index$1.getAriaValueFromProp(this.ariaOwns),
4154
4155
  };
4155
4156
  }
4156
4157
  get canSetSelection() {
@@ -4473,13 +4474,14 @@ const Q2Input = class {
4473
4474
  renderStandardInputDOM() {
4474
4475
  const { hasCustomDisplaySlot } = this;
4475
4476
  const inputClasses = ['input-field'];
4476
- const { ariaOwns, ariaHaspopup, ariaExpanded, ariaActivedescendant } = this.ariaAttributes;
4477
+ const { ariaOwns, ariaHaspopup, ariaActivedescendant } = this.ariaAttributes;
4477
4478
  if (hasCustomDisplaySlot)
4478
4479
  inputClasses.push('sr');
4479
- return (index.h(index.Fragment, null, hasCustomDisplaySlot && (index.h("div", { class: "custom-display-container" }, index.h("slot", { name: "custom-display" }))), index.h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-expanded": ariaExpanded, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, role: this._role, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
4480
+ return (index.h(index.Fragment, null, hasCustomDisplaySlot && (index.h("div", { class: "custom-display-container" }, index.h("slot", { name: "custom-display" }))), index.h("input", { ref: el => (this.inputRef = el), class: inputClasses.join(' '), id: this.inputId, type: this.computedType, size: this.formattedValueObject.prefix ? 10 : undefined, maxlength: ['date', 'currency'].includes(this.type) ? undefined : this.maxlength || undefined, max: this.max, min: this.min, step: this.step, "aria-current": this.current || undefined, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-owns": ariaOwns, "aria-haspopup": ariaHaspopup, "aria-activedescendant": ariaActivedescendant, autocomplete: this.computedAutocomplete, autocapitalize: this.autocapitalize, autocorrect: this.autocorrect === 'on' ? 'on' : 'off', autofocus: this.autofocus, placeholder: (this.placeholder && index$1.loc(this.placeholder)) || undefined, "test-id": "inputField", readonly: this.readonly || this._preventEntry, disabled: !!this.disabled, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onInputClick, onKeyDown: this.onInputKeydown, onInput: this.onInputInput, onPaste: this.onInputPaste, inputmode: this.inputMode, pattern: this.pattern || undefined })));
4480
4481
  }
4481
4482
  render() {
4482
- return (index.h("div", { key: 'afe812fab4bcb422580f57a5b9aaf41246ece6e5', class: this.wrapperClasses }, index.h("div", { key: '382973da5d7a563b6978aacb6b44192d4c547ed5', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this)));
4483
+ const { ariaControls, ariaExpanded } = this.ariaAttributes;
4484
+ return (index.h(index.Host, { key: '94de6859228b9e57400ee4c48f60200e5ee04b0e', role: this._role, "aria-controls": ariaControls, "aria-expanded": ariaExpanded }, index.h("div", { key: '680591185b170f1d527b363b41488f354ae7d05f', class: this.wrapperClasses }, index.h("div", { key: '5c2499e85f9aeeff06e5404d0ebd5f8ddbbd1047', class: "label-wrapper" }, index$1.renderLabel(this), this.renderCountDOM()), this.renderInputContainerDOM(), index$1.renderMessages(this))));
4483
4485
  }
4484
4486
  get hostElement() { return index.getElement(this); }
4485
4487
  static get watchers() { return {
@@ -4495,7 +4497,7 @@ const Q2Input = class {
4495
4497
  };
4496
4498
  Q2Input.style = q2InputCss;
4497
4499
 
4498
- const q2LoadingCss = "*{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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-gray-8, #808080)))}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
4500
+ const q2LoadingCss = "*{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}.flex{display:flex}.flex-center{justify-content:center}.flex-left{justify-content:flex-start}.flex-right{justify-content:flex-end}.flex-v-center{align-items:center}.no-margin{margin:0}:host{display:block}:host([inline]),:host([modifiers*=inline]){display:inline-block}:host([hidden]){display:none}:host(:not([inline]):not([modifiers*=inline])){font-size:var(--tct-loading-spinner-size, var(--t-loading-spinner-size, var(--app-scale-12x, 60px)))}.q2-loading-animation{height:1em;width:1em}.half-circle-spinner,.half-circle-spinner *{box-sizing:border-box}.half-circle-spinner{border-radius:100%;position:relative}.half-circle-spinner .circle{position:absolute;width:100%;height:100%;border-radius:100%;border:0.0833333333em solid transparent}.half-circle-spinner .circle.circle-1{border-top-color:var(--tct-loading-primary-color, var(--t-loading-primary-color, var(--t-primary, #0079c1)));animation:half-circle-spinner-animation 1s infinite}.half-circle-spinner .circle.circle-2{border-bottom-color:var(--tct-loading-secondary-color, var(--t-loading-secondary-color, #9ddd4f));animation:half-circle-spinner-animation 1s infinite alternate}@keyframes half-circle-spinner-animation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}:host{--comp-loading-skeleton-opacity:var(--var-loading-skeleton-opacity, 0.25)}@media (prefers-contrast: more){:host{--comp-loading-skeleton-opacity:var(--var-loading-skeleton-opacity, 1)}}.q2-loading-skeleton{position:relative;width:100%;height:100%;overflow:hidden;--comp-loading-skeleton-shimmer-color:var(--tct-loading-skeleton-shimmer-color, var(--t-base, rgba(255, 255, 255, 0.5)));--comp-loading-skeleton-vertical-gap:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px));--comp-loading-skeleton-horizontal-gap:var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.q2-loading-skeleton-shimmer{position:absolute;width:1rem;height:100%;top:0;left:-100px;animation:skeletonShimmer 3s ease-in-out infinite;background-color:var(--comp-loading-skeleton-shimmer-color);box-shadow:0 0 25px 20px var(--comp-loading-skeleton-shimmer-color);transform:rotate(10deg)}.skeleton-shape.rectangle:not(.no-margin){margin:var(--tct-loading-skeleton-vertical-gap, var(--tct-scale-2, 10px)) var(--tct-loading-skeleton-horizontal-gap, var(--tct-scale-2, 10px))}.skeleton-shape.circle,.skeleton-shape.rectangle{background:var(--tct-loading-skeleton-element-background, var(--tct-loading-skeleton-element-bg, var(--t-gray-8, #808080)));opacity:var(--comp-loading-skeleton-opacity)}.skeleton-shape.rectangle{min-height:var(--tct-loading-skeleton-rectangle-min-height, 20px)}.skeleton-shape.circle{border-radius:50%;padding-top:100%}.flex .rectangle{flex-grow:1}.skeleton-table-row .rectangle{margin:var(--comp-loading-skeleton-vertical-gap) var(--comp-loading-skeleton-horizontal-gap)}.skeleton-table-row .rectangle:not(:first-child):not(:last-child){flex-grow:2}.skeleton-table-row-border .skeleton-shape{margin:0 var(--comp-loading-skeleton-horizontal-gap)}.form{flex-wrap:wrap}.form .field{margin:var(--comp-loading-skeleton-vertical-gap) 0}.form.columns-1 .field{flex-basis:100%}.form.columns-2 .field{flex-basis:50%}.form.columns-3 .field{flex-basis:33.3333%}.form.columns-4 .field{flex-basis:25%}.form.columns-5 .field{flex-basis:20%}.text .rectangle{margin-bottom:0}.text .header.center{margin:0 auto}.text .header.right{margin-left:auto}.text .header{height:1.5rem}.text .header.smaller{height:1rem}.detailed-item{flex-wrap:wrap}.detailed-item.right{flex-flow:row-reverse}.detailed-item-image{flex:0 0 auto;display:inline-flex}.center .detailed-item-image{flex-basis:100%;display:flex}.detailed-item-image .rectangle{flex-grow:0}.detailed-item-text>div{width:100%}.detailed-item-text{flex:1 1 auto}.detailed-item-text .text{margin-top:0;margin-bottom:0}.label-value{flex-wrap:wrap}.label-value .rectangle{flex-basis:calc(50% - 2 * var(--comp-loading-skeleton-horizontal-gap))}@keyframes skeletonShimmer{0%{left:-100px;opacity:1}70%{opacity:1}100%{left:800px;opacity:0}}";
4499
4501
 
4500
4502
  const Q2Loading = class {
4501
4503
  constructor(hostRef) {
@@ -4805,7 +4807,7 @@ const Q2TabContainer = class {
4805
4807
  renderTab(tab, index$1) {
4806
4808
  const { label, value } = tab;
4807
4809
  const isSelected = this.selectedTabValue === value;
4808
- return (index.h("li", { role: "presentation" }, index.h("button", { id: `tab-${this.guid}-${index$1}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": isSelected ? 'true' : 'false', onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected))));
4810
+ return (index.h("li", { role: "presentation" }, index.h("button", { id: `tab-${this.guid}-${index$1}`, "data-value": value, "test-id": "tabLink", tabIndex: isSelected ? 0 : -1, role: "tab", "aria-selected": `${isSelected}`, onClick: this.onTabClick, onKeyDown: this.onTabKeyDown }, tab.badgeCount === undefined ? label : this.renderTabWithBadge(tab, isSelected))));
4809
4811
  }
4810
4812
  renderTabWithBadge(tab, isSelected) {
4811
4813
  let theme;
@@ -4821,7 +4823,7 @@ const Q2TabContainer = class {
4821
4823
  return (index.h("div", { class: "tab-pane-badge", "aria-label": `${tab.label}, ${tab.badgeCount} ${description}` }, tab.label, index.h("q2-badge", { value: tab.badgeCount, theme: theme, status: tab.badgeStatus })));
4822
4824
  }
4823
4825
  render() {
4824
- return (index.h(index.Fragment, { key: '625bfa389efd9c09b88ab8e3d4f01e4241ff6c3c' }, index.h("div", { key: '6fb594c8833de8f1709f72a015cbed521ae1c33c', class: "tab-container" }, this.scrollEnabled && (index.h(index.Fragment, { key: '06fe283b43dec4ad644d9caab64226ce88fc2322' }, index.h("div", { key: '6a8a7299ccd345581e5c42a57c75cf53a342df23', class: "gradient-left", hidden: !this.showScrollLeft }), index.h("div", { key: 'f22764cf7042f425a4269779ec7360db17dc481d', class: "gradient-right", hidden: !this.showScrollRight }), index.h("q2-btn", { key: 'd6f15d711dc52481ba6c8e7aa689f68d632cf51c', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: 'f49f0a9852fa21aa2de80ca5151d161fb37c1bd7', type: "chevron-left", label: "scroll left" })), index.h("q2-btn", { key: 'f7c0aa206a5e6ac8e9b368b823f3b543bc3c4d93', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: '56dae0451a0852d8d717dd20e60424efd954410c', type: "chevron-right", label: "scroll right" })))), index.h("ul", { key: '31d3c207c6bb3d61e8b9815410283430d5c640c9', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), index.h("div", { key: '18f39887bbf614c39bf25f0277da57ccb41c2609', class: "tab-content" }, index.h("slot", { key: '836ff903f7088d239755d8978f97c4b306c3ee7d', onSlotchange: () => this.onSlotChange() }))));
4826
+ return (index.h(index.Fragment, { key: '83bfb22a931e1bf4e820102d1aad4f665006b1f3' }, index.h("div", { key: 'bea01ff143c51cb6a68ec8220bf5f05822faa8db', class: "tab-container" }, this.scrollEnabled && (index.h(index.Fragment, { key: 'be5996de51a16a93a2b396871ac3077f34aa5746' }, index.h("div", { key: '482f2a3417bdcc0c801b2c4838c1998f9bdfc500', class: "gradient-left", hidden: !this.showScrollLeft }), index.h("div", { key: 'c20e996a51bfc31ce72b9a8e2b2c2b3b45432b72', class: "gradient-right", hidden: !this.showScrollRight }), index.h("q2-btn", { key: '2fd28d94ae604f62d5b4df5d139db6e76d6f4e25', class: "btn-left", hidden: !this.showScrollLeft, onClick: () => this.onScrollBtnClick('left') }, index.h("q2-icon", { key: '0f0b63a2b916bcd9d630173527e0e7f143dfb694', type: "chevron-left", label: "scroll left" })), index.h("q2-btn", { key: 'da80772ae293507f7701fad03c41e68a203da197', class: "btn-right", hidden: !this.showScrollRight, onClick: () => this.onScrollBtnClick('right') }, index.h("q2-icon", { key: '03ae7d5c6d7b7834036f516f94219ed4e4534129', type: "chevron-right", label: "scroll right" })))), index.h("ul", { key: 'd7c1454e254cee94ccecc5f0cfe98706da446b4e', onScroll: this.checkScrollState, ref: el => (this.listElement = el), class: this.noPrint ? 'no-print' : null, role: "tablist" }, this.tabs.map((tab, index) => this.renderTab(tab, index)))), index.h("div", { key: 'a786002dfe31a74aa5fb8ae5474b2d2ee8b2a820', class: "tab-content" }, index.h("slot", { key: '0f733e6b1c90efbf090463c35b2de6d347b62e64', onSlotchange: () => this.onSlotChange() }))));
4825
4827
  }
4826
4828
  get hostElement() { return index.getElement(this); }
4827
4829
  static get watchers() { return {
@@ -4846,7 +4848,7 @@ const Q2TabPane = class {
4846
4848
  // #endregion
4847
4849
  // #region Render Methods
4848
4850
  render() {
4849
- return (index.h("div", { key: '7396d43d7b235acf6cdf3cf0497eef52e49b57f4', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, index.h("slot", { key: '3dec3cb020c50cdfe27f475c55e3d1309cef35ab' })));
4851
+ return (index.h("div", { key: '7c5d922ccb07c10578bcbedf65f72f1a2cf2df81', id: `tab-pane-${this.guid}-${this.index}`, class: `tab-pane${this.selected ? '' : ' hidden'}`, role: "tabpanel", tabindex: "-1", "aria-hidden": `${!this.selected}`, "aria-labelledby": `tab-${this.guid}-${this.index}` }, index.h("slot", { key: '36948abfd184cde3805c792ac8f2f975a49f50a4' })));
4850
4852
  }
4851
4853
  static get watchers() { return {
4852
4854
  "badgeCount": ["badgeObserver"],