@baloise/ds-core 16.3.0 → 16.4.0-nightly.20240916

package/components/bal-stack2.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 
-const balStackCss = ".bal-stack{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;height:100%;width:100%;gap:1rem;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.bal-stack--use-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.bal-stack--fit-content{-ms-flex:unset;flex:unset;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-stack--layout-horizontal{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.bal-stack--layout-horizontal-reverse{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical-reverse{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-top-center{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--align-top-end{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-start{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--align-end{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-bottom-start{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-bottom-center{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-bottom-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--px-none{padding-left:0;padding-right:0}.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small);padding-right:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-tablet);padding-right:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-desktop);padding-right:var(--bal-space-xx-small-desktop)}}.bal-stack--px-x-small{padding-left:var(--bal-space-x-small);padding-right:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-tablet);padding-right:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-desktop);padding-right:var(--bal-space-x-small-desktop)}}.bal-stack--px-small{padding-left:var(--bal-space-small);padding-right:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--px-small{padding-left:var(--bal-space-small-tablet);padding-right:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-small{padding-left:var(--bal-space-small-desktop);padding-right:var(--bal-space-small-desktop)}}.bal-stack--px-normal{padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--px-normal{padding-left:var(--bal-space-normal-tablet);padding-right:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-normal{padding-left:var(--bal-space-normal-desktop);padding-right:var(--bal-space-normal-desktop)}}.bal-stack--px-medium{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--px-medium{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-medium{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop)}}.bal-stack--px-large{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--px-large{padding-left:var(--bal-space-large-tablet);padding-right:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-large{padding-left:var(--bal-space-large-desktop);padding-right:var(--bal-space-large-desktop)}}.bal-stack--px-x-large{padding-left:var(--bal-space-x-large);padding-right:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-tablet);padding-right:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-desktop);padding-right:var(--bal-space-x-large-desktop)}}.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large);padding-right:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-tablet);padding-right:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-desktop);padding-right:var(--bal-space-xx-large-desktop)}}.bal-stack--py-none{padding-top:0;padding-bottom:0}.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small);padding-bottom:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-tablet);padding-bottom:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-desktop);padding-bottom:var(--bal-space-xx-small-desktop)}}.bal-stack--py-x-small{padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-tablet);padding-bottom:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-desktop);padding-bottom:var(--bal-space-x-small-desktop)}}.bal-stack--py-small{padding-top:var(--bal-space-small);padding-bottom:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--py-small{padding-top:var(--bal-space-small-tablet);padding-bottom:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-small{padding-top:var(--bal-space-small-desktop);padding-bottom:var(--bal-space-small-desktop)}}.bal-stack--py-normal{padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--py-normal{padding-top:var(--bal-space-normal-tablet);padding-bottom:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-normal{padding-top:var(--bal-space-normal-desktop);padding-bottom:var(--bal-space-normal-desktop)}}.bal-stack--py-medium{padding-top:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--py-medium{padding-top:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-medium{padding-top:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-stack--py-large{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--py-large{padding-top:var(--bal-space-large-tablet);padding-bottom:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-large{padding-top:var(--bal-space-large-desktop);padding-bottom:var(--bal-space-large-desktop)}}.bal-stack--py-x-large{padding-top:var(--bal-space-x-large);padding-bottom:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-tablet);padding-bottom:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-desktop);padding-bottom:var(--bal-space-x-large-desktop)}}.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large);padding-bottom:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-tablet);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-desktop);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stack--space-auto{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-none{gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-none{gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-none{gap:0}}.bal-stack--space-xx-small{gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-x-small{gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-x-small{gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-small{gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-small{gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-small{gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-small{gap:var(--bal-space-small-desktop)}}.bal-stack--space-medium{gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-medium{gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-medium{gap:var(--bal-space-medium-desktop)}}.bal-stack--space-large{gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-large{gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-large{gap:var(--bal-space-large-desktop)}}.bal-stack--space-x-large{gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-x-large{gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-large{gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-xx-large{gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-row-auto{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-row-none{row-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-row-none{row-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-row-none{row-gap:0}}.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-row-small{row-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-small{row-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-small{row-gap:var(--bal-space-small-desktop)}}.bal-stack--space-row-medium{row-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-row-large{row-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-large{row-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-large{row-gap:var(--bal-space-large-desktop)}}.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-column-auto{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small);-moz-column-gap:var(--bal-space-xx-small);column-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-tablet);-moz-column-gap:var(--bal-space-xx-small-tablet);column-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-desktop);-moz-column-gap:var(--bal-space-xx-small-desktop);column-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small);-moz-column-gap:var(--bal-space-x-small);column-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-tablet);-moz-column-gap:var(--bal-space-x-small-tablet);column-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-desktop);-moz-column-gap:var(--bal-space-x-small-desktop);column-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small);-moz-column-gap:var(--bal-space-small);column-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-tablet);-moz-column-gap:var(--bal-space-small-tablet);column-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-desktop);-moz-column-gap:var(--bal-space-small-desktop);column-gap:var(--bal-space-small-desktop)}}.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium);-moz-column-gap:var(--bal-space-medium);column-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-tablet);-moz-column-gap:var(--bal-space-medium-tablet);column-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-desktop);-moz-column-gap:var(--bal-space-medium-desktop);column-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large);-moz-column-gap:var(--bal-space-large);column-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-tablet);-moz-column-gap:var(--bal-space-large-tablet);column-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-desktop);-moz-column-gap:var(--bal-space-large-desktop);column-gap:var(--bal-space-large-desktop)}}.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large);-moz-column-gap:var(--bal-space-x-large);column-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-tablet);-moz-column-gap:var(--bal-space-x-large-tablet);column-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-desktop);-moz-column-gap:var(--bal-space-x-large-desktop);column-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large);-moz-column-gap:var(--bal-space-xx-large);column-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-tablet);-moz-column-gap:var(--bal-space-xx-large-tablet);column-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-desktop);-moz-column-gap:var(--bal-space-xx-large-desktop);column-gap:var(--bal-space-xx-large-desktop)}}.bal-stack>bal-radio{margin-top:-0.25rem}.bal-stack>.bal-text,.bal-stack>.bal-heading,.bal-stack>.bal-heading:not(:last-child),.bal-stack>.title,.bal-stack>.subtitle,.bal-stack>.is-link,.bal-stack>p{margin:0}";
+const balStackCss = ".bal-stack{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;height:100%;width:100%;gap:1rem;-ms-flex-wrap:nowrap;flex-wrap:nowrap}.bal-stack--use-wrap{-ms-flex-wrap:wrap;flex-wrap:wrap}.bal-stack--fit-content{-ms-flex:unset;flex:unset;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-stack--layout-horizontal{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.bal-stack--layout-horizontal-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse;-ms-flex-align:center;align-items:center}.bal-stack--layout-vertical-reverse{-ms-flex-direction:column-reverse;flex-direction:column-reverse;-ms-flex-align:start;align-items:flex-start}.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-top-center{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--align-top-end{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-start{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--align-end{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--align-bottom-start{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--align-bottom-center{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-top-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-top-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:start;justify-content:flex-start}.bal-stack--layout-vertical.bal-stack--align-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:center;justify-content:center}.bal-stack--layout-vertical.bal-stack--align-bottom-start{-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-center{-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--layout-vertical.bal-stack--align-bottom-end{-ms-flex-align:end;align-items:flex-end;-ms-flex-pack:end;justify-content:flex-end}.bal-stack--px-none{padding-left:0;padding-right:0}.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small);padding-right:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-tablet);padding-right:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-small{padding-left:var(--bal-space-xx-small-desktop);padding-right:var(--bal-space-xx-small-desktop)}}.bal-stack--px-x-small{padding-left:var(--bal-space-x-small);padding-right:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-tablet);padding-right:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-small{padding-left:var(--bal-space-x-small-desktop);padding-right:var(--bal-space-x-small-desktop)}}.bal-stack--px-small{padding-left:var(--bal-space-small);padding-right:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--px-small{padding-left:var(--bal-space-small-tablet);padding-right:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-small{padding-left:var(--bal-space-small-desktop);padding-right:var(--bal-space-small-desktop)}}.bal-stack--px-normal{padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--px-normal{padding-left:var(--bal-space-normal-tablet);padding-right:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-normal{padding-left:var(--bal-space-normal-desktop);padding-right:var(--bal-space-normal-desktop)}}.bal-stack--px-medium{padding-left:var(--bal-space-medium);padding-right:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--px-medium{padding-left:var(--bal-space-medium-tablet);padding-right:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-medium{padding-left:var(--bal-space-medium-desktop);padding-right:var(--bal-space-medium-desktop)}}.bal-stack--px-large{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--px-large{padding-left:var(--bal-space-large-tablet);padding-right:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-large{padding-left:var(--bal-space-large-desktop);padding-right:var(--bal-space-large-desktop)}}.bal-stack--px-x-large{padding-left:var(--bal-space-x-large);padding-right:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-tablet);padding-right:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-x-large{padding-left:var(--bal-space-x-large-desktop);padding-right:var(--bal-space-x-large-desktop)}}.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large);padding-right:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-tablet);padding-right:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--px-xx-large{padding-left:var(--bal-space-xx-large-desktop);padding-right:var(--bal-space-xx-large-desktop)}}.bal-stack--py-none{padding-top:0;padding-bottom:0}.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small);padding-bottom:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-tablet);padding-bottom:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-small{padding-top:var(--bal-space-xx-small-desktop);padding-bottom:var(--bal-space-xx-small-desktop)}}.bal-stack--py-x-small{padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-tablet);padding-bottom:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-small{padding-top:var(--bal-space-x-small-desktop);padding-bottom:var(--bal-space-x-small-desktop)}}.bal-stack--py-small{padding-top:var(--bal-space-small);padding-bottom:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--py-small{padding-top:var(--bal-space-small-tablet);padding-bottom:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-small{padding-top:var(--bal-space-small-desktop);padding-bottom:var(--bal-space-small-desktop)}}.bal-stack--py-normal{padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal)}@media screen and (min-width: 769px),print{.bal-stack--py-normal{padding-top:var(--bal-space-normal-tablet);padding-bottom:var(--bal-space-normal-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-normal{padding-top:var(--bal-space-normal-desktop);padding-bottom:var(--bal-space-normal-desktop)}}.bal-stack--py-medium{padding-top:var(--bal-space-medium);padding-bottom:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--py-medium{padding-top:var(--bal-space-medium-tablet);padding-bottom:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-medium{padding-top:var(--bal-space-medium-desktop);padding-bottom:var(--bal-space-medium-desktop)}}.bal-stack--py-large{padding-top:var(--bal-space-large);padding-bottom:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--py-large{padding-top:var(--bal-space-large-tablet);padding-bottom:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-large{padding-top:var(--bal-space-large-desktop);padding-bottom:var(--bal-space-large-desktop)}}.bal-stack--py-x-large{padding-top:var(--bal-space-x-large);padding-bottom:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-tablet);padding-bottom:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-x-large{padding-top:var(--bal-space-x-large-desktop);padding-bottom:var(--bal-space-x-large-desktop)}}.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large);padding-bottom:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-tablet);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--py-xx-large{padding-top:var(--bal-space-xx-large-desktop);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stack--space-auto{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-none{gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-none{gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-none{gap:0}}.bal-stack--space-xx-small{gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-small{gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-x-small{gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-x-small{gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-small{gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-small{gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-small{gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-small{gap:var(--bal-space-small-desktop)}}.bal-stack--space-medium{gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-medium{gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-medium{gap:var(--bal-space-medium-desktop)}}.bal-stack--space-large{gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-large{gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-large{gap:var(--bal-space-large-desktop)}}.bal-stack--space-x-large{gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-x-large{gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-x-large{gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-xx-large{gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-xx-large{gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-row-auto{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-row-none{row-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-row-none{row-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-row-none{row-gap:0}}.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-small{row-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-small{row-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-row-small{row-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-row-small{row-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-small{row-gap:var(--bal-space-small-desktop)}}.bal-stack--space-row-medium{row-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-medium{row-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-row-large{row-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-large{row-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-large{row-gap:var(--bal-space-large-desktop)}}.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-x-large{row-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-row-xx-large{row-gap:var(--bal-space-xx-large-desktop)}}.bal-stack--space-column-auto{-ms-flex-pack:justify;justify-content:space-between}.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}@media screen and (min-width: 769px),print{.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}@media screen and (min-width: 1024px){.bal-stack--space-column-none{-webkit-column-gap:0;-moz-column-gap:0;column-gap:0}}.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small);-moz-column-gap:var(--bal-space-xx-small);column-gap:var(--bal-space-xx-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-tablet);-moz-column-gap:var(--bal-space-xx-small-tablet);column-gap:var(--bal-space-xx-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-small{-webkit-column-gap:var(--bal-space-xx-small-desktop);-moz-column-gap:var(--bal-space-xx-small-desktop);column-gap:var(--bal-space-xx-small-desktop)}}.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small);-moz-column-gap:var(--bal-space-x-small);column-gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-tablet);-moz-column-gap:var(--bal-space-x-small-tablet);column-gap:var(--bal-space-x-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-small{-webkit-column-gap:var(--bal-space-x-small-desktop);-moz-column-gap:var(--bal-space-x-small-desktop);column-gap:var(--bal-space-x-small-desktop)}}.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small);-moz-column-gap:var(--bal-space-small);column-gap:var(--bal-space-small)}@media screen and (min-width: 769px),print{.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-tablet);-moz-column-gap:var(--bal-space-small-tablet);column-gap:var(--bal-space-small-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-small{-webkit-column-gap:var(--bal-space-small-desktop);-moz-column-gap:var(--bal-space-small-desktop);column-gap:var(--bal-space-small-desktop)}}.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium);-moz-column-gap:var(--bal-space-medium);column-gap:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-tablet);-moz-column-gap:var(--bal-space-medium-tablet);column-gap:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-medium{-webkit-column-gap:var(--bal-space-medium-desktop);-moz-column-gap:var(--bal-space-medium-desktop);column-gap:var(--bal-space-medium-desktop)}}.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large);-moz-column-gap:var(--bal-space-large);column-gap:var(--bal-space-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-tablet);-moz-column-gap:var(--bal-space-large-tablet);column-gap:var(--bal-space-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-large{-webkit-column-gap:var(--bal-space-large-desktop);-moz-column-gap:var(--bal-space-large-desktop);column-gap:var(--bal-space-large-desktop)}}.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large);-moz-column-gap:var(--bal-space-x-large);column-gap:var(--bal-space-x-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-tablet);-moz-column-gap:var(--bal-space-x-large-tablet);column-gap:var(--bal-space-x-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-x-large{-webkit-column-gap:var(--bal-space-x-large-desktop);-moz-column-gap:var(--bal-space-x-large-desktop);column-gap:var(--bal-space-x-large-desktop)}}.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large);-moz-column-gap:var(--bal-space-xx-large);column-gap:var(--bal-space-xx-large)}@media screen and (min-width: 769px),print{.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-tablet);-moz-column-gap:var(--bal-space-xx-large-tablet);column-gap:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stack--space-column-xx-large{-webkit-column-gap:var(--bal-space-xx-large-desktop);-moz-column-gap:var(--bal-space-xx-large-desktop);column-gap:var(--bal-space-xx-large-desktop)}}.bal-stack>bal-radio{margin-top:-0.25rem}.bal-stack>.bal-text,.bal-stack>.bal-heading,.bal-stack>.bal-heading:not(:last-child),.bal-stack>.title,.bal-stack>.subtitle,.bal-stack>.is-link,.bal-stack>p{margin:0}";
 const BalStackStyle0 = balStackCss;
 
 const Stack = /*@__PURE__*/ proxyCustomElement(class Stack extends HTMLElement {

package/components/bal-steps.js

@@ -3,7 +3,7 @@ import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { m as debounceEvent } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
-import { a as areArraysEqual } from './index.esm.js';
+import { b as areArraysEqual } from './index.esm.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { n as newBalStepOption } from './bal-step.util.js';
 import { d as defineCustomElement$a } from './bal-button2.js';
@@ -31,17 +31,17 @@ const StepLabel = ({ item }) => {
     return (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));
 };
 
-const StepButton = ({ item, isMobile, clickable, onSelectTab }) => {
+const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
     const bemEl = BEM.block('steps').element('nav').element('item');
     if (item.invisible) {
         return;
     }
-    return (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) },
+    return (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) },
         h(StepIcon, { item: item, isMobile: isMobile }),
         h(StepLabel, { item: item })));
 };
 
-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}";
+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}";
 const BalStepsStyle0 = balStepsCss;
 
 const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {
@@ -121,6 +121,7 @@ const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {
         this.store = [];
         this.options = [];
         this.clickable = true;
+        this.color = 'primary';
         this.debounce = 0;
         this.value = undefined;
     }
@@ -214,9 +215,9 @@ const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {
                 .join(','), "data-label": this.store
                 .filter(t => this.isActive(t))
                 .map(t => t.label)
-                .join(',') }, h("nav", { role: "tablist", class: Object.assign({}, bemStepsNav.class()) }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
+                .join(',') }, h("nav", { class: Object.assign({}, bemStepsNav.class()), role: "tablist", "aria-live": "polite" }, h("bal-carousel", { class: Object.assign({}, bemStepsNav.element('carousel').class()), htmlRole: '', onBalChange: stopEventBubbling, controls: "small", "items-per-view": "auto", steps: 3 }, steps
             .filter(step => !step.invisible)
-            .map(step => (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)) }, h(StepButton, { item: step, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
+            .map(step => (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)) }, h(StepButton, { item: step, color: this.color, isMobile: this.isMobile, clickable: this.clickable && !step.disabled, onSelectTab: this.onSelectTab })))))), h("div", { id: this.stepsId, class: Object.assign({}, block.element('steps__content').class()) }, h("slot", null))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -228,6 +229,7 @@ const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {
 }, [4, "bal-steps", {
         "options": [16],
         "clickable": [4],
+        "color": [1],
         "debounce": [2],
         "value": [1025],
         "isMobile": [32],

package/components/bal-tab-item.js

@@ -19,6 +19,8 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         this.invisible = false;
         this.prevent = false;
         this.icon = undefined;
+        this.noPanel = false;
+        this.aria = undefined;
     }
     componentWillLoad() {
         this.inheritAttributes = inheritTrackingAttributes(this.el);
@@ -51,13 +53,17 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
             prevent: this.prevent,
             navigate: this.balNavigate,
             trackingData: this.inheritAttributes,
+            noPanel: this.noPanel,
+            aria: this.aria,
         };
     }
     render() {
-        return (h(Host, { id: this.tabPanelID, role: "tabpanel", "aria-label": this.label, "aria-hidden": !this.isActive ? 'true' : 'false', tabindex: this.isActive ? '0' : '-1', class: {
+        const hasPanel = !this.noPanel;
+        const noPanelOrInactive = !this.isActive || this.noPanel;
+        return (h(Host, { id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            } }, h("slot", null)));
+            }, 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", null)));
     }
     get el() { return this; }
 }, [4, "bal-tab-item", {
@@ -71,6 +77,8 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         "invisible": [516],
         "prevent": [4],
         "icon": [513],
+        "noPanel": [4, "no-panel"],
+        "aria": [16],
         "isActive": [32],
         "getOptions": [64],
         "setActive": [64]

package/components/bal-tabs2.js

@@ -1,7 +1,7 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { a as areArraysEqual } from './index.esm.js';
-import { l as raf, e as deepReady, t as transitionEndAsync, m as debounceEvent, o as hasParent, p as isChildOfEventTarget, i as isDescendant } from './helpers.js';
+import { b as areArraysEqual } from './index.esm.js';
+import { l as raf, e as deepReady, t as transitionEndAsync, m as debounceEvent, o as hasParent, p as isChildOfEventTarget, i as isDescendant, b as waitAfterFramePaint } from './helpers.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { n as newBalTabOption } from './bal-tab.util.js';
@@ -67,7 +67,19 @@ const TabLabel = ({ item, inverted, hasBubble, isVertical, context }) => {
         hasBubble ? (h("bal-badge", { class: Object.assign({}, bemEl.element('bubble').class()), size: "small" }, item.bubble)) : ('')));
 };
 
-const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, }) => {
+const toKebabCase = (string) => {
+    if (typeof string === 'string') {
+        return string
+            .replace(/([a-z])([0-9])/g, '$1-$2')
+            .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+            .replace(/[\s_]+/g, '-')
+            .toLowerCase();
+    }
+    return '';
+};
+
+const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accordion, isAccordionOpen, isLinkList, inverted, expanded, spaceless, clickable, iconPosition, context, onSelectTab, }) => {
+    var _a;
     const bemEl = BEM.block('tabs').element('nav').element('item');
     if (item.invisible) {
         return;
@@ -80,28 +92,38 @@ const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accord
     const hasLabelBubble = (!hasIcon && hasBubble && !accordion) ||
         (hasBubble && !isMobile && iconPosition === 'horizontal' && !accordion) ||
         (hasBubble && isVertical && !accordion);
-    const TagType = item.href === undefined || item.href === '' ? 'button' : 'a';
-    const attrs = TagType === 'button'
-        ? { type: 'button' }
+    const isTabButton = item.href === undefined || item.href === '';
+    const TagType = isTabButton ? 'button' : 'a';
+    const attrs = isTabButton
+        ? {
+            'type': 'button',
+            'role': 'tab',
+            'aria-controls': ((_a = item.aria) === null || _a === void 0 ? void 0 : _a.controls) || item.tabPanelID || undefined,
+            'aria-expanded': item.active ? 'true' : 'false',
+            'aria-disabled': `${item.disabled}`,
+            'aria-label': item.label,
+        }
         : {
             href: item.href,
             target: item.target,
         };
-    return (h(TagType, Object.assign({ id: `${tabsId}-button-${TabButtonIds++}`, role: "tab", 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": item.active ? 'true' : 'false', "aria-disabled": `${item.disabled}`, "aria-label": item.label, "aria-controls": item.tabPanelID }, attrs, { onClick: (ev) => onSelectTab(ev, item) }),
+    if (!isLinkList) {
+        attrs['tabindex'] = item.active ? '0' : '-1';
+    }
+    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) }),
         item.icon ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''),
         h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, hasBubble: hasLabelBubble, inverted: inverted, context: context }),
         accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));
 };
-let TabButtonIds = 0;
 
-const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, }) => {
+const TabNav = ({ items, tabsId, hasCarousel, isVertical, inNavbar, isMobile, isTouch, lineActive, isLinkList, border, accordion, isAccordionOpen, inverted, clickable, animated, spaceless, expanded, verticalColSize, iconPosition, context, onSelectTab, }) => {
     const bemEl = BEM.block('tabs').element('nav');
     const tabs = items.filter(tab => !tab.invisible);
     const isFullHeight = inNavbar && !isTouch;
-    const Button = ({ item, index }) => (h(TabButton, { item: item, 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 }));
-    return (h("div", { role: "tablist", 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)) },
-        hasCarousel ? (h("bal-carousel", { id: `${tabsId}-carousel`, class: Object.assign({}, bemEl.element('carousel').class()), fullHeight: isFullHeight, border: border, inverted: inverted, controls: "small", "items-per-view": "auto", steps: 3, onBalChange: stopEventBubbling },
-            tabs.map((tab, index) => (h("bal-carousel-item", { key: tab.value, class: Object.assign(Object.assign({}, bemEl.element('carousel').element('item').class()), bemEl.element('carousel').element('item').modifier('expanded').class(expanded)) },
+    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 }));
+    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)) },
+        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 },
+            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)) },
                 h(Button, { item: tab, index: index })))),
             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 }))),
         !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)) })) : (''),
@@ -137,8 +159,8 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
                 this.store = newStore;
             }
             else if (!this.optionalTabSelection && !this.accordion && this.value === undefined && this.store.length > 0) {
-                const firstStep = this.store[0];
-                this.value = firstStep.value;
+                const firstTab = this.store[0];
+                this.value = firstTab.value;
             }
         };
         this.setActiveItem = () => {
@@ -150,7 +172,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         };
         this.setActiveContent = () => {
             if (this.options.length === 0) {
-                this.items.forEach(item => item.setActive(this.isActive(item)));
+                this.items.forEach(item => item.setActive(this.isTabActive(item)));
             }
         };
         this.getLineSize = (element, padding) => {
@@ -345,25 +367,26 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
                 console.warn('[WARN] - Could not read tab options');
             }
         };
-        this.onSelectTab = async (ev, step) => {
-            if (step.prevent || step.disabled || !this.clickable) {
+        this.onSelectTab = async (ev, tab) => {
+            if (tab.prevent || tab.disabled || !this.clickable) {
                 stopEventBubbling(ev);
             }
-            if (!step.disabled && this.clickable) {
+            if (!tab.disabled && this.clickable) {
                 if (this.accordion) {
-                    if (step.value === this.value) {
+                    if (tab.value === this.value) {
                         this.toggleAccordionState();
                     }
                     else {
                         this.expandAccordion();
                     }
                 }
-                if (step.navigate) {
-                    step.navigate.emit(ev);
+                if (tab.navigate) {
+                    tab.navigate.emit(ev);
                 }
-                if (step.value !== this.value) {
-                    this.balChange.emit(step.value);
-                    await this.select(step);
+                if (tab.value !== this.value) {
+                    this.balChange.emit(tab.value);
+                    await this.select(tab);
+                    await this.focus(tab);
                 }
             }
         };
@@ -461,6 +484,26 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         isChildOfEventTarget(ev, this.el, () => this.animateLine());
         this.isUsedInNavbar(ev);
     }
+    listenToKeyDown(ev) {
+        if (this.isTabList) {
+            if (this.vertical !== false) {
+                if (ev.code === 'ArrowDown') {
+                    this.tabListSelectNext(ev);
+                }
+                else if (ev.code === 'ArrowUp') {
+                    this.tabListSelectPrevious(ev);
+                }
+            }
+            else {
+                if (ev.code === 'ArrowRight') {
+                    this.tabListSelectNext(ev);
+                }
+                else if (ev.code === 'ArrowLeft') {
+                    this.tabListSelectPrevious(ev);
+                }
+            }
+        }
+    }
     isUsedInNavbar(ev) {
         const target = ev.target;
         const parentNavbar = target.closest('bal-navbar');
@@ -512,11 +555,17 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
      * PRIVATE METHODS
      * ------------------------------------------------------
      */
+    get isTabList() {
+        return this.store.filter(tab => !!tab.href).length === 0;
+    }
     get items() {
         return Array.from(this.el.querySelectorAll(`#${this.tabsId} > bal-tab-item`));
     }
-    isActive(step) {
-        return step.value === this.value;
+    isTabActive(tab) {
+        return tab.value === this.value;
+    }
+    isTabVisible(tab) {
+        return !tab.hidden;
     }
     parseVertical() {
         if (this.vertical === 'true' || this.vertical === '') {
@@ -554,6 +603,73 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
     getCarouselElement() {
         return this.el.querySelector(`#${this.tabsId}-carousel`);
     }
+    /**
+     * PRIVATE Tab Navigation with Arrow Keys
+     * ------------------------------------------------------
+     */
+    findNextTab(previous = false) {
+        const indexOfActive = this.store.findIndex(t => this.isTabActive(t));
+        let tabs = this.store.map((tab, index) => ({
+            index,
+            visible: !tab.hidden && !tab.disabled,
+        }));
+        if (previous) {
+            tabs = tabs.reverse();
+        }
+        const visibleTabs = tabs.filter(t => t.visible).map(t => t.index);
+        const findNextTabReducer = (acc, index) => {
+            // found a new higher index need to break out
+            if (acc > indexOfActive) {
+                return acc;
+            }
+            if (index <= acc) {
+                return acc;
+            }
+            else {
+                return index;
+            }
+        };
+        const findPreviousTabReducer = (acc, index) => {
+            // found a new lower index need to break out
+            if (acc < indexOfActive) {
+                return acc;
+            }
+            if (index >= acc) {
+                return acc;
+            }
+            else {
+                return index;
+            }
+        };
+        const reducer = previous ? findPreviousTabReducer : findNextTabReducer;
+        const nextIndex = visibleTabs.reduce((acc, value) => reducer(acc, value), indexOfActive);
+        return this.store[nextIndex];
+    }
+    findPreviousTab() {
+        return this.findNextTab(true);
+    }
+    tabListSelectNext(ev) {
+        const nextTab = this.findNextTab();
+        if (nextTab) {
+            this.onSelectTab(ev, nextTab);
+        }
+    }
+    tabListSelectPrevious(ev) {
+        const previousTab = this.findPreviousTab();
+        if (previousTab) {
+            this.onSelectTab(ev, previousTab);
+        }
+    }
+    async focus(tab) {
+        await waitAfterFramePaint();
+        const hasKeyboardFocus = this.el.querySelector(`button.bal-focused`) !== null;
+        if (hasKeyboardFocus) {
+            const tabEl = this.el.querySelector(`#${this.tabsId}-button-${toKebabCase(tab.value)}`);
+            if (tabEl) {
+                tabEl.focus({ preventScroll: true });
+            }
+        }
+    }
     /**
      * RENDER
      * ------------------------------------------------------
@@ -570,13 +686,15 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         const tabs = this.store.map(tab => (Object.assign(Object.assign({}, tab), { active: tab.value === this.value })));
         const expanded = this.accordionState === 4 /* AccordionState.Expanded */ || this.accordionState === 8 /* AccordionState.Expanding */;
         const contentPart = expanded ? 'content expanded' : 'content';
+        const valueExists = this.value !== undefined && !!this.store.find(o => o.value === this.value);
+        const isLinkList = !this.isTabList;
         return (h(Host, { 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
-                .filter(t => this.isActive(t))
+                .filter(t => this.isTabActive(t))
                 .map(t => t.value)
                 .join(','), "data-label": this.store
-                .filter(t => this.isActive(t))
+                .filter(t => this.isTabActive(t))
                 .map(t => t.label)
-                .join(',') }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { items: tabs, tabsId: this.tabsId, onSelectTab: this.onSelectTab, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: this.value !== undefined, 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 })), h("div", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
+                .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", { part: contentPart, ref: contentEl => (this.contentEl = contentEl), class: Object.assign({}, block.element('tabs').element('content').class()) }, h("div", { id: this.tabsId, class: Object.assign({}, block.element('tabs').element('content').element('wrapper').class()), ref: contentElWrapper => (this.contentElWrapper = contentElWrapper) }, h("slot", null)))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -618,7 +736,7 @@ const Tabs = /*@__PURE__*/ proxyCustomElement(class Tabs extends HTMLElement {
         "getOptionByValue": [64],
         "renderLine": [64],
         "closeAccordion": [64]
-    }, [[8, "balWillAnimate", "listenToWillAnimate"], [8, "balDidAnimate", "listenToDidAnimate"]], {
+    }, [[8, "balWillAnimate", "listenToWillAnimate"], [8, "balDidAnimate", "listenToDidAnimate"], [0, "keydown", "listenToKeyDown"]], {
         "options": ["optionChanged"],
         "debounce": ["debounceChanged"],
         "value": ["valueChanged"]

package/components/breakpoints.subject.js

@@ -57,15 +57,15 @@ class BalWindowResizeListener extends ListenerAbstract {
     constructor() {
         super(...arguments);
         this.resizeHandler = new BalWindowResizeHandler({ onlyListenToWidthChanges: true });
-        this.debouncedNotify = debounce(() => this.notify(), 10);
+        this.debouncedNotify = debounce(() => this.notify(), 100);
         this.notify = async () => {
             if (await this.resizeHandler.hasResized()) {
                 super.notify(undefined);
             }
         };
     }
-    connect() {
-        super.connect();
+    connect(el) {
+        super.connect(el);
         if (this.el) {
             addEventListener(this.el, 'resize', this.debouncedNotify, { passive: true });
         }

package/components/index.esm.js

@@ -7266,6 +7266,30 @@ function isArrowDownKey(event) {
 function isArrowUpKey(event) {
     return event.key === 'ArrowUp' || event.key === 'Up';
 }
+/**
+ * Returns `true` if the keyboard event was triggered by the `ArrowLeft` key
+ */
+function isArrowLeftKey(event) {
+    return event.key === 'ArrowLeft' || event.key === 'Left';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `ArrowRight` key
+ */
+function isArrowRightKey(event) {
+    return event.key === 'ArrowRight' || event.key === 'Right';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `Home` key
+ */
+function isHomeKey(event) {
+    return event.key === 'Home';
+}
+/**
+ * Returns `true` if the keyboard event was triggered by the `End` key
+ */
+function isEndKey(event) {
+    return event.key === 'End';
+}
 /**
  * Returns the decimal separator of the given locale
  *
@@ -7370,4 +7394,4 @@ const loadSocialMediaLinks = (lang, region = 'CH') => {
         .then(res => res);
 };
 
-export { Language as L, areArraysEqual as a, toInteger$1 as b, isValidIsoString as c, dateSeparator as d, format as e, formatDateString as f, getDefaultOptions as g, isEnterKey as h, isSpaceKey as i, getYear as j, getMonth as k, lodash_padstart as l, getDate as m, now as n, isArrowDownKey as o, parse as p, isArrowUpKey as q, requiredArgs as r, isEscapeKey as s, toDate as t, loadFooterLinks as u, loadSocialMediaLinks as v, isBackspaceKey as w, formatLocaleNumber as x, getDecimalSeparator as y, getThousandSeparator as z };
+export { isArrowLeftKey as A, isArrowRightKey as B, isHomeKey as C, isEndKey as D, Language as L, isSpaceKey as a, areArraysEqual as b, toInteger$1 as c, dateSeparator as d, isValidIsoString as e, formatDateString as f, getDefaultOptions as g, format as h, isEnterKey as i, getYear as j, getMonth as k, lodash_padstart as l, getDate as m, now as n, isArrowDownKey as o, parse as p, isArrowUpKey as q, requiredArgs as r, isEscapeKey as s, toDate as t, loadFooterLinks as u, loadSocialMediaLinks as v, isBackspaceKey as w, formatLocaleNumber as x, getDecimalSeparator as y, getThousandSeparator as z };