@baloise/ds-core 17.0.0 → 17.1.0-nightly.20241209

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 (231) hide show
  1. package/components/all.d.ts +2 -0
  2. package/components/all.js +3 -0
  3. package/components/bal-accordion-details.js +1 -1
  4. package/components/bal-accordion-trigger.js +3 -1
  5. package/components/bal-accordion.js +6 -3
  6. package/components/bal-app.js +1 -91
  7. package/components/bal-app2.js +93 -0
  8. package/components/bal-date.js +3 -1
  9. package/components/bal-doc-app.d.ts +11 -0
  10. package/components/bal-doc-app.js +262 -0
  11. package/components/bal-dropdown2.js +46 -9
  12. package/components/bal-footer.js +10 -5
  13. package/components/bal-list2.js +1 -1
  14. package/components/bal-segment.js +15 -2
  15. package/components/bal-tab-item.js +8 -2
  16. package/components/bal-tabs2.js +18 -12
  17. package/components/bal-textarea.js +3 -1
  18. package/components/index.js +5 -289
  19. package/components/initialize.js +288 -0
  20. package/components/option.js +1 -0
  21. package/components/tokens.esm.js +1 -1
  22. package/dist/baloise-design-system/baloise-design-system.esm.js +1 -1
  23. package/dist/baloise-design-system/baloise-design-system.js +1 -1
  24. package/dist/baloise-design-system/index.esm.js +1 -1
  25. package/dist/baloise-design-system/p-0534c3aeb8.entry.js +1 -0
  26. package/dist/baloise-design-system/{p-faf5c89145.system.entry.js → p-0b59bd26ea.system.entry.js} +1 -1
  27. package/dist/baloise-design-system/p-0fd1b4ed34.entry.js +1 -0
  28. package/dist/baloise-design-system/{p-61c48963c7.system.entry.js → p-17958402c7.system.entry.js} +1 -1
  29. package/dist/baloise-design-system/p-1f3afaa3b9.entry.js +1 -0
  30. package/dist/baloise-design-system/{p-b4ecd87960.system.entry.js → p-212a2dc969.system.entry.js} +1 -1
  31. package/dist/baloise-design-system/p-278aed95.system.js +1 -0
  32. package/dist/baloise-design-system/p-2b19b8a79c.system.entry.js +1 -0
  33. package/dist/baloise-design-system/p-30e72ccc82.system.entry.js +1 -0
  34. package/dist/baloise-design-system/{p-c8caa835.js → p-328d3102.js} +1 -1
  35. package/dist/baloise-design-system/p-34c50dfa1e.entry.js +1 -0
  36. package/dist/baloise-design-system/p-353ce7cb84.system.entry.js +1 -0
  37. package/dist/baloise-design-system/p-3a1bd58a24.entry.js +1 -0
  38. package/dist/baloise-design-system/{p-c7efc6d470.entry.js → p-3af34beecd.entry.js} +1 -1
  39. package/dist/baloise-design-system/p-411fb4661c.system.entry.js +1 -0
  40. package/dist/baloise-design-system/{p-e1b2f86b.system.js → p-456c0b19.system.js} +1 -1
  41. package/dist/baloise-design-system/{p-1e688639.system.js → p-4922c00d.system.js} +1 -1
  42. package/dist/baloise-design-system/{p-3c504ddf38.system.entry.js → p-4c51765862.system.entry.js} +1 -1
  43. package/dist/baloise-design-system/{p-fa363ba3f9.system.entry.js → p-4e5e87370c.system.entry.js} +1 -1
  44. package/dist/baloise-design-system/{p-365fc134.system.js → p-4f48841b.system.js} +1 -1
  45. package/dist/baloise-design-system/p-50b2a9c6.js +1 -1
  46. package/dist/baloise-design-system/{p-3114a84410.entry.js → p-5436dfba0c.entry.js} +1 -1
  47. package/dist/baloise-design-system/p-562c360455.entry.js +1 -0
  48. package/dist/baloise-design-system/{p-cfe42ac458.system.entry.js → p-59ef8c2416.system.entry.js} +1 -1
  49. package/dist/baloise-design-system/{p-c61080a6.js → p-5bdbc48c.js} +1 -1
  50. package/dist/baloise-design-system/{p-9b4da619.js → p-5ed239cc.js} +1 -1
  51. package/dist/baloise-design-system/{p-4bbe4ba6ba.entry.js → p-62c36f9930.entry.js} +1 -1
  52. package/dist/baloise-design-system/{p-85ed9bd051.entry.js → p-695e36b882.entry.js} +1 -1
  53. package/dist/baloise-design-system/{p-10151a65a4.entry.js → p-6f03bc0156.entry.js} +1 -1
  54. package/dist/baloise-design-system/{p-6116192a.js → p-73821518.js} +1 -1
  55. package/dist/baloise-design-system/p-885bb3f27c.entry.js +1 -0
  56. package/dist/baloise-design-system/p-89d02381.js +1 -0
  57. package/dist/baloise-design-system/{p-3149162e9e.entry.js → p-9763307951.entry.js} +1 -1
  58. package/dist/baloise-design-system/p-9e103abfe5.entry.js +1 -0
  59. package/dist/baloise-design-system/{p-e8f93d80ca.system.entry.js → p-9e8f8be35f.system.entry.js} +1 -1
  60. package/dist/baloise-design-system/{p-0ede0fa9b2.entry.js → p-9f263e138f.entry.js} +1 -1
  61. package/dist/baloise-design-system/p-a188a2e8.js +1 -0
  62. package/dist/baloise-design-system/{p-bf1b5db620.system.entry.js → p-a4b4b9c642.system.entry.js} +1 -1
  63. package/dist/baloise-design-system/{p-0215ccdca9.system.entry.js → p-ae4e303d87.system.entry.js} +1 -1
  64. package/dist/baloise-design-system/p-af747e55e6.entry.js +1 -0
  65. package/dist/baloise-design-system/p-b71b047e.system.js +1 -0
  66. package/dist/baloise-design-system/{p-d9bb74c913.system.entry.js → p-bc9ad297d2.system.entry.js} +1 -1
  67. package/dist/baloise-design-system/p-c472c7cf16.system.entry.js +1 -0
  68. package/dist/baloise-design-system/{p-73bd9055.system.js → p-c6cc8eba.system.js} +1 -1
  69. package/dist/baloise-design-system/{p-8d370d87cb.entry.js → p-c87ea21d0e.entry.js} +1 -1
  70. package/dist/baloise-design-system/p-cb52f196.system.js +1 -0
  71. package/dist/baloise-design-system/p-cc4dc17721.system.entry.js +1 -0
  72. package/dist/baloise-design-system/p-ce3173af38.system.entry.js +1 -0
  73. package/dist/baloise-design-system/{p-14eef425da.system.entry.js → p-cfa943b03c.system.entry.js} +1 -1
  74. package/dist/baloise-design-system/p-d2f9ed2b.system.js +1 -1
  75. package/dist/baloise-design-system/{p-ec286609dd.entry.js → p-f8f71b66e3.entry.js} +1 -1
  76. package/dist/baloise-design-system/{p-10985d5e.system.js → p-fc35302a.system.js} +1 -1
  77. package/dist/cjs/app-globals-f2f29e34.js +7 -0
  78. package/dist/cjs/bal-accordion_4.cjs.entry.js +9 -5
  79. package/dist/cjs/bal-carousel_2.cjs.entry.js +3 -3
  80. package/dist/cjs/bal-date.cjs.entry.js +2 -1
  81. package/dist/cjs/bal-doc-app.cjs.entry.js +233 -0
  82. package/dist/cjs/bal-dropdown.cjs.entry.js +43 -10
  83. package/dist/cjs/bal-footer.cjs.entry.js +9 -5
  84. package/dist/cjs/bal-hint_5.cjs.entry.js +3 -3
  85. package/dist/cjs/bal-list_8.cjs.entry.js +4 -4
  86. package/dist/cjs/bal-logo.cjs.entry.js +3 -3
  87. package/dist/cjs/bal-nav_8.cjs.entry.js +3 -3
  88. package/dist/cjs/bal-navbar_5.cjs.entry.js +3 -3
  89. package/dist/cjs/bal-pagination.cjs.entry.js +3 -3
  90. package/dist/cjs/bal-progress-bar.cjs.entry.js +4 -4
  91. package/dist/cjs/bal-segment_2.cjs.entry.js +18 -5
  92. package/dist/cjs/bal-shape.cjs.entry.js +1 -1
  93. package/dist/cjs/bal-steps.cjs.entry.js +3 -3
  94. package/dist/cjs/bal-tab-item_2.cjs.entry.js +26 -17
  95. package/dist/cjs/bal-textarea.cjs.entry.js +2 -1
  96. package/dist/cjs/baloise-design-system.cjs.js +3 -2
  97. package/dist/cjs/{breakpoints.decorator-967c2fd2.js → breakpoints.decorator-2840c865.js} +1 -1
  98. package/dist/cjs/{breakpoints.subject-679bdc55.js → breakpoints.subject-d9037967.js} +1 -1
  99. package/dist/cjs/{app-globals-f5a609c1.js → global-127a79ec.js} +2 -4
  100. package/dist/cjs/index.cjs.js +3 -3
  101. package/dist/cjs/initialize-e7570bc6.js +1 -1
  102. package/dist/cjs/loader.cjs.js +3 -2
  103. package/dist/cjs/{option-4034ca7d.js → option-85af0921.js} +1 -0
  104. package/dist/cjs/{tokens.esm-e4edac35.js → tokens.esm-09a546bd.js} +1 -1
  105. package/dist/cjs/{window-resize.decorator-bb2ea6d8.js → window-resize.decorator-c78ea0d9.js} +1 -1
  106. package/dist/collection/collection-manifest.json +2 -1
  107. package/dist/collection/components/bal-accordion/bal-accordion-details/bal-accordion-details.css +1 -1
  108. package/dist/collection/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.js +20 -1
  109. package/dist/collection/components/bal-accordion/bal-accordion.css +1 -1
  110. package/dist/collection/components/bal-accordion/bal-accordion.js +5 -2
  111. package/dist/collection/components/bal-date/bal-date.js +25 -1
  112. package/dist/collection/components/bal-dropdown/bal-dropdown.css +1 -1
  113. package/dist/collection/components/bal-dropdown/bal-dropdown.js +88 -1
  114. package/dist/collection/components/bal-footer/bal-footer.js +31 -5
  115. package/dist/collection/components/bal-list/bal-list.css +1 -1
  116. package/dist/collection/components/bal-segment/bal-segment.js +15 -2
  117. package/dist/collection/components/bal-tabs/bal-tab-item/bal-tab-item.js +42 -2
  118. package/dist/collection/components/bal-tabs/bal-tabs.css +1 -1
  119. package/dist/collection/components/bal-tabs/bal-tabs.js +21 -2
  120. package/dist/collection/components/bal-tabs/components/tab-button.js +2 -2
  121. package/dist/collection/components/bal-tabs/components/tab-icon.js +1 -1
  122. package/dist/collection/components/bal-tabs/components/tab-label.js +1 -1
  123. package/dist/collection/components/bal-tabs/components/tab-nav.js +6 -3
  124. package/dist/collection/components/bal-textarea/bal-textarea.js +25 -1
  125. package/dist/collection/components/docs/bal-doc-app/bal-doc-app.css +1 -0
  126. package/dist/collection/components/docs/bal-doc-app/bal-doc-app.js +229 -0
  127. package/dist/collection/utils/constants/version.constant.js +1 -1
  128. package/dist/collection/utils/dropdown/events.js +9 -1
  129. package/dist/collection/utils/dropdown/icon.js +6 -3
  130. package/dist/collection/utils/dropdown/option.js +1 -0
  131. package/dist/collection/utils/dropdown/value.js +2 -2
  132. package/dist/esm/app-globals-73dcb8fd.js +5 -0
  133. package/dist/esm/bal-accordion_4.entry.js +9 -5
  134. package/dist/esm/bal-carousel_2.entry.js +3 -3
  135. package/dist/esm/bal-date.entry.js +2 -1
  136. package/dist/esm/bal-doc-app.entry.js +229 -0
  137. package/dist/esm/bal-dropdown.entry.js +43 -10
  138. package/dist/esm/bal-footer.entry.js +9 -5
  139. package/dist/esm/bal-hint_5.entry.js +3 -3
  140. package/dist/esm/bal-list_8.entry.js +4 -4
  141. package/dist/esm/bal-logo.entry.js +3 -3
  142. package/dist/esm/bal-nav_8.entry.js +3 -3
  143. package/dist/esm/bal-navbar_5.entry.js +3 -3
  144. package/dist/esm/bal-pagination.entry.js +3 -3
  145. package/dist/esm/bal-progress-bar.entry.js +4 -4
  146. package/dist/esm/bal-segment_2.entry.js +19 -6
  147. package/dist/esm/bal-shape.entry.js +1 -1
  148. package/dist/esm/bal-steps.entry.js +3 -3
  149. package/dist/esm/bal-tab-item_2.entry.js +26 -17
  150. package/dist/esm/bal-textarea.entry.js +2 -1
  151. package/dist/esm/baloise-design-system.js +3 -2
  152. package/dist/esm/{breakpoints.decorator-9981606e.js → breakpoints.decorator-720a065d.js} +1 -1
  153. package/dist/esm/{breakpoints.subject-ae98d0fa.js → breakpoints.subject-c3a33f84.js} +1 -1
  154. package/dist/esm/{app-globals-4d0448ee.js → global-66c4c2d7.js} +2 -4
  155. package/dist/esm/index.js +4 -4
  156. package/dist/esm/initialize-f93872c4.js +1 -1
  157. package/dist/esm/loader.js +3 -2
  158. package/dist/esm/{option-01553dab.js → option-367a5341.js} +1 -0
  159. package/dist/esm/{tokens.esm-ed9fb455.js → tokens.esm-06404bd4.js} +1 -1
  160. package/dist/esm/{window-resize.decorator-a88002f7.js → window-resize.decorator-a33cbb6b.js} +1 -1
  161. package/dist/esm-es5/app-globals-73dcb8fd.js +1 -0
  162. package/dist/esm-es5/bal-accordion_4.entry.js +1 -1
  163. package/dist/esm-es5/bal-carousel_2.entry.js +1 -1
  164. package/dist/esm-es5/bal-date.entry.js +1 -1
  165. package/dist/esm-es5/bal-doc-app.entry.js +1 -0
  166. package/dist/esm-es5/bal-dropdown.entry.js +1 -1
  167. package/dist/esm-es5/bal-footer.entry.js +1 -1
  168. package/dist/esm-es5/bal-hint_5.entry.js +1 -1
  169. package/dist/esm-es5/bal-list_8.entry.js +1 -1
  170. package/dist/esm-es5/bal-logo.entry.js +1 -1
  171. package/dist/esm-es5/bal-nav_8.entry.js +1 -1
  172. package/dist/esm-es5/bal-navbar_5.entry.js +1 -1
  173. package/dist/esm-es5/bal-pagination.entry.js +1 -1
  174. package/dist/esm-es5/bal-progress-bar.entry.js +1 -1
  175. package/dist/esm-es5/bal-segment_2.entry.js +1 -1
  176. package/dist/esm-es5/bal-shape.entry.js +1 -1
  177. package/dist/esm-es5/bal-steps.entry.js +1 -1
  178. package/dist/esm-es5/bal-tab-item_2.entry.js +1 -1
  179. package/dist/esm-es5/bal-textarea.entry.js +1 -1
  180. package/dist/esm-es5/baloise-design-system.js +1 -1
  181. package/dist/esm-es5/breakpoints.decorator-720a065d.js +1 -0
  182. package/dist/esm-es5/{breakpoints.subject-ae98d0fa.js → breakpoints.subject-c3a33f84.js} +1 -1
  183. package/dist/esm-es5/global-66c4c2d7.js +1 -0
  184. package/dist/esm-es5/index.js +1 -1
  185. package/dist/esm-es5/initialize-f93872c4.js +1 -1
  186. package/dist/esm-es5/loader.js +1 -1
  187. package/dist/esm-es5/{option-01553dab.js → option-367a5341.js} +1 -1
  188. package/dist/esm-es5/{window-resize.decorator-a88002f7.js → window-resize.decorator-a33cbb6b.js} +1 -1
  189. package/dist/html.html-data.json +374 -0
  190. package/dist/types/components/bal-accordion/bal-accordion-trigger/bal-accordion-trigger.d.ts +4 -0
  191. package/dist/types/components/bal-date/bal-date.d.ts +4 -0
  192. package/dist/types/components/bal-dropdown/bal-dropdown.d.ts +13 -0
  193. package/dist/types/components/bal-dropdown/bal-dropdown.interfaces.d.ts +4 -1
  194. package/dist/types/components/bal-footer/bal-footer.d.ts +4 -0
  195. package/dist/types/components/bal-segment/bal-segment.d.ts +1 -0
  196. package/dist/types/components/bal-tabs/bal-tab-item/bal-tab-item.d.ts +10 -0
  197. package/dist/types/components/bal-tabs/bal-tab.type.d.ts +2 -0
  198. package/dist/types/components/bal-tabs/bal-tabs.d.ts +4 -0
  199. package/dist/types/components/bal-tabs/components/tab-button.d.ts +2 -0
  200. package/dist/types/components/bal-tabs/components/tab-nav.d.ts +1 -0
  201. package/dist/types/components/bal-textarea/bal-textarea.d.ts +4 -0
  202. package/dist/types/components/docs/bal-doc-app/bal-doc-app.d.ts +21 -0
  203. package/dist/types/components.d.ts +119 -0
  204. package/dist/types/home/runner/work/design-system/design-system/packages/core/.stencil/packages/icons/src/index.d.ts +82 -0
  205. package/dist/types/utils/dropdown/component.d.ts +1 -0
  206. package/dist/types/utils/dropdown/events.d.ts +2 -0
  207. package/dist/types/utils/dropdown/icon.d.ts +2 -0
  208. package/dist/types/utils/dropdown/value.d.ts +1 -0
  209. package/package.json +7 -7
  210. package/dist/baloise-design-system/p-2f6c32ca97.entry.js +0 -1
  211. package/dist/baloise-design-system/p-4e4fe533.js +0 -1
  212. package/dist/baloise-design-system/p-5353ba1263.entry.js +0 -1
  213. package/dist/baloise-design-system/p-69f82b9b22.entry.js +0 -1
  214. package/dist/baloise-design-system/p-6cadcbe4bb.entry.js +0 -1
  215. package/dist/baloise-design-system/p-7752fa10ea.system.entry.js +0 -1
  216. package/dist/baloise-design-system/p-7f9fe862b6.system.entry.js +0 -1
  217. package/dist/baloise-design-system/p-93e2638280.system.entry.js +0 -1
  218. package/dist/baloise-design-system/p-98f7403c7f.entry.js +0 -1
  219. package/dist/baloise-design-system/p-a7d15ec66b.entry.js +0 -1
  220. package/dist/baloise-design-system/p-af5e974f4c.system.entry.js +0 -1
  221. package/dist/baloise-design-system/p-b57c473d.system.js +0 -1
  222. package/dist/baloise-design-system/p-d0d162c677.system.entry.js +0 -1
  223. package/dist/baloise-design-system/p-dbc0b7c370.entry.js +0 -1
  224. package/dist/baloise-design-system/p-de36076c.system.js +0 -1
  225. package/dist/baloise-design-system/p-f3ef269852.entry.js +0 -1
  226. package/dist/baloise-design-system/p-fd118a1752.system.entry.js +0 -1
  227. package/dist/esm-es5/app-globals-4d0448ee.js +0 -1
  228. package/dist/esm-es5/breakpoints.decorator-9981606e.js +0 -1
  229. /package/dist/baloise-design-system/{p-923b2e35.system.js → p-64f64d32.system.js} +0 -0
  230. /package/dist/baloise-design-system/{p-fc542e26.js → p-946f2e6f.js} +0 -0
  231. /package/dist/esm-es5/{tokens.esm-ed9fb455.js → tokens.esm-06404bd4.js} +0 -0
@@ -4,7 +4,7 @@ import { B as BEM } from './bem.js';
4
4
  import { L as Logger } from './log.js';
5
5
  import { s as stopEventBubbling } from './form-input.js';
6
6
  import { F as FOCUS_KEYS } from './focus-visible.js';
7
- import { m as raf } from './helpers.js';
7
+ import { i as isDescendant, m as raf } from './helpers.js';
8
8
  import { d as defaultBalAriaForm } from './form.js';
9
9
  import { L as ListenTo } from './listen.js';
10
10
  import { a as isSpaceKey, i as isEnterKey, c as isArrowUpKey, f as isArrowLeftKey, b as isArrowDownKey, g as isArrowRightKey, h as isHomeKey, j as isEndKey } from './keyboard.helpers.js';
@@ -141,6 +141,13 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
141
141
  focusOutListener(ev) {
142
142
  this.balBlur.emit(ev);
143
143
  }
144
+ listenToDidAnimate(ev) {
145
+ if (ev && ev.target && isDescendant(ev.target, this.el)) {
146
+ const childRect = this.el.getBoundingClientRect();
147
+ this.maxWidth = childRect.width;
148
+ this.windowResizeListener();
149
+ }
150
+ }
144
151
  breakpointListener(breakpoints) {
145
152
  this.isMobile = breakpoints.mobile;
146
153
  }
@@ -309,7 +316,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
309
316
  render() {
310
317
  const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
311
318
  const block = BEM.block('segment');
312
- return (h(Host, { key: 'f5cf0a37669b14db14104214dd142b8bed5266d6', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '9952482b6bec65e4a7ed05b4cd34d58331805b4e', onSlotchange: this.onSlottedItemsChange })));
319
+ return (h(Host, { key: '3554d8bc4b44417e273a935a70ae89ff87e26d45', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '9271b42436f9c30077a60bcef7847ac04d093052', onSlotchange: this.onSlottedItemsChange })));
313
320
  }
314
321
  get el() { return this; }
315
322
  static get watchers() { return {
@@ -353,6 +360,12 @@ __decorate([
353
360
  __metadata("design:paramtypes", [FocusEvent]),
354
361
  __metadata("design:returntype", void 0)
355
362
  ], Segment.prototype, "focusOutListener", null);
363
+ __decorate([
364
+ ListenTo('balWillAnimate', { target: 'window' }),
365
+ __metadata("design:type", Function),
366
+ __metadata("design:paramtypes", [UIEvent]),
367
+ __metadata("design:returntype", void 0)
368
+ ], Segment.prototype, "listenToDidAnimate", null);
356
369
  __decorate([
357
370
  ListenToBreakpoints(),
358
371
  __metadata("design:type", Function),
@@ -21,6 +21,8 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
21
21
  this.icon = undefined;
22
22
  this.noPanel = false;
23
23
  this.aria = undefined;
24
+ this.subLabel = '';
25
+ this.svg = '';
24
26
  }
25
27
  componentWillLoad() {
26
28
  this.inheritAttributes = inheritTrackingAttributes(this.el);
@@ -55,15 +57,17 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
55
57
  trackingData: this.inheritAttributes,
56
58
  noPanel: this.noPanel,
57
59
  aria: this.aria,
60
+ subLabel: this.subLabel,
61
+ svg: this.svg,
58
62
  };
59
63
  }
60
64
  render() {
61
65
  const hasPanel = !this.noPanel;
62
66
  const noPanelOrInactive = !this.isActive || this.noPanel;
63
- return (h(Host, { key: '403ef9c6f4195a72139922232b759847a698a5d8', id: this.tabPanelID, class: {
67
+ return (h(Host, { key: '73cd7faf737780486e58b71b4c51508e0311e277', id: this.tabPanelID, class: {
64
68
  'bal-tab-item': true,
65
69
  'bal-tab-item--active': this.isActive,
66
- }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'ff4a802972dadebf7240c41c03a233cc17dba24c' })));
70
+ }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'd533d087306ee17ba5b78c9b756db6cf923ef1a5' })));
67
71
  }
68
72
  get el() { return this; }
69
73
  }, [4, "bal-tab-item", {
@@ -79,6 +83,8 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
79
83
  "icon": [513],
80
84
  "noPanel": [4, "no-panel"],
81
85
  "aria": [16],
86
+ "subLabel": [513, "sub-label"],
87
+ "svg": [1],
82
88
  "isActive": [32],
83
89
  "getOptions": [64],
84
90
  "setActive": [64]
@@ -56,15 +56,16 @@ const TabIcon = ({ item, inverted, accordion, isAccordionOpen, isMobile, hasBubb
56
56
  if (inverted) {
57
57
  iconColor = item.disabled ? 'primary-light' : 'white';
58
58
  }
59
- return (h("span", { class: Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)) },
60
- h("bal-icon", { size: isMobile || accordion ? 'small' : '', name: accordion ? 'nav-go-down' : item.icon, color: iconColor, turn: accordion && isAccordionOpen === true && item.active }),
59
+ return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('display-svg').class(item.svg !== undefined)) },
60
+ item.svg ? (h("bal-icon", { svg: item.svg, size: "large", color: "auto" })) : (h("bal-icon", { size: isMobile || accordion ? 'small' : '', name: accordion ? 'nav-go-down' : item.icon, color: iconColor, turn: accordion && isAccordionOpen === true && item.active })),
61
61
  hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
62
62
  };
63
63
 
64
64
  const TabLabel = ({ item, inverted, hasBubble, isVertical, context }) => {
65
65
  const bemEl = BEM.block('tabs').element('nav').element('item').element('label');
66
- return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), "data-testid": "bal-tabs-item-label" },
66
+ return (h("span", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier('with-svg').class(item.svg && item.svg.length > 0)), "data-testid": "bal-tabs-item-label" },
67
67
  item.label,
68
+ item.subLabel && h("span", { class: bemEl.element('sub-label').class() }, item.subLabel),
68
69
  hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
69
70
  };
70
71
 
@@ -79,7 +80,7 @@ const toKebabCase = (string) => {
79
80
  return '';
80
81
  };
81
82
 
82
- const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, }) => {
83
+ const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, hasSubLabelInGroup, dimInactiveElements, }) => {
83
84
  var _a;
84
85
  const bemEl = BEM.block('tabs').element('nav').element('item');
85
86
  if (item.invisible) {
@@ -111,27 +112,30 @@ const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accord
111
112
  if (!isLinkList) {
112
113
  attrs['tabindex'] = item.active ? '0' : '-1';
113
114
  }
114
- return (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(expanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }),
115
- item.icon ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''),
115
+ return (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(expanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }),
116
+ item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''),
116
117
  h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, hasBubble: hasLabelBubble, inverted: inverted, context: context }),
117
118
  accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
118
119
  };
119
120
 
120
- const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, }) => {
121
+ const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, dimInactiveElements, }) => {
121
122
  const bemEl = BEM.block('tabs').element('nav');
122
123
  const tabs = items.filter(tab => !tab.invisible);
123
124
  const isFullHeight = inNavbar && !isTouch;
124
- const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab }));
125
+ const hasSubLabelInGroup = items.some(item => {
126
+ return item.subLabel && item.subLabel.length > 0;
127
+ });
128
+ const Button = ({ item, index }) => (h(TabButton, { item: item, isLinkList: isLinkList, tabsId: tabsId, isFirst: index === 0, isLast: index === tabs.length - 1, isMobile: isMobile, isVertical: isVertical, iconPosition: iconPosition, spaceless: spaceless, inverted: inverted, accordion: accordion, isAccordionOpen: isAccordionOpen, context: context, expanded: expanded, clickable: clickable && !item.disabled, onSelectTab: onSelectTab, hasSubLabelInGroup: hasSubLabelInGroup, dimInactiveElements: dimInactiveElements }));
125
129
  return (h("div", { id: `${tabsId}-nav`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier(`full-height`).class(isFullHeight)), bemEl.modifier(`border`).class(border)), bemEl.modifier(`animated`).class(animated)), bemEl.modifier(`vertical`).class(isVertical)), bemEl.modifier(`expanded`).class(expanded && !isVertical)), bemEl.modifier(`vertical-col-${verticalColSize}`).class(isVertical)) },
126
130
  hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), htmlRole: 'tablist', fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling },
127
- tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, htmlRole: '', class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) },
131
+ tabs.map((tab, index) => (h("bal-carousel-item", { htmlRole: '', class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) },
128
132
  h(Button, { item: tab, index: index })))),
129
133
  h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) }))) : (tabs.map((tab, index) => h(Button, { item: tab, index: index }))),
130
134
  !hasCarousel ? (h("div", { id: `${tabsId}-border`, class: Object.assign(Object.assign(Object.assign({}, bemEl.element('border').class()), bemEl.element('border').modifier(`inverted`).class(inverted)), bemEl.element('border').modifier(`vertical`).class(isVertical)) })) : (''),
131
135
  !hasCarousel ? (h("div", { id: `${tabsId}-line`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.element('line').class()), bemEl.element('line').modifier(`active`).class(lineActive)), bemEl.element('line').modifier(`inverted`).class(inverted)), bemEl.element('line').modifier(`animated`).class(animated)), bemEl.element('line').modifier(`vertical`).class(isVertical)) })) : ('')));
132
136
  };
133
137
 
134
- const balTabsCss = "@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav{display:block;position:relative;-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (min-width: 769px),print{.bal-tabs__nav--vertical-col-one-quarter{-ms-flex:none;flex:none;width:25%}.bal-tabs__nav--vertical-col-one-third{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{-ms-flex:none;flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{-ms-flex:none;flex:none;width:75%}.bal-tabs__nav--vertical-col-full{-ms-flex:none;flex:none;width:100%}}.bal-tabs__nav--vertical{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.bal-tabs__nav--full-height{height:100%}.bal-tabs__nav--expanded{display:-ms-flexbox;display:flex}.bal-tabs__nav__carousel__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__border{position:absolute;background:var(--bal-tabs-tab-nav-border-background);border-radius:var(--bal-tabs-tab-nav-border-radius);height:var(--bal-border-width-normal);left:1px;right:1px;bottom:0}.bal-tabs__nav__border--vertical{width:var(--bal-border-width-normal);height:100%;top:0;right:auto}.bal-tabs__nav__border--inverted{background:var(--bal-tabs-tab-nav-border-background-inverted)}.bal-tabs__nav__line{position:absolute;background:var(--bal-tabs-tab-nav-line-background);border-radius:var(--bal-tabs-tab-nav-line-radius);left:1px;z-index:1}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical){bottom:0;min-width:5rem}.bal-tabs__nav__line--vertical{top:0;min-height:2.5rem}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical).bal-tabs__nav__line--active{height:var(--bal-border-width-normal)}.bal-tabs__nav__line--vertical.bal-tabs__nav__line--active{width:var(--bal-border-width-normal)}.bal-tabs__nav__line--animated{will-change:min-width,width,min-height,height,transform;-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-tabs__nav__line--inverted{background:var(--bal-tabs-tab-nav-line-background-inverted)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item{display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-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;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;cursor:default;gap:.5rem;padding:.25rem .75rem;border-radius:var(--bal-tabs-tab-button-radius);min-width:3rem;min-height:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;background-color:rgba(0,0,0,0);border:unset}@media screen and (min-width: 769px),print{.bal-tabs__nav__item{-ms-flex-direction:row;flex-direction:row;min-height:3.5rem}}.bal-tabs__nav__item--accordion{-ms-flex-direction:row;flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{-ms-flex-direction:column;flex-direction:column}.bal-tabs__nav__item--clickable{cursor:pointer;pointer-events:all}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-hover)}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__icon svg,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__icon g,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__icon path,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__icon circle{fill:var(--bal-tabs-tab-button-icon-text-color-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-active)}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__icon svg,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__icon g,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__icon path,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__icon circle{fill:var(--bal-tabs-tab-button-icon-text-color-active)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-hover)}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__icon svg,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__icon g,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__icon path,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__icon circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-active)}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__icon svg,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__icon g,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__icon path,.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__icon circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-active)}.bal-tabs__nav__item--vertical{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;min-height:2.5rem;padding:.5rem 1rem}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--first{padding-left:0}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--last{padding-right:0}.bal-tabs__nav__item--context-meta{min-height:3rem;height:3rem}.bal-tabs__nav__item--context-navigation{min-height:3rem;height:3rem}@media screen and (min-width: 1024px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1280px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1440px){.bal-tabs__nav__item--context-navigation{min-height:5rem;height:5rem}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__icon{position:relative}.bal-tabs__nav__item__icon__bubble{position:absolute;right:-0.75rem;top:-0.25rem}@media screen and (min-width: 769px),print{.bal-tabs__nav__item__icon__bubble{right:-0.625rem;top:-0.25rem}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__label{display:block;position:relative;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);text-align:center;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-disabled)}.bal-tabs__nav__item__label--inverted{font-family:var(--bal-font-family-text);color:var(--bal-tabs-tab-label-text-color-inverted)}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-inverted-disabled)}.bal-tabs__nav__item__label--inverted{font-weight:var(--bal-font-weight-regular);letter-spacing:.1085px}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--active{font-weight:var(--bal-font-weight-bold);letter-spacing:0}.bal-tabs__nav__item__label__bubble{position:absolute;right:-0.5rem;top:-0.5rem}.bal-tabs__nav__item__label--vertical{text-align:left;width:auto;white-space:normal}.bal-tabs__nav__item__label--context-meta{font-size:var(--bal-text-size-small)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}:root{--bal-tabs-tab-nav-border-background:var(--bal-color-border);--bal-tabs-tab-nav-border-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-nav-line-background:var(--bal-color-border-primary);--bal-tabs-tab-nav-line-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-button-radius:var(--bal-radius-normal);--bal-tabs-tab-nav-border-radius:var(--bal-radius-rounded);--bal-tabs-tab-nav-line-radius:var(--bal-radius-rounded);--bal-tabs-tab-button-label-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-icon-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-label-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-icon-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-label-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-icon-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-label-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-button-icon-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-label-text-color:var(--bal-color-text-primary);--bal-tabs-tab-label-text-color-disabled:var(--bal-color-text-grey);--bal-tabs-tab-label-text-color-inverted:var(--bal-color-text-white);--bal-tabs-tab-label-text-color-inverted-disabled:var(--bal-color-text-primary-light)}.bal-tabs{display:block;min-width:0}.bal-tabs--fullwidth{width:100%}.bal-tabs--vertical{display:block}@media screen and (min-width: 769px),print{.bal-tabs--vertical{display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px),print{.bal-tabs--navbar{height:100%}}.bal-tab-item{width:100%;display:none}.bal-tab-item--active{display:block}.bal-tabs__tabs__content{width:100%}.bal-tabs--animated{-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-tabs--animated .bal-tabs__tabs__content{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-tabs--accordion .bal-tabs__tabs__content{overflow:hidden;will-change:max-height}.bal-tabs--accordion.bal-tabs--collapsing .bal-tabs__tabs__content{max-height:0 !important}.bal-tabs--accordion.bal-tabs--collapsed .bal-tabs__tabs__content{display:none}.bal-tabs--accordion.bal-tabs--expanding .bal-tabs__tabs__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-tabs--accordion .bal-tabs,.bal-tabs--accordion .bal-tabs__tabs__content{-webkit-transition:none !important;transition:none !important}}";
138
+ const balTabsCss = "@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav{display:block;position:relative;-webkit-overflow-scrolling:touch;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}@media screen and (min-width: 769px),print{.bal-tabs__nav--vertical-col-one-quarter{-ms-flex:none;flex:none;width:25%}.bal-tabs__nav--vertical-col-one-third{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-half{-ms-flex:none;flex:none;width:33.3333%}.bal-tabs__nav--vertical-col-two-thirds{-ms-flex:none;flex:none;width:66.6666%}.bal-tabs__nav--vertical-col-three-quarters{-ms-flex:none;flex:none;width:75%}.bal-tabs__nav--vertical-col-full{-ms-flex:none;flex:none;width:100%}}.bal-tabs__nav--vertical{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content}.bal-tabs__nav--full-height{height:100%}.bal-tabs__nav--expanded{display:-ms-flexbox;display:flex}.bal-tabs__nav__carousel__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__border{position:absolute;background:var(--bal-tabs-tab-nav-border-background);border-radius:var(--bal-tabs-tab-nav-border-radius);height:var(--bal-border-width-normal);left:1px;right:1px;bottom:0}.bal-tabs__nav__border--vertical{width:var(--bal-border-width-normal);height:100%;top:0;right:auto}.bal-tabs__nav__border--inverted{background:var(--bal-tabs-tab-nav-border-background-inverted)}.bal-tabs__nav__line{position:absolute;background:var(--bal-tabs-tab-nav-line-background);border-radius:var(--bal-tabs-tab-nav-line-radius);left:1px;z-index:1}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical){bottom:0;min-width:5rem}.bal-tabs__nav__line--vertical{top:0;min-height:2.5rem}.bal-tabs__nav__line:not(.bal-tabs__nav__line--vertical).bal-tabs__nav__line--active{height:var(--bal-border-width-normal)}.bal-tabs__nav__line--vertical.bal-tabs__nav__line--active{width:var(--bal-border-width-normal)}.bal-tabs__nav__line--animated{will-change:min-width,width,min-height,height,transform;-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-tabs__nav__line--inverted{background:var(--bal-tabs-tab-nav-line-background-inverted)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item{display:-ms-flexbox;display:flex;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-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;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;text-decoration:none;cursor:default;gap:.5rem;padding:.25rem .75rem;border-radius:var(--bal-tabs-tab-button-radius);min-width:3rem;min-height:3rem;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-drag:none;background-color:rgba(0,0,0,0);border:unset}@media screen and (min-width: 769px),print{.bal-tabs__nav__item{-ms-flex-direction:row;flex-direction:row;min-height:3.5rem}}@media screen and (max-width: 768px){.bal-tabs__nav__item--group-has-sub-label{height:5rem}}.bal-tabs__nav__item--dim-inactive-elements:not(.bal-tabs__nav__item--active){opacity:.6}.bal-tabs__nav__item--display-svg{-ms-flex-direction:row;flex-direction:row}@media screen and (max-width: 768px){.bal-tabs__nav__item--display-svg:not(.bal-tabs__nav__item--display-svg.bal-tabs__nav__item--active){-ms-flex:0 0 auto;flex:0 0 auto;min-width:3rem;width:6rem;padding:.25rem}}.bal-tabs__nav__item--accordion{-ms-flex-direction:row;flex-direction:row}.bal-tabs__nav__item--hidden{display:none !important;visibility:hidden !important}.bal-tabs__nav__item--expanded{-ms-flex:1;flex:1;width:5rem;min-width:5rem}.bal-tabs__nav__item--icon-position-vertical{-ms-flex-direction:column;flex-direction:column}.bal-tabs__nav__item--clickable{cursor:pointer;pointer-events:all}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled):active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-active)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-hover)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:hover-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-hover)}}.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active .bal-tabs__nav__item__label{color:var(--bal-tabs-tab-button-label-text-color-inverted-active)}.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) svg,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) g,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) path,.bal-tabs__nav__item__icon:not(.bal-tabs__nav__item:not(.bal-tabs__nav__item--disabled).bal-tabs__nav__item--inverted:active-display-svg) circle{fill:var(--bal-tabs-tab-button-icon-text-color-inverted-active)}.bal-tabs__nav__item--vertical{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start;min-height:2.5rem;padding:.5rem 1rem}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--first{padding-left:0}.bal-tabs__nav__item--spaceless.bal-tabs__nav__item--last{padding-right:0}.bal-tabs__nav__item--context-meta{min-height:3rem;height:3rem}.bal-tabs__nav__item--context-navigation{min-height:3rem;height:3rem}@media screen and (min-width: 1024px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1280px){.bal-tabs__nav__item--context-navigation{min-height:4rem;height:4rem}}@media screen and (min-width: 1440px){.bal-tabs__nav__item--context-navigation{min-height:5rem;height:5rem}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__icon{position:relative}.bal-tabs__nav__item__icon__bubble{position:absolute;right:-0.75rem;top:-0.25rem}@media screen and (min-width: 769px),print{.bal-tabs__nav__item__icon__bubble{right:-0.625rem;top:-0.25rem}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}.bal-tabs__nav__item__label{display:block;position:relative;font-family:var(--bal-font-family-title);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);text-align:center;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:var(--bal-tabs-tab-label-text-color)}.bal-tabs__nav__item__label--with-svg{text-align:left;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-tabs__nav__item__label--with-svg:not(.bal-tabs__nav__item__label--active){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0}}.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-disabled)}.bal-tabs__nav__item__label--inverted{font-family:var(--bal-font-family-text);color:var(--bal-tabs-tab-label-text-color-inverted)}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--disabled{color:var(--bal-tabs-tab-label-text-color-inverted-disabled)}.bal-tabs__nav__item__label--inverted{font-weight:var(--bal-font-weight-regular);letter-spacing:.1085px}.bal-tabs__nav__item__label--inverted.bal-tabs__nav__item__label--active{font-weight:var(--bal-font-weight-bold);letter-spacing:0}.bal-tabs__nav__item__label__bubble{position:absolute;right:-0.5rem;top:-0.5rem}.bal-tabs__nav__item__label--vertical{text-align:left;width:auto;white-space:normal}.bal-tabs__nav__item__label--context-meta{font-size:var(--bal-text-size-small)}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused{-webkit-box-shadow:var(--bal-focus-shadow-inset) !important;box-shadow:var(--bal-focus-shadow-inset) !important}}@media (hover: hover)and (pointer: fine){.bal-tabs__nav__item.bal-focused.bal-tabs__nav__item--inverted{-webkit-box-shadow:var(--bal-focus-shadow-inverted-inset) !important;box-shadow:var(--bal-focus-shadow-inverted-inset) !important}}:root{--bal-tabs-tab-nav-border-background:var(--bal-color-border);--bal-tabs-tab-nav-border-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-nav-line-background:var(--bal-color-border-primary);--bal-tabs-tab-nav-line-background-inverted:var(--bal-color-border-inverted);--bal-tabs-tab-button-radius:var(--bal-radius-normal);--bal-tabs-tab-nav-border-radius:var(--bal-radius-rounded);--bal-tabs-tab-nav-line-radius:var(--bal-radius-rounded);--bal-tabs-tab-button-label-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-icon-text-color-hover:var(--bal-color-light-blue-5);--bal-tabs-tab-button-label-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-icon-text-color-active:var(--bal-color-primary-6);--bal-tabs-tab-button-label-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-icon-text-color-inverted-hover:var(--bal-color-light-blue-2);--bal-tabs-tab-button-label-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-button-icon-text-color-inverted-active:var(--bal-color-text-info);--bal-tabs-tab-label-text-color:var(--bal-color-text-primary);--bal-tabs-tab-label-text-color-disabled:var(--bal-color-text-grey);--bal-tabs-tab-label-text-color-inverted:var(--bal-color-text-white);--bal-tabs-tab-label-text-color-inverted-disabled:var(--bal-color-text-primary-light)}.bal-tabs{display:block;min-width:0}.bal-tabs--fullwidth{width:100%}.bal-tabs--vertical{display:block}@media screen and (min-width: 769px),print{.bal-tabs--vertical{display:-ms-flexbox;display:flex}}@media screen and (min-width: 769px),print{.bal-tabs--navbar{height:100%}}.bal-tab-item{width:100%;display:none}.bal-tab-item--active{display:block}.bal-tabs__tabs__content{width:100%}.bal-tabs--animated{-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-tabs--animated .bal-tabs__tabs__content{-webkit-transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing);transition:max-height var(--bal-animation-transition-duration) var(--bal-animation-transition-easing)}.bal-tabs--accordion .bal-tabs__tabs__content{overflow:hidden;will-change:max-height}.bal-tabs--accordion.bal-tabs--collapsing .bal-tabs__tabs__content{max-height:0 !important}.bal-tabs--accordion.bal-tabs--collapsed .bal-tabs__tabs__content{display:none}.bal-tabs--accordion.bal-tabs--expanding .bal-tabs__tabs__content{max-height:0}@media (prefers-reduced-motion: reduce){.bal-tabs--accordion .bal-tabs,.bal-tabs--accordion .bal-tabs__tabs__content{-webkit-transition:none !important;transition:none !important}}";
135
139
  const BalTabsStyle0 = balTabsCss;
136
140
 
137
141
  const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
@@ -422,6 +426,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
422
426
  this.verticalColSize = 'one-third';
423
427
  this.selectOnMobile = false;
424
428
  this.value = undefined;
429
+ this.dimInactiveElements = false;
425
430
  }
426
431
  createLogger(log) {
427
432
  this.log = log;
@@ -696,13 +701,13 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
696
701
  const contentPart = expanded ? 'content expanded' : 'content';
697
702
  const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
698
703
  const isLinkList = !this.isTabList;
699
- return (h(Host, { key: '5cf2cfcf105000a24aabdb6bec167155bfe64d91', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
704
+ return (h(Host, { key: '6d5c18adc358a123e9630ac61854716b3a524af8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": this.store
700
705
  .filter(t => this.isTabActive(t))
701
706
  .map(t => t.value)
702
707
  .join(','), "data-label": this.store
703
708
  .filter(t => this.isTabActive(t))
704
709
  .map(t => t.label)
705
- .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab })), h("div", { key: '9b07748ace351ce78cd552229f2694e349592d3d', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '099b85a0205426e163c8b43320cb007c7ea1afc9', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '6262221556c0f514b4c42138796b7d92097887d0' })))));
710
+ .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, inverted: isInverted, animated: this.animated, context: this.context, border: this.border, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, hasCarousel: hasCarousel, iconPosition: this.iconPosition, verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: '109d4147369f72da04c9f6b48a8959159ccf1d8c', part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { key: '89333c42c5f26f47e99bab3bdba2051e7cfcac14', id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", { key: '834c6b06a516dbcedfa4f65d902899202fee9809' })))));
706
711
  }
707
712
  get el() { return this; }
708
713
  static get watchers() { return {
@@ -730,6 +735,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
730
735
  "verticalColSize": [1, "vertical-col-size"],
731
736
  "selectOnMobile": [4, "select-on-mobile"],
732
737
  "value": [1025],
738
+ "dimInactiveElements": [4, "dim-inactive-elements"],
733
739
  "isAccordionOpen": [32],
734
740
  "accordionState": [32],
735
741
  "isNavbarOpen": [32],
@@ -46,6 +46,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
46
46
  this.name = this.inputId;
47
47
  this.invalid = false;
48
48
  this.autocapitalize = 'none';
49
+ this.autocomplete = 'off';
49
50
  this.autofocus = false;
50
51
  this.debounce = 0;
51
52
  this.placeholder = undefined;
@@ -118,7 +119,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
118
119
  const value = this.getValue();
119
120
  const block = BEM.block('textarea');
120
121
  const elNative = block.element('native');
121
- return (h(Host, { key: 'ad09331d104fcf7279b9cc2c403fa4d032b47c32', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '00278cc7b951ca19e01dd9157506185782eb8ee4', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '70ac340a5c61d29a355e115bdec0635eca4367dc' }))));
122
+ return (h(Host, { key: 'ab14f059d3785673e315d1201f2f6f400def090f', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '9cacf375b46777e0f49ab12d7b0bf7a36223c116', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: 'ccf5fb267d10b8b51532797a4ee71e4ee9fab52e' }))));
122
123
  }
123
124
  get el() { return this; }
124
125
  static get watchers() { return {
@@ -129,6 +130,7 @@ const Textarea = /*@__PURE__*/ proxyCustomElement(class Textarea extends HTMLEle
129
130
  "name": [1],
130
131
  "invalid": [4],
131
132
  "autocapitalize": [1],
133
+ "autocomplete": [1],
132
134
  "autofocus": [4],
133
135
  "debounce": [2],
134
136
  "placeholder": [1],
@@ -1,4 +1,3 @@
1
- import { setPlatformHelpers } from '@stencil/core/internal/client';
2
1
  export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
3
2
  export { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
4
3
  export { i as i18nBalDate } from './bal-date.i18n.js';
@@ -6,10 +5,7 @@ export { i as i18nBalClose } from './bal-close.i18n.js';
6
5
  export { i as i18nBalTimeInput } from './bal-time-input.i18n.js';
7
6
  export { i as i18nBalInputStepper } from './bal-input-stepper.i18n.js';
8
7
  export { i as i18nBalLabel } from './bal-label.i18n.js';
9
- import { b as balBrowser } from './browser.js';
10
- export { b as balBrowser } from './browser.js';
11
- import { d as defaultConfig } from './config.default.js';
12
- export { d as defaultConfig } from './config.default.js';
8
+ export { a as BalSnackbarController, B as BalToastController, c as balSnackbarController, b as balToastController, i as initialize, i as initializeBaloiseDesignSystem, s as setupConfig } from './initialize.js';
13
9
  export { n as newBalOption } from './option.js';
14
10
  export { n as newBalStepOption } from './bal-step.util.js';
15
11
  export { n as newBalTabOption } from './bal-tab.util.js';
@@ -17,6 +13,8 @@ import { g as getAppRoot, c as componentOnReady } from './helpers.js';
17
13
  export { c as componentOnReady, f as deepReady, g as getAppRoot, i as isDescendant, s as shallowReady, h as wait, b as waitAfterFramePaint, d as waitAfterIdleCallback, e as waitAfterLargestContentfulPaintCallback, w as waitForComponent, a as waitForDesignSystem } from './helpers.js';
18
14
  export { s as scrollToFirstInvalidField } from './form.js';
19
15
  export { B as BalScrollHandler } from './scroll.js';
16
+ import { b as balBrowser } from './browser.js';
17
+ export { b as balBrowser } from './browser.js';
20
18
  import { b as balDevice } from './device.js';
21
19
  export { B as BalDevice, b as balDevice } from './device.js';
22
20
  export { I as INVALID_VALUE } from './mask-util.js';
@@ -24,160 +22,11 @@ import { g as getOverlays, a as getOverlay } from './overlays.js';
24
22
  import { B as BalWindowResizeListener, b as balBreakpoints } from './breakpoints.subject.js';
25
23
  export { c as BalBreakpointSubject, d as BalBreakpointsUtil, a as balBreakpointSubject, b as balBreakpoints } from './breakpoints.subject.js';
26
24
  export { a as attachToConfig, d as detachFromConfig, o as onBalConfigChange, u as updateBalAllowedLanguages, b as updateBalAnimated, c as updateBalIcons, e as updateBalLanguage, f as updateBalRegion, g as useBalConfig } from './config.utils.js';
25
+ export { d as defaultConfig } from './config.default.js';
27
26
  import { S as Subject } from './listener.js';
28
27
  export { B as BalSwipeSubject } from './swipe.subject.js';
29
28
  export { B as BalDate } from './date.js';
30
29
 
31
- const BALOISE_SESSION_KEY = 'baloise-persist-config';
32
-
33
- class Config {
34
- constructor() {
35
- this._componentObservers = [];
36
- this._observers = [];
37
- this._config = defaultConfig;
38
- }
39
- get locale() {
40
- return `${this._config.language}-${this._config.region}`;
41
- }
42
- get region() {
43
- return this._config.region;
44
- }
45
- set region(region) {
46
- if (region !== this._config.region) {
47
- this._config.region = region;
48
- this._notify();
49
- }
50
- }
51
- get language() {
52
- return this._config.language;
53
- }
54
- set language(language) {
55
- if (language !== this._config.language) {
56
- if (this._config.allowedLanguages.includes(language)) {
57
- this._config.language = language;
58
- }
59
- else {
60
- this._config.language = this._config.fallbackLanguage;
61
- }
62
- this._notify();
63
- }
64
- }
65
- get allowedLanguages() {
66
- return this._config.allowedLanguages;
67
- }
68
- set allowedLanguages(allowedLanguages) {
69
- if (allowedLanguages !== this._config.allowedLanguages) {
70
- this._config.allowedLanguages = allowedLanguages;
71
- this._notify();
72
- }
73
- }
74
- get icons() {
75
- return this._config.icons;
76
- }
77
- set icons(icons) {
78
- this._config.icons = Object.assign(Object.assign({}, this._config.icons), icons);
79
- this._notify();
80
- }
81
- get logger() {
82
- return this._config.logger;
83
- }
84
- set logger(logger) {
85
- this._config.logger = Object.assign({}, logger);
86
- this._notify();
87
- }
88
- get animated() {
89
- return this._config.animated;
90
- }
91
- set animated(animated) {
92
- this._config.animated = animated;
93
- this._notify();
94
- }
95
- get httpFormSubmit() {
96
- return this._config.httpFormSubmit;
97
- }
98
- set httpFormSubmit(httpFormSubmit) {
99
- this._config.httpFormSubmit = httpFormSubmit;
100
- this._notify();
101
- }
102
- attach(observer) {
103
- const isExist = this._observers.includes(observer);
104
- if (isExist) {
105
- return console.log('Subject: Observer has been attached already.');
106
- }
107
- this._observers.push(observer);
108
- observer.configChanged(this._config);
109
- }
110
- detach(observer) {
111
- const observerIndex = this._observers.indexOf(observer);
112
- if (observerIndex === -1) {
113
- return console.log('Subject: Nonexistent observer.');
114
- }
115
- this._observers.splice(observerIndex, 1);
116
- }
117
- attachComponent(observer) {
118
- const isExist = this._componentObservers.includes(observer);
119
- if (isExist) {
120
- return console.log('Subject: Observer has been attached already.');
121
- }
122
- this._componentObservers.push(observer);
123
- observer.configChanged(this._config);
124
- }
125
- detachComponent(observer) {
126
- const observerIndex = this._componentObservers.indexOf(observer);
127
- if (observerIndex === -1) {
128
- return console.log('Subject: Nonexistent observer.');
129
- }
130
- this._componentObservers.splice(observerIndex, 1);
131
- }
132
- toString() {
133
- return JSON.stringify(this._config);
134
- }
135
- reset(config) {
136
- this._config = Object.assign(Object.assign(Object.assign({}, this._config), config), { icons: Object.assign(Object.assign({}, this._config.icons), config.icons) });
137
- this._notify(false);
138
- }
139
- _notify(all = true) {
140
- for (const observer of this._componentObservers) {
141
- observer.configChanged(this._config);
142
- }
143
- if (all) {
144
- for (const observer of this._observers) {
145
- observer.configChanged(this._config);
146
- }
147
- }
148
- if (balBrowser.hasWindow) {
149
- saveConfig(window, this._config);
150
- }
151
- }
152
- }
153
- const config = /*@__PURE__*/ new Config();
154
- const configFromSession = (win) => {
155
- try {
156
- const configStr = win.sessionStorage.getItem(BALOISE_SESSION_KEY);
157
- return configStr !== null ? JSON.parse(configStr) : {};
158
- }
159
- catch (e) {
160
- return {};
161
- }
162
- };
163
- const saveConfig = (win, c) => {
164
- try {
165
- win.sessionStorage.setItem(BALOISE_SESSION_KEY, JSON.stringify(c));
166
- }
167
- catch (e) {
168
- return;
169
- }
170
- };
171
-
172
- const setupConfig = (userConfig = {}, win = {}) => {
173
- if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
174
- win = window;
175
- }
176
- win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
177
- config.reset(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), userConfig), { icons: Object.assign(Object.assign({}, configFromSession(win).icons), userConfig.icons) }));
178
- win.BaloiseDesignSystem.config = config;
179
- };
180
-
181
30
  const i18nBalFieldLabel = {
182
31
  de: {
183
32
  optional: ' (optional)',
@@ -211,139 +60,6 @@ const i18nBalFieldLabel = {
211
60
  },
212
61
  };
213
62
 
214
- class BalNoticeController {
215
- constructor(options) {
216
- this.options = options;
217
- this.container = null;
218
- this.queue = [];
219
- this.preQueue = [];
220
- this.queueLimit = 5;
221
- }
222
- create(options) {
223
- if (balBrowser.hasDocument) {
224
- this.setupContainer();
225
- const clone = this.findClone(options);
226
- if (clone === undefined) {
227
- const el = document.createElement(this.options.tag);
228
- Object.assign(el, options);
229
- el.addEventListener('balClose', ev => {
230
- this.removeFromQueue(ev.detail);
231
- });
232
- this.preQueue.push(el);
233
- this.updateQueue();
234
- return el;
235
- }
236
- return clone;
237
- }
238
- }
239
- setQueue(queueLimit) {
240
- this.queueLimit = queueLimit;
241
- }
242
- async dismissAll() {
243
- var _a;
244
- const elements = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.options.tag);
245
- if (elements) {
246
- const closingQueue = [];
247
- for (let index = 0; index < elements.length; index++) {
248
- const el = elements[index];
249
- if (el.close) {
250
- closingQueue.push(el.close());
251
- }
252
- }
253
- await Promise.all(closingQueue);
254
- }
255
- }
256
- /**
257
- * @deprecated use dismissAll instead
258
- */
259
- async clearAll() {
260
- console.warn('[DEPRECATED] - use dismissAll() instead');
261
- return this.dismissAll();
262
- }
263
- findClone(options) {
264
- for (let index = 0; index < this.queue.length; index++) {
265
- const el = this.queue[index];
266
- if (el.message === options.message && el.color === options.color) {
267
- return el;
268
- }
269
- }
270
- return undefined;
271
- }
272
- setupContainer() {
273
- if (balBrowser.hasDocument) {
274
- const containerId = `${this.options.tag}-container`;
275
- this.container = document.getElementById(containerId);
276
- if (this.container)
277
- return;
278
- if (!this.container) {
279
- this.container = document.createElement('bal-notices');
280
- this.container.setAttribute('interface', this.options.tag.replace('bal-', ''));
281
- this.container.id = containerId;
282
- }
283
- document.body.appendChild(this.container);
284
- }
285
- }
286
- updateQueue() {
287
- var _a;
288
- if (this.queue.length < this.queueLimit) {
289
- const el = this.preQueue.shift();
290
- if (el && this.container) {
291
- this.queue.push(el);
292
- this.container.insertAdjacentElement('beforeend', el);
293
- }
294
- }
295
- if (this.queue.length === 0) {
296
- (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
297
- }
298
- }
299
- removeFromQueue(toastId) {
300
- this.queue = this.queue.filter(el => el.id !== toastId);
301
- setTimeout(() => this.updateQueue(), 0);
302
- }
303
- }
304
-
305
- class BalToastController extends BalNoticeController {
306
- constructor() {
307
- super({
308
- tag: 'bal-toast',
309
- });
310
- }
311
- create(options) {
312
- return super.create(options);
313
- }
314
- }
315
- const balToastController = new BalToastController();
316
-
317
- class BalSnackbarController extends BalNoticeController {
318
- constructor() {
319
- super({
320
- tag: 'bal-snackbar',
321
- });
322
- }
323
- create(options) {
324
- return super.create(options);
325
- }
326
- }
327
- const balSnackbarController = new BalSnackbarController();
328
-
329
- // generated by .build/version.js
330
- const VERSION = '17.0.0';
331
-
332
- const initializeBaloiseDesignSystem = (userConfig = {}, platformConfig = undefined, win = {}) => {
333
- if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
334
- win = window;
335
- }
336
- win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
337
- if (platformConfig) {
338
- setPlatformHelpers(platformConfig);
339
- }
340
- setupConfig(Object.assign(Object.assign({}, userConfig), platformConfig), win);
341
- win.BaloiseDesignSystem.toastController = balToastController;
342
- win.BaloiseDesignSystem.snackbarController = balSnackbarController;
343
- win.BaloiseDesignSystem.initialize = () => setupConfig(win.BaloiseDesignSystem.config, win);
344
- win.BaloiseDesignSystem.version = VERSION;
345
- };
346
-
347
63
  const newBalCheckboxOption = (option) => {
348
64
  return Object.assign(Object.assign({ interface: 'checkbox', labelHidden: false, flat: false, disabled: false, readonly: false, required: false, nonSubmit: false, invalid: false, checked: false }, option), { label: '', html: option.label });
349
65
  };
@@ -461,4 +177,4 @@ const isPlatform = (winOrPlatform, platform) => {
461
177
  const NewBalOptionValue = newBalOptionValue;
462
178
  const NewBalSingleOptionValue = newBalSingleOptionValue;
463
179
 
464
- export { BalModalController, BalOrientationSubject, BalSnackbarController, BalToastController, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, balSnackbarController, balToastController, getPlatforms, hasTouchSupport, i18nBalFieldLabel, initializeBaloiseDesignSystem as initialize, initializeBaloiseDesignSystem, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue, setupConfig };
180
+ export { BalModalController, BalOrientationSubject, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, getPlatforms, hasTouchSupport, i18nBalFieldLabel, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue };