@baloise/ds-core 16.3.0 → 16.4.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 (247) hide show
  1. package/README.md +1 -1
  2. package/components/bal-accordion-summary.js +12 -2
  3. package/components/bal-accordion-trigger.js +15 -2
  4. package/components/bal-carousel-item2.js +13 -3
  5. package/components/bal-carousel2.js +50 -20
  6. package/components/bal-checkbox-group.js +1 -1
  7. package/components/bal-checkbox2.js +13 -2
  8. package/components/bal-close2.js +1 -6
  9. package/components/bal-date.js +1 -1
  10. package/components/bal-datepicker.js +1 -1
  11. package/components/bal-dropdown.js +3 -3
  12. package/components/bal-file-upload.js +1 -1
  13. package/components/bal-list-item-accordion-head2.js +7 -1
  14. package/components/bal-nav-menu-bar2.js +1 -1
  15. package/components/bal-nav-menu-flyout2.js +3 -6
  16. package/components/bal-nav.js +11 -8
  17. package/components/bal-option-list.js +27 -2
  18. package/components/bal-pagination2.js +3 -3
  19. package/components/bal-progress-bar.js +4 -2
  20. package/components/bal-radio2.js +1 -1
  21. package/components/bal-select2.js +1 -1
  22. package/components/bal-steps.js +8 -6
  23. package/components/bal-tab-item.js +10 -2
  24. package/components/bal-tabs2.js +149 -31
  25. package/components/index.esm.js +1 -1
  26. package/components/index.js +1 -1
  27. package/components/option.js +4 -1
  28. package/components/tokens.esm.js +1 -1
  29. package/dist/baloise-design-system/baloise-design-system.esm.js +1 -1
  30. package/dist/baloise-design-system/index.esm.js +1 -1
  31. package/dist/baloise-design-system/p-0295f5df96.entry.js +1 -0
  32. package/dist/baloise-design-system/p-098f268743.entry.js +1 -0
  33. package/dist/baloise-design-system/{p-ae28b86fe5.entry.js → p-0ab43941ba.entry.js} +1 -1
  34. package/dist/baloise-design-system/p-0d69371467.entry.js +1 -0
  35. package/dist/baloise-design-system/p-1509eaa7.system.js +1 -1
  36. package/dist/baloise-design-system/{p-60f45a7b48.entry.js → p-167594de04.entry.js} +1 -1
  37. package/dist/baloise-design-system/{p-692536f9ff.system.entry.js → p-19542d9bfc.system.entry.js} +1 -1
  38. package/dist/baloise-design-system/p-2f4c6257f4.entry.js +1 -0
  39. package/dist/baloise-design-system/{p-47b18581c7.system.entry.js → p-3e8b5dec38.system.entry.js} +1 -1
  40. package/dist/baloise-design-system/{p-1de6b20b1c.system.entry.js → p-44d845a857.system.entry.js} +1 -1
  41. package/dist/baloise-design-system/p-544a0af68d.system.entry.js +1 -0
  42. package/dist/baloise-design-system/p-54f81c32.js +1 -1
  43. package/dist/baloise-design-system/p-67e6932c19.entry.js +1 -0
  44. package/dist/baloise-design-system/{p-d319b257.system.js → p-685405e0.system.js} +1 -1
  45. package/dist/baloise-design-system/{p-d0d06aa690.entry.js → p-68eead378f.entry.js} +1 -1
  46. package/dist/baloise-design-system/p-6d9afce4c2.entry.js +1 -0
  47. package/dist/baloise-design-system/{p-7047afd8.system.js → p-77ccb1f4.system.js} +1 -1
  48. package/dist/baloise-design-system/{p-b7035c24.system.js → p-83ff83d0.system.js} +1 -1
  49. package/dist/baloise-design-system/p-86b8ffa1ab.system.entry.js +1 -0
  50. package/dist/baloise-design-system/p-8754258843.entry.js +1 -0
  51. package/dist/baloise-design-system/p-88493e9537.system.entry.js +1 -0
  52. package/dist/baloise-design-system/{p-6cf5e22bb4.entry.js → p-886bedebf9.entry.js} +1 -1
  53. package/dist/baloise-design-system/{p-1be257c9cd.system.entry.js → p-8b6aca042a.system.entry.js} +1 -1
  54. package/dist/baloise-design-system/p-95c6192efb.system.entry.js +1 -0
  55. package/dist/baloise-design-system/{p-12bcc7da.js → p-9b4da619.js} +1 -1
  56. package/dist/baloise-design-system/p-a7c3119418.system.entry.js +1 -0
  57. package/dist/baloise-design-system/p-aee4ebe860.system.entry.js +1 -0
  58. package/dist/baloise-design-system/{p-f9db454e37.entry.js → p-b069b55a8d.entry.js} +1 -1
  59. package/dist/baloise-design-system/p-b0f4388e4c.system.entry.js +1 -0
  60. package/dist/baloise-design-system/p-b33c021c08.entry.js +1 -0
  61. package/dist/baloise-design-system/p-b397abec9a.system.entry.js +1 -0
  62. package/dist/baloise-design-system/p-b487614e8b.entry.js +1 -0
  63. package/dist/baloise-design-system/p-b51665840d.entry.js +1 -0
  64. package/dist/baloise-design-system/{p-80b45dd4d6.system.entry.js → p-bcb892a723.system.entry.js} +1 -1
  65. package/dist/baloise-design-system/p-bcca1ed3.system.js +1 -1
  66. package/dist/baloise-design-system/{p-6ceac3e144.system.entry.js → p-c0f4b35c8c.system.entry.js} +1 -1
  67. package/dist/baloise-design-system/p-c2de2596d1.system.entry.js +1 -0
  68. package/dist/baloise-design-system/p-c69783ee18.entry.js +1 -0
  69. package/dist/baloise-design-system/{p-cf0c50d42a.system.entry.js → p-c92eb37957.system.entry.js} +1 -1
  70. package/dist/baloise-design-system/{p-c572e259f4.system.entry.js → p-d66c8f0da9.system.entry.js} +1 -1
  71. package/dist/baloise-design-system/{p-3bad0907.system.js → p-de36076c.system.js} +1 -1
  72. package/dist/baloise-design-system/{p-7292c6e1a1.entry.js → p-e066dc532d.entry.js} +1 -1
  73. package/dist/baloise-design-system/{p-301e753d6f.system.entry.js → p-e18ec1401d.system.entry.js} +1 -1
  74. package/dist/baloise-design-system/{p-0ab7aa0e.js → p-e851f284.js} +1 -1
  75. package/dist/baloise-design-system/{p-f02ea04390.entry.js → p-e9c3c1c4cc.entry.js} +1 -1
  76. package/dist/baloise-design-system/p-f7091a61.js +1 -0
  77. package/dist/cjs/bal-accordion_4.cjs.entry.js +29 -4
  78. package/dist/cjs/bal-carousel_2.cjs.entry.js +60 -24
  79. package/dist/cjs/bal-checkbox_2.cjs.entry.js +11 -1
  80. package/dist/cjs/bal-close.cjs.entry.js +1 -6
  81. package/dist/cjs/bal-datepicker.cjs.entry.js +3 -3
  82. package/dist/cjs/bal-dropdown.cjs.entry.js +3 -3
  83. package/dist/cjs/bal-hint_3.cjs.entry.js +3 -3
  84. package/dist/cjs/bal-list_8.cjs.entry.js +12 -4
  85. package/dist/cjs/bal-logo.cjs.entry.js +3 -3
  86. package/dist/cjs/bal-nav_8.cjs.entry.js +17 -18
  87. package/dist/cjs/bal-navbar_5.cjs.entry.js +3 -3
  88. package/dist/cjs/bal-option_2.cjs.entry.js +26 -2
  89. package/dist/cjs/bal-pagination.cjs.entry.js +6 -6
  90. package/dist/cjs/bal-popover_2.cjs.entry.js +3 -3
  91. package/dist/cjs/bal-progress-bar.cjs.entry.js +6 -5
  92. package/dist/cjs/bal-shape.cjs.entry.js +1 -1
  93. package/dist/cjs/bal-steps.cjs.entry.js +9 -8
  94. package/dist/cjs/bal-tab-item_2.cjs.entry.js +157 -33
  95. package/dist/cjs/baloise-design-system.cjs.js +1 -1
  96. package/dist/cjs/{breakpoints.decorator-47fd06b2.js → breakpoints.decorator-e278a735.js} +1 -1
  97. package/dist/cjs/{breakpoints.subject-06716a68.js → breakpoints.subject-0802767f.js} +1 -1
  98. package/dist/cjs/index.cjs.js +3 -3
  99. package/dist/cjs/initialize-2a19d091.js +1 -1
  100. package/dist/cjs/loader.cjs.js +1 -1
  101. package/dist/cjs/{option-c33cf2b8.js → option-4034ca7d.js} +4 -1
  102. package/dist/cjs/{tokens.esm-dc93a5d7.js → tokens.esm-be397f27.js} +1 -1
  103. package/dist/collection/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.css +1 -1
  104. package/dist/collection/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.js +11 -1
  105. package/dist/collection/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.css +1 -1
  106. package/dist/collection/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.js +14 -1
  107. package/dist/collection/components/bal-carousel/bal-carousel-item/bal-carousel-item.js +45 -2
  108. package/dist/collection/components/bal-carousel/bal-carousel.js +76 -13
  109. package/dist/collection/components/bal-carousel/controls/dot-control.js +2 -2
  110. package/dist/collection/components/bal-carousel/controls/large-control.js +2 -2
  111. package/dist/collection/components/bal-carousel/controls/small-control.js +2 -2
  112. package/dist/collection/components/bal-carousel/controls/tab-control.js +2 -2
  113. package/dist/collection/components/bal-checkbox/bal-checkbox.js +13 -2
  114. package/dist/collection/components/bal-close/bal-close.js +1 -6
  115. package/dist/collection/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.js +7 -1
  116. package/dist/collection/components/bal-nav/bal-nav-menu-bar/bal-nav-menu-bar.css +1 -1
  117. package/dist/collection/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.js +24 -6
  118. package/dist/collection/components/bal-nav/bal-nav.css +1 -1
  119. package/dist/collection/components/bal-nav/bal-nav.js +5 -2
  120. package/dist/collection/components/bal-nav/models/bal-nav-menu-link-item.js +2 -2
  121. package/dist/collection/components/bal-nav/models/bal-nav-meta-link-item.js +3 -3
  122. package/dist/collection/components/bal-option-list/bal-option-list.js +43 -2
  123. package/dist/collection/components/bal-pagination/bal-pagination.js +3 -3
  124. package/dist/collection/components/bal-progress-bar/bal-progress-bar.css +1 -1
  125. package/dist/collection/components/bal-progress-bar/bal-progress-bar.js +26 -2
  126. package/dist/collection/components/bal-steps/bal-steps.css +1 -1
  127. package/dist/collection/components/bal-steps/bal-steps.js +26 -2
  128. package/dist/collection/components/bal-steps/components/step-button.js +2 -2
  129. package/dist/collection/components/bal-tabs/bal-tab-item/bal-tab-item.js +47 -2
  130. package/dist/collection/components/bal-tabs/bal-tabs.js +124 -21
  131. package/dist/collection/components/bal-tabs/components/tab-button.js +18 -6
  132. package/dist/collection/components/bal-tabs/components/tab-nav.js +3 -3
  133. package/dist/collection/utils/constants/version.constant.js +1 -1
  134. package/dist/collection/utils/date/date.spec.js +0 -1
  135. package/dist/collection/utils/dropdown/option.js +4 -1
  136. package/dist/collection/utils/dropdown/popup.js +2 -2
  137. package/dist/collection/utils/string.js +10 -0
  138. package/dist/collection/utils/string.spec.js +24 -0
  139. package/dist/esm/bal-accordion_4.entry.js +29 -4
  140. package/dist/esm/bal-carousel_2.entry.js +61 -25
  141. package/dist/esm/bal-checkbox_2.entry.js +11 -1
  142. package/dist/esm/bal-close.entry.js +1 -6
  143. package/dist/esm/bal-datepicker.entry.js +3 -3
  144. package/dist/esm/bal-dropdown.entry.js +3 -3
  145. package/dist/esm/bal-hint_3.entry.js +3 -3
  146. package/dist/esm/bal-list_8.entry.js +12 -4
  147. package/dist/esm/bal-logo.entry.js +3 -3
  148. package/dist/esm/bal-nav_8.entry.js +17 -18
  149. package/dist/esm/bal-navbar_5.entry.js +3 -3
  150. package/dist/esm/bal-option_2.entry.js +26 -2
  151. package/dist/esm/bal-pagination.entry.js +6 -6
  152. package/dist/esm/bal-popover_2.entry.js +3 -3
  153. package/dist/esm/bal-progress-bar.entry.js +6 -5
  154. package/dist/esm/bal-shape.entry.js +1 -1
  155. package/dist/esm/bal-steps.entry.js +9 -8
  156. package/dist/esm/bal-tab-item_2.entry.js +158 -34
  157. package/dist/esm/baloise-design-system.js +1 -1
  158. package/dist/esm/{breakpoints.decorator-f979fe5c.js → breakpoints.decorator-d0f1affe.js} +1 -1
  159. package/dist/esm/{breakpoints.subject-9ea7074e.js → breakpoints.subject-f57eda2c.js} +1 -1
  160. package/dist/esm/index.js +4 -4
  161. package/dist/esm/initialize-e216cfe4.js +1 -1
  162. package/dist/esm/loader.js +1 -1
  163. package/dist/esm/{option-37cb0282.js → option-01553dab.js} +4 -1
  164. package/dist/esm/{tokens.esm-7d2734e1.js → tokens.esm-70c16b84.js} +1 -1
  165. package/dist/esm-es5/bal-accordion_4.entry.js +1 -1
  166. package/dist/esm-es5/bal-carousel_2.entry.js +1 -1
  167. package/dist/esm-es5/bal-checkbox_2.entry.js +1 -1
  168. package/dist/esm-es5/bal-close.entry.js +1 -1
  169. package/dist/esm-es5/bal-datepicker.entry.js +1 -1
  170. package/dist/esm-es5/bal-dropdown.entry.js +1 -1
  171. package/dist/esm-es5/bal-hint_3.entry.js +1 -1
  172. package/dist/esm-es5/bal-list_8.entry.js +1 -1
  173. package/dist/esm-es5/bal-logo.entry.js +1 -1
  174. package/dist/esm-es5/bal-nav_8.entry.js +1 -1
  175. package/dist/esm-es5/bal-navbar_5.entry.js +1 -1
  176. package/dist/esm-es5/bal-option_2.entry.js +1 -1
  177. package/dist/esm-es5/bal-pagination.entry.js +1 -1
  178. package/dist/esm-es5/bal-popover_2.entry.js +1 -1
  179. package/dist/esm-es5/bal-progress-bar.entry.js +1 -1
  180. package/dist/esm-es5/bal-shape.entry.js +1 -1
  181. package/dist/esm-es5/bal-steps.entry.js +1 -1
  182. package/dist/esm-es5/bal-tab-item_2.entry.js +1 -1
  183. package/dist/esm-es5/baloise-design-system.js +1 -1
  184. package/dist/esm-es5/{breakpoints.decorator-f979fe5c.js → breakpoints.decorator-d0f1affe.js} +1 -1
  185. package/dist/esm-es5/{breakpoints.subject-9ea7074e.js → breakpoints.subject-f57eda2c.js} +1 -1
  186. package/dist/esm-es5/index.js +1 -1
  187. package/dist/esm-es5/initialize-e216cfe4.js +1 -1
  188. package/dist/esm-es5/loader.js +1 -1
  189. package/dist/esm-es5/option-01553dab.js +1 -0
  190. package/dist/html.html-data.json +81 -3
  191. package/dist/types/components/bal-accordion/bal-accordion-summary/bal-accordion-summary.d.ts +1 -0
  192. package/dist/types/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.d.ts +1 -0
  193. package/dist/types/components/bal-carousel/bal-carousel-item/bal-carousel-item.d.ts +6 -0
  194. package/dist/types/components/bal-carousel/bal-carousel.d.ts +11 -2
  195. package/dist/types/components/bal-carousel/controls/dot-control.d.ts +1 -0
  196. package/dist/types/components/bal-carousel/controls/large-control.d.ts +1 -0
  197. package/dist/types/components/bal-carousel/controls/small-control.d.ts +1 -0
  198. package/dist/types/components/bal-carousel/controls/tab-control.d.ts +1 -0
  199. package/dist/types/components/bal-checkbox/bal-checkbox.d.ts +5 -0
  200. package/dist/types/components/bal-close/bal-close.d.ts +0 -2
  201. package/dist/types/components/bal-list/bal-list-item-accordion-head/bal-list-item-accordion-head.d.ts +1 -0
  202. package/dist/types/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.d.ts +4 -1
  203. package/dist/types/components/bal-nav/models/bal-nav-link-item.d.ts +1 -0
  204. package/dist/types/components/bal-nav/models/bal-nav-menu-link-item.d.ts +1 -0
  205. package/dist/types/components/bal-nav/models/bal-nav-meta-link-item.d.ts +3 -1
  206. package/dist/types/components/bal-option-list/bal-option-list.d.ts +5 -0
  207. package/dist/types/components/bal-progress-bar/bal-progress-bar.d.ts +5 -1
  208. package/dist/types/components/bal-progress-bar/bal-progress-bar.interfaces.d.ts +1 -0
  209. package/dist/types/components/bal-steps/bal-steps.d.ts +4 -0
  210. package/dist/types/components/bal-steps/bal-steps.interfaces.d.ts +3 -1
  211. package/dist/types/components/bal-steps/components/step-button.d.ts +1 -0
  212. package/dist/types/components/bal-tabs/bal-tab-item/bal-tab-item.d.ts +10 -0
  213. package/dist/types/components/bal-tabs/bal-tab.type.d.ts +5 -3
  214. package/dist/types/components/bal-tabs/bal-tabs.d.ts +15 -3
  215. package/dist/types/components/bal-tabs/bal-tabs.interfaces.d.ts +3 -0
  216. package/dist/types/components/bal-tabs/components/tab-button.d.ts +1 -0
  217. package/dist/types/components/bal-tabs/components/tab-nav.d.ts +1 -0
  218. package/dist/types/components.d.ts +71 -10
  219. package/dist/types/utils/dropdown/option.d.ts +1 -1
  220. package/dist/types/utils/dropdown/popup.d.ts +1 -1
  221. package/dist/types/utils/string.d.ts +1 -0
  222. package/package.json +8 -8
  223. package/dist/baloise-design-system/p-1502fa2526.entry.js +0 -1
  224. package/dist/baloise-design-system/p-1e100fd83b.entry.js +0 -1
  225. package/dist/baloise-design-system/p-254b130be5.system.entry.js +0 -1
  226. package/dist/baloise-design-system/p-2d82b78410.entry.js +0 -1
  227. package/dist/baloise-design-system/p-2e2ed7a07f.entry.js +0 -1
  228. package/dist/baloise-design-system/p-2ebc8f9d0c.system.entry.js +0 -1
  229. package/dist/baloise-design-system/p-30fc270ec1.entry.js +0 -1
  230. package/dist/baloise-design-system/p-35aa7ecb24.entry.js +0 -1
  231. package/dist/baloise-design-system/p-4f3776ea4e.system.entry.js +0 -1
  232. package/dist/baloise-design-system/p-55f280cf33.system.entry.js +0 -1
  233. package/dist/baloise-design-system/p-63dfa27862.system.entry.js +0 -1
  234. package/dist/baloise-design-system/p-7d498fc5.js +0 -1
  235. package/dist/baloise-design-system/p-87d9c24d45.system.entry.js +0 -1
  236. package/dist/baloise-design-system/p-96c55b4f58.entry.js +0 -1
  237. package/dist/baloise-design-system/p-b22fa7966b.entry.js +0 -1
  238. package/dist/baloise-design-system/p-c304d5fa9c.entry.js +0 -1
  239. package/dist/baloise-design-system/p-cee7a0dd73.system.entry.js +0 -1
  240. package/dist/baloise-design-system/p-cf47f1f53c.entry.js +0 -1
  241. package/dist/baloise-design-system/p-dbc2d22240.system.entry.js +0 -1
  242. package/dist/baloise-design-system/p-e7a4d97c51.entry.js +0 -1
  243. package/dist/baloise-design-system/p-f0ee1b670b.system.entry.js +0 -1
  244. package/dist/esm-es5/option-37cb0282.js +0 -1
  245. /package/dist/baloise-design-system/{p-fc80aa3e.system.js → p-83486137.system.js} +0 -0
  246. /package/dist/baloise-design-system/{p-6b5343bd.js → p-ec4875a2.js} +0 -0
  247. /package/dist/esm-es5/{tokens.esm-7d2734e1.js → tokens.esm-70c16b84.js} +0 -0
package/dist/cjs/bal-nav_8.cjs.entry.js CHANGED
@@ -9,17 +9,17 @@ const log = require('./log-33398c2a.js');
9
9
  const browser = require('./browser-1d542d0f.js');
10
10
  const scroll = require('./scroll-73c1b762.js');
11
11
  const helpers = require('./helpers-2a8c8333.js');
12
- const breakpoints_subject = require('./breakpoints.subject-06716a68.js');
12
+ const breakpoints_subject = require('./breakpoints.subject-0802767f.js');
13
13
  const config_default = require('./config.default-5bdd6e3d.js');
14
14
  const mutation_decorator = require('./mutation.decorator-af043b68.js');
15
- const breakpoints_decorator = require('./breakpoints.decorator-47fd06b2.js');
15
+ const breakpoints_decorator = require('./breakpoints.decorator-e278a735.js');
16
16
  const config_decorator = require('./config.decorator-b393a72f.js');
17
17
  const resize_decorator = require('./resize.decorator-ae91ead2.js');
18
18
  require('./icons.constant-7c82086a.js');
19
19
  require('./config.utils-e4cd49d6.js');
20
20
  require('./device-9f97a845.js');
21
21
  require('./listener-52d2e5fd.js');
22
- require('./tokens.esm-dc93a5d7.js');
22
+ require('./tokens.esm-be397f27.js');
23
23
 
24
24
  class NavLinkItem {
25
25
  constructor(item, observer) {
@@ -188,9 +188,9 @@ class NavMenuLinkItem extends NavLinkItem {
188
188
  render(context) {
189
189
  const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
190
190
  if (!hasChildren && this.isLink) {
191
- return index.h("bal-tab-item", { label: this.label, value: this.value, href: this.href, target: this.target });
191
+ return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
192
192
  }
193
- return (index.h("bal-tab-item", { label: this.label, value: this.value, onBalNavigate: ev => {
193
+ return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
194
194
  context === null || context === void 0 ? void 0 : context.onClick();
195
195
  if (this.onClick) {
196
196
  this.onClick(ev.detail);
@@ -225,11 +225,11 @@ class NavMetaLinkItem extends NavLinkItem {
225
225
  })))) : (''),
226
226
  index.h("hr", { class: Object.assign({}, block.element('line').class()) })));
227
227
  }
228
- render() {
228
+ render(context) {
229
229
  if (this.isLink) {
230
- return index.h("bal-tab-item", { label: this.label, value: this.value, href: this.href, target: this.target });
230
+ return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
231
231
  }
232
- return (index.h("bal-tab-item", { label: this.label, value: this.value, onBalNavigate: ev => {
232
+ return (index.h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
233
233
  if (this.onClick) {
234
234
  this.onClick(ev.detail);
235
235
  }
@@ -360,7 +360,7 @@ const i18nNavBars = {
360
360
  },
361
361
  };
362
362
 
363
- const balNavCss = ":root{--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
363
+ const balNavCss = "@media (hover: hover)and (pointer: fine){.bal-nav__logo:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
364
364
  const BalNavStyle0 = balNavCss;
365
365
 
366
366
  const Nav = class {
@@ -634,10 +634,13 @@ const Nav = class {
634
634
  return (index.h(index.Host, { id: this.navId, class: Object.assign({}, block.class()) }, index.h("div", { class: {
635
635
  'bal-nav-meta-bar-transform': true,
636
636
  'bal-nav-meta-bar-transform-touch': this.isTouch,
637
- } }, this.isDesktop ? (index.h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, index.h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (index.h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render()))) : (index.h("span", null)), index.h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (index.h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, index.h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), index.h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue }, (_a = this.linkItems
637
+ } }, this.isDesktop ? (index.h("bal-nav-meta-bar", { variant: "primary", size: "small", position: "sticky-top", ref: metaBarEl => (this.metaBarEl = metaBarEl) }, index.h("bal-stack", { space: "auto" }, this.linkItems.length > 1 ? (index.h("bal-tabs", { spaceless: true, inverted: true, context: "meta", value: this.activeMetaLinkValue, onBalChange: ev => this.onMetaBarTabChange(ev) }, this.linkItems.map(item => item.render({
638
+ flyoutId: `${this.navId}-menu-flyout`,
639
+ })))) : (index.h("span", null)), index.h("bal-stack", { id: "bal-nav__meta-buttons", space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtMetaBar()))))) : (''), this.isDesktop ? (index.h("bal-nav-menu-bar", { position: "fixed-top", ref: menuBarEl => (this.menuBarEl = menuBarEl) }, index.h("bal-stack", { space: "auto", "space-row": "none", "use-wrap": true }, this.renderLogo(), index.h("bal-tabs", { context: "navigation", accordion: true, spaceless: true, value: this.activeMenuLinkValue }, (_a = this.linkItems
638
640
  .find(item => item.value === this.activeMetaLinkValue)) === null || _a === void 0 ? void 0 : _a.mainLinkItems.map(item => item.render({
641
+ flyoutId: `${this.navId}-menu-flyout`,
639
642
  onClick: () => this.onMenuBarTabChange(item.value),
640
- })))), this.isFlyoutActive ? (index.h("bal-nav-menu-flyout", null, index.h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
643
+ })))), this.isFlyoutActive ? (index.h("bal-nav-menu-flyout", { navId: this.navId }, index.h("bal-nav-link", { role: "listitem", variant: "overview", href: (_c = (_b = this.activeMenuLinkItem) === null || _b === void 0 ? void 0 : _b.overviewLink) === null || _c === void 0 ? void 0 : _c.href, target: (_e = (_d = this.activeMenuLinkItem) === null || _d === void 0 ? void 0 : _d.overviewLink) === null || _e === void 0 ? void 0 : _e.target, onClick: () => { var _a; return this.linkItemClickListener((_a = this.activeMenuLinkItem) === null || _a === void 0 ? void 0 : _a.overviewLink); } }, (_g = (_f = this.activeMenuLinkItem) === null || _f === void 0 ? void 0 : _f.overviewLink) === null || _g === void 0 ? void 0 :
641
644
  _g.label, ' ', ((_j = (_h = this.activeMenuLinkItem) === null || _h === void 0 ? void 0 : _h.overviewLink) === null || _j === void 0 ? void 0 : _j.label) ? '➞' : ''), this.renderGridLinks(this.activeMenuLinkItem))) : (''))) : (''), index.h("div", null, index.h("slot", null))), this.isTouch ? (index.h("bal-nav-meta-bar", { variant: "white", size: "normal" }, index.h("bal-stack", { space: "auto" }, this.renderLogo(), index.h("bal-stack", { space: "x-small", "fit-content": true }, this.metaButtons.map(button => button.renderAtTouchTopMetaBar()), index.h("bal-button", { square: true, color: this.isFlyoutActive ? 'primary' : 'light', icon: this.isFlyoutActive ? 'close' : 'menu-bars', "aria-label": this.isFlyoutActive ? i18nNavBars[this.language].close : i18nNavBars[this.language].open, onClick: ev => this.onTouchToggleFlyout(ev) }))))) : (''), this.isTouch ? (index.h("div", { class: Object.assign(Object.assign({}, flyoutBlock.class()), flyoutBlock.modifier('visible').class(this.isFlyoutActive)) }, index.h("nav", { class: Object.assign({}, flyoutBlock.element('container').class()) }, index.h("ul", { class: Object.assign({}, block.element('mobile-meta-list').class()) }, this.linkItems.map(item => item.renderTouch({
642
645
  activeMetaLinkValue: this.activeMetaLinkValue,
643
646
  activeMenuLinkValue: this.activeMenuLinkValue,
@@ -830,7 +833,7 @@ tslib_es6.__decorate([
830
833
  ], NavLinkGroup.prototype, "createLogger", null);
831
834
  NavLinkGroup.style = BalNavLinkGroupStyle0;
832
835
 
833
- const balNavMenuBarCss = ":root{--bal-nav-menu-bar-background:var(--bal-color-white);--bal-nav-menu-bar-radius:var(--bal-radius-large);--bal-nav-menu-bar-shadow:0 5px 15px rgba(0,0,0,.1)}.bal-nav-menu-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-menu-bar__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-menu-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 1440px){.bal-nav-menu-bar{position:fixed;margin-top:1rem}}.bal-nav-menu-bar--position-fixed-top{position:fixed}.bal-nav-menu-bar__inner{background:var(--bal-nav-menu-bar-background);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{min-height:64px}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow);min-height:80px}}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;min-height:80px}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container::before{position:absolute;content:\"\";height:100%;top:0;left:1rem;right:1rem;background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{-ms-flex-item-align:start;align-self:flex-start;z-index:1;height:auto;padding-top:.8em}@media screen and (min-width: 1024px){.bal-nav-menu-bar .bal-nav__logo{padding-top:1rem}}@media screen and (min-width: 1440px){.bal-nav-menu-bar .bal-nav__logo{padding-top:1.5rem}}.bal-nav-menu-bar-body-padding{padding-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-padding{padding-top:7rem}}.bal-nav-menu-bar-body-margin{margin-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-margin{margin-top:7rem}}.bal-nav-menu-bar-fixed-body-padding{padding-top:8rem}.bal-nav-menu-bar-fixed-body-margin{margin-top:8rem}";
836
+ const balNavMenuBarCss = ":root{--bal-nav-menu-bar-background:var(--bal-color-white);--bal-nav-menu-bar-radius:var(--bal-radius-large);--bal-nav-menu-bar-shadow:0 5px 15px rgba(0,0,0,.1)}.bal-nav-menu-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;z-index:var(--bal-z-index-navigation)}.bal-nav-menu-bar__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav-menu-bar__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav-menu-bar__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav-menu-bar__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav-menu-bar__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav-menu-bar__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-mobile{display:hidden;visibility:hidden}}@media screen and (max-width: 768px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 769px)and (max-width: 1023px){.bal-nav-menu-bar--hidden-tablet{display:hidden;visibility:hidden}}@media screen and (min-width: 1440px){.bal-nav-menu-bar{position:fixed;margin-top:1rem}}.bal-nav-menu-bar--position-fixed-top{position:fixed}.bal-nav-menu-bar__inner{background:var(--bal-nav-menu-bar-background);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none}}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{min-height:64px}@media screen and (min-width: 1440px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow);min-height:80px}}@media screen and (min-width: 1440px)and (max-width: 1539px){.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container{background:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;min-height:80px}.bal-nav-menu-bar__inner>.bal-nav-menu-bar__container::before{position:absolute;content:\"\";height:100%;top:0;left:1rem;right:1rem;background:var(--bal-nav-menu-bar-background);border-radius:var(--bal-nav-menu-bar-radius);-webkit-box-shadow:var(--bal-nav-menu-bar-shadow);box-shadow:var(--bal-nav-menu-bar-shadow)}}.bal-nav-menu-bar .bal-nav__logo{-ms-flex-item-align:start;align-self:flex-start;z-index:1;height:auto;margin-top:.8em}@media screen and (min-width: 1024px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1rem}}@media screen and (min-width: 1440px){.bal-nav-menu-bar .bal-nav__logo{margin-top:1.5rem}}.bal-nav-menu-bar-body-padding{padding-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-padding{padding-top:7rem}}.bal-nav-menu-bar-body-margin{margin-top:1rem}@media screen and (min-width: 1440px){.bal-nav-menu-bar-body-margin{margin-top:7rem}}.bal-nav-menu-bar-fixed-body-padding{padding-top:8rem}.bal-nav-menu-bar-fixed-body-margin{margin-top:8rem}";
834
837
  const BalNavMenuBarStyle0 = balNavMenuBarCss;
835
838
 
836
839
  const NavMenuBar = class {
@@ -877,17 +880,13 @@ const BalNavMenuFlyoutStyle0 = balNavMenuFlyoutCss;
877
880
  const NavMenuFlyout = class {
878
881
  constructor(hostRef) {
879
882
  index.registerInstance(this, hostRef);
880
- this.navMenuFlyoutId = `bal-nav-menu-flyout-${NavMenuFlyOutIds++}`;
881
883
  this.bodyScrollHandler = new scroll.BalScrollHandler();
882
884
  this.isHidden = false;
885
+ this.navId = `bal-nav-x${NavMenuFlyOutIds++}`;
883
886
  }
884
887
  createLogger(log) {
885
888
  this.log = log;
886
889
  }
887
- /**
888
- * PUBLIC PROPERTY API
889
- * ------------------------------------------------------
890
- */
891
890
  /**
892
891
  * LIFECYCLE
893
892
  * ------------------------------------------------------
@@ -925,7 +924,7 @@ const NavMenuFlyout = class {
925
924
  render() {
926
925
  const block = bem.BEM.block('nav-menu-flyout');
927
926
  const line = block.element('line');
928
- return (index.h(index.Host, { id: this.navMenuFlyoutId, class: Object.assign({}, block.class()) }, index.h("div", { class: Object.assign({}, line.class()) }), index.h("div", { class: Object.assign({}, block.element('container').class()) }, index.h("slot", null))));
927
+ return (index.h(index.Host, { id: `${this.navId}-menu-flyout`, class: Object.assign({}, block.class()) }, index.h("div", { class: Object.assign({}, line.class()) }), index.h("div", { class: Object.assign({}, block.element('container').class()) }, index.h("slot", null))));
929
928
  }
930
929
  get el() { return index.getElement(this); }
931
930
  };
package/dist/cjs/bal-navbar_5.cjs.entry.js CHANGED
@@ -8,13 +8,13 @@ const scroll = require('./scroll-73c1b762.js');
8
8
  const browser = require('./browser-1d542d0f.js');
9
9
  const tslib_es6 = require('./tslib.es6-a680968e.js');
10
10
  const helpers = require('./helpers-2a8c8333.js');
11
- const breakpoints_subject = require('./breakpoints.subject-06716a68.js');
12
- const breakpoints_decorator = require('./breakpoints.decorator-47fd06b2.js');
11
+ const breakpoints_subject = require('./breakpoints.subject-0802767f.js');
12
+ const breakpoints_decorator = require('./breakpoints.decorator-e278a735.js');
13
13
  require('./icons.constant-7c82086a.js');
14
14
  require('./config.utils-e4cd49d6.js');
15
15
  require('./device-9f97a845.js');
16
16
  require('./listener-52d2e5fd.js');
17
- require('./tokens.esm-dc93a5d7.js');
17
+ require('./tokens.esm-be397f27.js');
18
18
 
19
19
  const balNavbarCss = ":root{--bal-navbar-background:var(--bal-color-primary);--bal-navbar-light-background:var(--bal-color-white);--bal-navbar-active-menu-background:var(--bal-color-white);--bal-navbar-height:4rem;--bal-navbar-height-desktop:5rem;--bal-navbar-brand-title-text-color:var(--bal-color-text-white);--bal-navbar-brand-title-font-size:var(--bal-text-size-medium);--bal-navbar-brand-title-light-text-color:var(--bal-color-text-primary);--bal-navbar-brand-text-color:var(--bal-color-text-white);--bal-navbar-brand-logo-link-color:var(--bal-color-text-white)}.bal-navbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block}.bal-navbar--context-app:not(.bal-navbar--is-light),.bal-navbar--context-simple:not(.bal-navbar--is-light){background:var(--bal-navbar-background)}.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height);max-height:var(--bal-navbar-height)}@media screen and (min-width: 1024px){.bal-navbar--context-app,.bal-navbar--context-simple{height:var(--bal-navbar-height-desktop);max-height:var(--bal-navbar-height-desktop)}}.bal-navbar__nav{display:-ms-flexbox;display:flex;height:100%;gap:1rem}.bal-navbar__brand{-ms-flex:1;flex:1;gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}@media screen and (min-width: 1024px){.bal-navbar__brand{-ms-flex:initial;flex:initial}}.bal-navbar__brand>a{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;height:100%}.bal-navbar__brand__logo{height:calc(100% - 1rem);-o-object-fit:contain;object-fit:contain}@media screen and (min-width: 1024px){.bal-navbar__brand__logo{height:calc(100% - 2rem)}}.bal-navbar__brand__title{display:none;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.bal-navbar__brand__title>bal-logo{display:none}@media screen and (min-width: 769px),print{.bal-navbar__brand__title{display:inline-block;font-size:var(--bal-navbar-brand-title-font-size);font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);color:var(--bal-navbar-brand-title-text-color)}}@media screen and (min-width: 1024px){.bal-navbar__brand__title{font-size:var(--bal-navbar-brand-title-font-size)}}.bal-navbar__brand--context-app,.bal-navbar__brand--context-simple{color:var(--bal-navbar-brand-text-color)}.bal-navbar__brand--context-app>a,.bal-navbar__brand--context-simple>a{color:var(--bal-navbar-brand-logo-link-color)}.bal-navbar__menu{position:static;display:none;z-index:var(--bal-z-index-navigation)}@media screen and (max-width: 1023px){.bal-navbar__menu--active{position:fixed !important;display:block;background:var(--bal-navbar-active-menu-background)}}@media screen and (max-width: 1023px){.bal-navbar__menu--context-app{padding-top:1rem;padding-bottom:1rem;overflow-y:auto;-ms-flex-direction:column-reverse;flex-direction:column-reverse;top:4rem;left:0;bottom:0;right:0}}@media screen and (min-width: 1024px){.bal-navbar__menu{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;gap:1rem;padding-right:0 !important}}.bal-navbar__menu--context-simple{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex:1;flex:1;gap:1rem}.bal-navbar__menu__start{display:block;margin-bottom:1rem}@media screen and (min-width: 1024px){.bal-navbar__menu__start{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;gap:.5rem;margin-bottom:0}}.bal-navbar__menu__start--context-simple{display:none}.bal-navbar__menu__start--context-meta{-ms-flex-pack:start;justify-content:flex-start}.bal-navbar__menu__end{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center;gap:.5rem}.bal-navbar__menu__end .button-label{word-break:keep-all !important}.bal-navbar__menu__end .bal-button-group{width:100%}@media screen and (max-width: 1023px){.bal-navbar__menu__end .bal-button-group{margin-top:2rem}}.bal-navbar__menu__end--context-simple>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}.bal-navbar__menu__end>.field{-ms-flex:1;flex:1}@media screen and (min-width: 1024px){.bal-navbar__menu__end>.field{-ms-flex-negative:0;flex-shrink:0;-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:center;align-items:center}}.bal-navbar--is-light{background-color:var(--bal-navbar-light-background);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal)}.bal-navbar--is-light .bal-navbar__brand__title{color:var(--bal-navbar-brand-title-light-text-color)}.bal-navbar--is-light bal-logo svg svg,.bal-navbar--is-light bal-logo svg g,.bal-navbar--is-light bal-logo svg path,.bal-navbar--is-light bal-logo svg circle{fill:var(--bal-color-primary)}.bal-navbar__brand__burger.bal-button{margin-left:auto}@media screen and (min-width: 1024px){.bal-navbar__brand__burger.bal-button{display:none}}.bal-navbar__brand__burger--hidden.bal-button{display:none !important}";
20
20
  const BalNavbarStyle0 = balNavbarCss;
package/dist/cjs/bal-option_2.cjs.entry.js CHANGED
@@ -192,6 +192,21 @@ const OptionList = class {
192
192
  * PUBLIC METHODS
193
193
  * ------------------------------------------------------
194
194
  */
195
+ /**
196
+ * Focus the selected visible option in the list, if no option is selected it selects the first one
197
+ */
198
+ async focusSelected() {
199
+ const options = this.options;
200
+ const indexToFocus = this.getSelectedOptionIndex(options);
201
+ if (indexToFocus > 0) {
202
+ this.updateFocus(options, indexToFocus);
203
+ await helpers.waitAfterFramePaint();
204
+ return indexToFocus;
205
+ }
206
+ else {
207
+ return await this.focusFirst();
208
+ }
209
+ }
195
210
  /**
196
211
  * Focus the first visible option in the list
197
212
  * @returns focusIndex
@@ -455,10 +470,19 @@ const OptionList = class {
455
470
  }
456
471
  return undefined;
457
472
  }
473
+ getSelectedOptionIndex(options) {
474
+ for (let index = 0; index < options.length; index++) {
475
+ const option = options[index];
476
+ if (option.selected && !option.hidden) {
477
+ return index;
478
+ }
479
+ }
480
+ return this.focusIndex;
481
+ }
458
482
  getFirstOptionIndex(options) {
459
483
  for (let index = 0; index < options.length; index++) {
460
484
  const option = options[index];
461
- if (!option.disabled) {
485
+ if (!option.disabled && !option.hidden) {
462
486
  return index;
463
487
  }
464
488
  }
@@ -521,7 +545,7 @@ const OptionList = class {
521
545
  render() {
522
546
  const block = bem.BEM.block('option-list');
523
547
  const labelledby = this.labelledby || this.ariaForm.labelId;
524
- return (index.h(index.Host, { class: Object.assign({}, block.class()), id: this.inputId, tabIndex: -1 }, index.h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), index.h("slot", null))));
548
+ return (index.h(index.Host, { class: Object.assign({}, block.class()), id: this.inputId }, index.h("div", Object.assign({ role: "listbox", "aria-labelledby": labelledby, "aria-disabled": this.disabled, class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), index.h("slot", null))));
525
549
  }
526
550
  get el() { return index.getElement(this); }
527
551
  static get watchers() { return {
package/dist/cjs/bal-pagination.cjs.entry.js CHANGED
@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-219b2f52.js');
6
6
  const tslib_es6 = require('./tslib.es6-a680968e.js');
7
7
  const bem = require('./bem-81bc6a2d.js');
8
- const breakpoints_subject = require('./breakpoints.subject-06716a68.js');
8
+ const breakpoints_subject = require('./breakpoints.subject-0802767f.js');
9
9
  const config_default = require('./config.default-5bdd6e3d.js');
10
- const breakpoints_decorator = require('./breakpoints.decorator-47fd06b2.js');
10
+ const breakpoints_decorator = require('./breakpoints.decorator-e278a735.js');
11
11
  const config_decorator = require('./config.decorator-b393a72f.js');
12
12
  require('./helpers-2a8c8333.js');
13
13
  require('./browser-1d542d0f.js');
@@ -15,7 +15,7 @@ require('./icons.constant-7c82086a.js');
15
15
  require('./config.utils-e4cd49d6.js');
16
16
  require('./device-9f97a845.js');
17
17
  require('./listener-52d2e5fd.js');
18
- require('./tokens.esm-dc93a5d7.js');
18
+ require('./tokens.esm-be397f27.js');
19
19
  require('./log-33398c2a.js');
20
20
 
21
21
  function generatePaginationControl(value, totalPages, pageRange) {
@@ -215,15 +215,15 @@ const Pagination = class {
215
215
  }
216
216
  renderEllipsisElement() {
217
217
  const more = bem.BEM.block('pagination').element('nav').element('pagination-list').modifier('more');
218
- return (index.h("li", null, index.h("div", { class: Object.assign({}, more.class()) }, index.h("bal-text", { bold: true, heading: true, inline: true, space: "none" }, "\u2026"))));
218
+ return (index.h("li", { "aria-hidden": 'true' }, index.h("div", { class: Object.assign({}, more.class()) }, index.h("bal-text", { bold: true, heading: true, inline: true, space: "none" }, "\u2026"))));
219
219
  }
220
220
  renderPageElement(pageNumber) {
221
221
  const isActive = this._value === pageNumber;
222
222
  const dot = bem.BEM.block('pagination').element('nav').element('pagination-list').element('dot');
223
223
  if (this.interface === 'small') {
224
- return (index.h("li", null, index.h("span", { class: Object.assign(Object.assign(Object.assign({}, dot.class()), dot.modifier('active').class(isActive)), dot.modifier('inactive').class(!isActive)), onClick: () => this.selectPage(pageNumber) })));
224
+ return (index.h("li", null, index.h("span", { role: "button", "aria-current": isActive ? 'true' : undefined, class: Object.assign(Object.assign(Object.assign({}, dot.class()), dot.modifier('active').class(isActive)), dot.modifier('inactive').class(!isActive)), "aria-label": pageNumber, onClick: () => this.selectPage(pageNumber) })));
225
225
  }
226
- return (index.h("li", null, index.h("bal-button", { square: true, color: isActive ? 'primary' : 'text', onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number", size: this.isMobile || this.size === 'small' ? 'small' : '' }, pageNumber)));
226
+ return (index.h("li", null, index.h("bal-button", { square: true, color: isActive ? 'primary' : 'text', "aria-current": isActive ? 'true' : undefined, onClick: () => this.selectPage(pageNumber), "data-testid": "bal-pagination-page-number", size: this.isMobile || this.size === 'small' ? 'small' : '' }, pageNumber)));
227
227
  }
228
228
  render() {
229
229
  const mobileItems = this.getItems(1);
package/dist/cjs/bal-popover_2.cjs.entry.js CHANGED
@@ -7,14 +7,14 @@ const tslib_es6 = require('./tslib.es6-a680968e.js');
7
7
  const bem = require('./bem-81bc6a2d.js');
8
8
  const browser = require('./browser-1d542d0f.js');
9
9
  const log = require('./log-33398c2a.js');
10
- const breakpoints_subject = require('./breakpoints.subject-06716a68.js');
11
- const breakpoints_decorator = require('./breakpoints.decorator-47fd06b2.js');
10
+ const breakpoints_subject = require('./breakpoints.subject-0802767f.js');
11
+ const breakpoints_decorator = require('./breakpoints.decorator-e278a735.js');
12
12
  require('./helpers-2a8c8333.js');
13
13
  require('./icons.constant-7c82086a.js');
14
14
  require('./config.utils-e4cd49d6.js');
15
15
  require('./device-9f97a845.js');
16
16
  require('./listener-52d2e5fd.js');
17
- require('./tokens.esm-dc93a5d7.js');
17
+ require('./tokens.esm-be397f27.js');
18
18
 
19
19
  var top = 'top';
20
20
  var bottom = 'bottom';
package/dist/cjs/bal-progress-bar.cjs.entry.js CHANGED
@@ -5,17 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  const index = require('./index-219b2f52.js');
6
6
  const tslib_es6 = require('./tslib.es6-a680968e.js');
7
7
  const bem = require('./bem-81bc6a2d.js');
8
- const breakpoints_subject = require('./breakpoints.subject-06716a68.js');
9
- const breakpoints_decorator = require('./breakpoints.decorator-47fd06b2.js');
8
+ const breakpoints_subject = require('./breakpoints.subject-0802767f.js');
9
+ const breakpoints_decorator = require('./breakpoints.decorator-e278a735.js');
10
10
  require('./helpers-2a8c8333.js');
11
11
  require('./browser-1d542d0f.js');
12
12
  require('./icons.constant-7c82086a.js');
13
13
  require('./config.utils-e4cd49d6.js');
14
14
  require('./device-9f97a845.js');
15
15
  require('./listener-52d2e5fd.js');
16
- require('./tokens.esm-dc93a5d7.js');
16
+ require('./tokens.esm-be397f27.js');
17
17
 
18
- const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-line-background:var(--bal-color-primary);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-background);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}";
18
+ const balProgressBarCss = ":root{--bal-progress-bar-background-white:var(--bal-color-white);--bal-progress-bar-background-grey:var(--bal-color-grey-3);--bal-progress-bar-background-purple:var(--bal-color-purple-2);--bal-progress-bar-background-yellow:var(--bal-color-yellow-2);--bal-progress-bar-background-red:var(--bal-color-red-2);--bal-progress-bar-background-green:var(--bal-color-green-2);--bal-progress-bar-line-color-primary:var(--bal-color-primary);--bal-progress-bar-line-color-purple:var(--bal-color-purple-6);--bal-progress-bar-line-color-yellow:var(--bal-color-yellow-6);--bal-progress-bar-line-color-red:var(--bal-color-red-6);--bal-progress-bar-line-color-green:var(--bal-color-green-6);--bal-progress-bar-line-radius:var(--bal-radius-rounded)}.bal-progress-bar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%;min-width:0;height:.25rem}.bal-progress-bar--background-white-of-primary,.bal-progress-bar--background-white-of-purple,.bal-progress-bar--background-white-of-red,.bal-progress-bar--background-white-of-green,.bal-progress-bar--background-white-of-yellow{background:var(--bal-progress-bar-background-white)}.bal-progress-bar--background-grey-of-primary{background:var(--bal-progress-bar-background-grey)}.bal-progress-bar--background-grey-of-purple{background:var(--bal-progress-bar-background-purple)}.bal-progress-bar--background-grey-of-red{background:var(--bal-progress-bar-background-red)}.bal-progress-bar--background-grey-of-green{background:var(--bal-progress-bar-background-green)}.bal-progress-bar--background-grey-of-yellow{background:var(--bal-progress-bar-background-yellow)}.bal-progress-bar__line{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;height:.25rem;width:0;background:var(--bal-progress-bar-line-color-primary);border-top-right-radius:var(--bal-progress-bar-line-radius);border-bottom-right-radius:var(--bal-progress-bar-line-radius)}.bal-progress-bar__line--animated{will-change:width;-webkit-transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:all var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-progress-bar__line--full{border-top-right-radius:0;border-bottom-right-radius:0}.bal-progress-bar__line--color-purple{background:var(--bal-progress-bar-line-color-purple)}.bal-progress-bar__line--color-yellow{background:var(--bal-progress-bar-line-color-yellow)}.bal-progress-bar__line--color-red{background:var(--bal-progress-bar-line-color-red)}.bal-progress-bar__line--color-green{background:var(--bal-progress-bar-line-color-green)}";
19
19
  const BalProgressBarStyle0 = balProgressBarCss;
20
20
 
21
21
  const ProgressBar = class {
@@ -25,6 +25,7 @@ const ProgressBar = class {
25
25
  this.isTouch = breakpoints_subject.balBreakpoints.isTouch; // need this part to improve a none side effect import
26
26
  this.value = 0;
27
27
  this.background = 'white';
28
+ this.color = 'primary';
28
29
  }
29
30
  /**
30
31
  * LIFECYCLE
@@ -68,7 +69,7 @@ const ProgressBar = class {
68
69
  render() {
69
70
  const block = bem.BEM.block('progress-bar');
70
71
  const bemLineEl = block.element('line');
71
- return (index.h(index.Host, { "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}`).class()) }, index.h("div", { class: Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
72
+ return (index.h(index.Host, { "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, index.h("div", { class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
72
73
  }
73
74
  get el() { return index.getElement(this); }
74
75
  };
package/dist/cjs/bal-shape.cjs.entry.js CHANGED
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-219b2f52.js');
6
6
  const bem = require('./bem-81bc6a2d.js');
7
- const tokens_esm = require('./tokens.esm-dc93a5d7.js');
7
+ const tokens_esm = require('./tokens.esm-be397f27.js');
8
8
 
9
9
  const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
10
10
  const BalShapeStyle0 = balShapeCss;
package/dist/cjs/bal-steps.cjs.entry.js CHANGED
@@ -10,9 +10,9 @@ const log = require('./log-33398c2a.js');
10
10
  const index_esm = require('./index.esm-4587dbf0.js');
11
11
  const formInput = require('./form-input-134c5116.js');
12
12
  const balStep_util = require('./bal-step.util-3c009db9.js');
13
- const breakpoints_subject = require('./breakpoints.subject-06716a68.js');
13
+ const breakpoints_subject = require('./breakpoints.subject-0802767f.js');
14
14
  const mutation_decorator = require('./mutation.decorator-af043b68.js');
15
- const breakpoints_decorator = require('./breakpoints.decorator-47fd06b2.js');
15
+ const breakpoints_decorator = require('./breakpoints.decorator-e278a735.js');
16
16
  require('./browser-1d542d0f.js');
17
17
  require('./icons.constant-7c82086a.js');
18
18
  require('./config.utils-e4cd49d6.js');
@@ -20,7 +20,7 @@ require('./index-e6a233be.js');
20
20
  require('./_commonjsHelpers-68cdf74f.js');
21
21
  require('./device-9f97a845.js');
22
22
  require('./listener-52d2e5fd.js');
23
- require('./tokens.esm-dc93a5d7.js');
23
+ require('./tokens.esm-be397f27.js');
24
24
 
25
25
  const StepIcon = ({ item, isMobile }) => {
26
26
  const bemEl = bem.BEM.block('steps').element('nav').element('item').element('icon');
@@ -34,17 +34,17 @@ const StepLabel = ({ item }) => {
34
34
  return (index.h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), "data-testid": "bal-steps-option-label" }, item.label));
35
35
  };
36
36
 
37
- const StepButton = ({ item, isMobile, clickable, onSelectTab }) => {
37
+ const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
38
38
  const bemEl = bem.BEM.block('steps').element('nav').element('item');
39
39
  if (item.invisible) {
40
40
  return;
41
41
  }
42
- return (index.h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
42
+ return (index.h("a", { role: "tab", class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`color-${color}`).class()), bemEl.modifier('done').class(item.done)), bemEl.modifier('active').class(item.active)), bemEl.modifier('failed').class(item.failed)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('passed').class(item.passed)), { 'bal-focusable': !item.disabled && !item.invisible }), "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-steps-option", "aria-disabled": `${item.disabled}`, href: item.href === '' ? 'javascript:;' : item.href, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
43
43
  index.h(StepIcon, { item: item, isMobile: isMobile }),
44
44
  index.h(StepLabel, { item: item })));
45
45
  };
46
46
 
47
- const balStepsCss = "@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;gap:.5rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__carousel__item{-ms-flex:1;flex:1;min-width:3rem}.bal-steps__nav__carousel__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-carousel-item-background-after);border-radius:var(--bal-steps-step-button-carousel-item-radius);margin-top:3px;margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__carousel__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:1.5rem;margin-right:1.5rem}}.bal-steps__nav__carousel__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-carousel-item-passed-background-after)}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled)}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled)}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";
47
+ const balStepsCss = "@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue:var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple:var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green:var(--bal-color-green-2);--bal-steps-step-button-passed-background-green:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red:var(--bal-color-red-2);--bal-steps-step-button-passed-background-red:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow:var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow:var(--bal-color-primary);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item{display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;gap:.5rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-preferred-size:1rem;flex-basis:1rem;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:1;flex-shrink:1;text-decoration:none;cursor:default;position:relative;min-width:3rem;padding-top:6px}.bal-steps__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-steps__nav__item--clickable{cursor:pointer;pointer-events:all}.bal-steps__nav__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-progress-line-background);border-radius:var(--bal-steps-step-button-progress-line-radius);margin-top:3px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:calc(1.5rem - var(--bal-border-width-normal));margin-right:1.5rem}}.bal-steps__nav__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-passed-background)}.bal-steps__nav__carousel__item{-ms-flex:1;flex:1;min-width:3rem}.bal-steps__nav__carousel__item:not(:last-child)::after{content:\" \";display:block;position:absolute;height:var(--bal-border-width-normal);left:50%;right:-50%;top:50%;background-color:var(--bal-steps-step-button-carousel-item-background-after);border-radius:var(--bal-steps-step-button-carousel-item-radius);margin-top:3px;margin-left:1.25rem;margin-right:1.25rem}@media screen and (min-width: 769px),print{.bal-steps__nav__carousel__item:not(:last-child)::after{top:1rem;margin-top:6px;margin-left:1.5rem;margin-right:1.5rem}}.bal-steps__nav__carousel__item--passed:not(:last-child)::after{background-color:var(--bal-steps-step-button-carousel-item-passed-background-after)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__carousel__item:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-light-blue::after{background-color:var(--bal-steps-step-button-passed-background-light-blue)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-purple::after{background-color:var(--bal-steps-step-button-passed-background-purple)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-red::after{background-color:var(--bal-steps-step-button-passed-background-red)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-yellow::after{background-color:var(--bal-steps-step-button-passed-background-yellow)}.bal-steps__nav__carousel__item--passed:not(:last-child).bal-steps__nav__carousel__item--color-green::after{background-color:var(--bal-steps-step-button-passed-background-green)}.bal-steps__nav__item--color-light-blue:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-light-blue)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-light-blue);border-color:var(--bal-steps-step-button-progress-line-background-light-blue);color:var(--bal-color-primary-4)}.bal-steps__nav__item--color-light-blue.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-purple:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-purple);border-color:var(--bal-steps-step-button-progress-line-background-purple)}.bal-steps__nav__item--color-purple.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-green:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-green);border-color:var(--bal-steps-step-button-progress-line-background-green)}.bal-steps__nav__item--color-green.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-yellow:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-yellow);border-color:var(--bal-steps-step-button-progress-line-background-yellow)}.bal-steps__nav__item--color-yellow.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}.bal-steps__nav__item--color-red:not(.bal-steps__nav__item--active,.bal-steps__nav__item--done,.bal-steps__nav__item--failed,.bal-steps__nav__item--disabled) .bal-steps__nav__item__icon{border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__icon{opacity:.6;background:var(--bal-steps-step-button-progress-line-background-red);border-color:var(--bal-steps-step-button-progress-line-background-red)}.bal-steps__nav__item--color-red.bal-steps__nav__item--disabled .bal-steps__nav__item__label{opacity:.6}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}:root{--bal-steps-step-icon-background:var(--bal-color-white);--bal-steps-step-icon-background-active:var(--bal-color-primary);--bal-steps-step-icon-background-disabled:var(--bal-color-grey-2);--bal-steps-step-icon-background-done:var(--bal-color-primary);--bal-steps-step-icon-background-failed:var(--bal-color-danger);--bal-steps-step-button-progress-line-background:var(--bal-form-field-control-border-color);--bal-steps-step-button-passed-background:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-carousel-item-background-after:var(--bal-form-field-control-border-color);--bal-steps-step-button-carousel-item-passed-background-after:var(--bal-form-field-control-border-color-active);--bal-steps-step-button-progress-line-background-light-blue:var(--bal-color-primary-2);--bal-steps-step-button-passed-background-light-blue:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-purple:var(--bal-color-purple-2);--bal-steps-step-button-passed-background-purple:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-green:var(--bal-color-green-2);--bal-steps-step-button-passed-background-green:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-red:var(--bal-color-red-2);--bal-steps-step-button-passed-background-red:var(--bal-color-primary);--bal-steps-step-button-progress-line-background-yellow:var(--bal-color-yellow-2);--bal-steps-step-button-passed-background-yellow:var(--bal-color-primary);--bal-steps-step-border-width:var(--bal-form-field-control-border-width);--bal-steps-step-border-style:var(--bal-form-field-control-border-style);--bal-steps-step-border-color:var(--bal-form-field-control-border-color);--bal-steps-step-border-color-active:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-disabled:var(--bal-form-field-control-disabled-background);--bal-steps-step-border-color-done:var(--bal-form-field-control-border-color-active);--bal-steps-step-border-color-failed:var(--bal-color-danger);--bal-steps-step-icon-radius:var(--bal-radius-rounded);--bal-steps-step-button-progress-line-radius:var(--bal-radius-rounded);--bal-steps-step-button-carousel-item-radius:var(--bal-radius-rounded);--bal-steps-step-label-text-color:var(--bal-color-text-primary-light);--bal-steps-step-label-text-color-done:var(--bal-color-text-primary);--bal-steps-step-label-text-color-active:var(--bal-color-text-primary);--bal-steps-step-label-text-color-failed:var(--bal-color-text-danger);--bal-steps-step-label-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color:var(--bal-color-text-primary);--bal-steps-step-icon-text-color-active:var(--bal-color-text-white);--bal-steps-step-icon-text-color-disabled:var(--bal-color-text-grey);--bal-steps-step-icon-text-color-done:var(--bal-color-text-white);--bal-steps-step-icon-text-color-failed:var(--bal-color-text-white)}.bal-steps__nav__item__icon{position:relative;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;overflow:hidden;font-weight:var(--bal-font-weight-bold);border-radius:var(--bal-steps-step-icon-radius);font-size:var(--bal-text-size-small);height:1.5rem;width:1.5rem;left:calc(50% - .75rem);border:var(--bal-steps-step-border-width) var(--bal-steps-step-border-style) var(--bal-steps-step-border-color);background:var(--bal-steps-step-icon-background);color:var(--bal-steps-step-icon-text-color)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon{height:2rem;width:2rem;left:calc(50% - 1rem);font-size:var(--bal-text-size-normal)}}.bal-steps__nav__item__icon--active{border-color:var(--bal-steps-step-border-color-active);background:var(--bal-steps-step-icon-background-active);color:var(--bal-steps-step-icon-text-color-active)}.bal-steps__nav__item__icon--done{border-color:var(--bal-steps-step-border-color-done);background:var(--bal-steps-step-icon-background-done);color:var(--bal-steps-step-icon-text-color-done)}.bal-steps__nav__item__icon--failed{border-color:var(--bal-steps-step-border-color-failed);background:var(--bal-steps-step-icon-background-failed);color:var(--bal-steps-step-icon-text-color-failed);font-size:var(--bal-text-size-normal)}@media screen and (min-width: 769px),print{.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-tablet)}}@media screen and (min-width: 1024px){.bal-steps__nav__item__icon--failed{font-size:var(--bal-text-size-large-desktop)}}.bal-steps__nav__item__icon--disabled{border-color:var(--bal-steps-step-border-color-disabled);background:var(--bal-steps-step-icon-background-disabled);color:var(--bal-steps-step-icon-text-color-disabled);opacity:.6}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media (hover: hover)and (pointer: fine){.bal-steps__nav__item.bal-focused.bal-steps__nav__item--inverted .bal-steps__nav__item__icon{-webkit-box-shadow:var(--bal-focus-shadow-inverted) !important;box-shadow:var(--bal-focus-shadow-inverted) !important}}.bal-steps__nav__item__label{display:none}@media screen and (min-width: 769px),print{.bal-steps__nav__item__label{display:block;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);text-align:center;width:100%;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-steps-step-label-text-color)}.bal-steps__nav__item__label--done{color:var(--bal-steps-step-label-text-color-done)}.bal-steps__nav__item__label--active{color:var(--bal-steps-step-label-text-color-active)}.bal-steps__nav__item__label--failed{color:var(--bal-steps-step-label-text-color-failed)}.bal-steps__nav__item__label--disabled{color:var(--bal-steps-step-label-text-color-disabled);opacity:.6}}.bal-steps{display:block;position:static}.bal-steps__nav{-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";
48
48
  const BalStepsStyle0 = balStepsCss;
49
49
 
50
50
  const Steps = class {
@@ -123,6 +123,7 @@ const Steps = class {
123
123
  this.store = [];
124
124
  this.options = [];
125
125
  this.clickable = true;
126
+ this.color = 'primary';
126
127
  this.debounce = 0;
127
128
  this.value = undefined;
128
129
  }
@@ -216,9 +217,9 @@ const Steps = class {
216
217
  .join(','), "data-label": this.store
217
218
  .filter(t => this.isActive(t))
218
219
  .map(t => t.label)
219
- .join(',') }, index.h("nav", { role: "tablist", class: Object.assign({}, bemStepsNav.class()) }, index.h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), onBalChange: formInput.stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
220
+ .join(',') }, index.h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, index.h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), htmlRole: '', onBalChange: formInput.stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
220
221
  .filter(step => !step.invisible)
221
- .map(step => (index.h("bal-carousel-item", { key: step.value, class: Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, index.h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), index.h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, index.h("slot", null))));
222
+ .map(step => (index.h("bal-carousel-item", { key: step.value, htmlRole: '', class: Object.assign(Object.assign(Object.assign({}, bemStepsNav.element('carousel').element('item').class()), bemStepsNav.element('carousel').element('item').modifier(`color-${this.color}`).class()), bemStepsNav.element('carousel').element('item').modifier('passed').class(step.passed)) }, index.h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), index.h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, index.h("slot", null))));
222
223
  }
223
224
  get el() { return index.getElement(this); }
224
225
  static get watchers() { return {