@baloise/ds-core 19.8.2 → 19.8.3

package/components/bal-stack2.js

@@ -6,9 +6,11 @@ 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-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 Stack = /*@__PURE__*/ proxyCustomElement(class Stack extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -86,7 +88,7 @@ const Stack = /*@__PURE__*/ proxyCustomElement(class Stack extends HTMLElement {
         return (h(Host, { key: 'e5776342476f8195c6d3d3e2c2c4ad07da858eee', 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(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, h("slot", { key: 'f96f6828740587f1238c84b08892e8459b017d37' })));
     }
     static get style() { return balStackCss; }
-}, [4, "bal-stack", {
+}, [260, "bal-stack", {
         "layout": [1],
         "align": [1],
         "space": [1],

package/components/bal-stage-back-link.js

@@ -3,9 +3,11 @@ import { B as BEM } from './bem.js';
 import { d as defineCustomElement$2 } from './bal-icon2.js';
 
 const StageBackLink = /*@__PURE__*/ proxyCustomElement(class StageBackLink extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * If `true` adds a text shadow to improve readability on image background
          * */
@@ -17,13 +19,13 @@ const StageBackLink = /*@__PURE__*/ proxyCustomElement(class StageBackLink exten
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: 'f93d9145487b236e4afdefc9a0ab89aaa7d8890b', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'ae854184618a0867e9a35a95a789a6510533e3a5', class: {
+        return (h(Host, { key: '4b980500cb525ce37993b2660d3e6f47afee0f4e', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'afadcd09a4c0c669d387d12a28c712d3de376a41', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href, rel: this.rel }, h("bal-icon", { key: '34c4576352710d3b2dbd269d624cfa17e6bf1b90', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'da404610d50081bba83333324ec3974c9ce5061d' }))));
+            }, href: this.href, rel: this.rel }, h("bal-icon", { key: '764fd4ed183e8542d921d2a57e1850adc590b348', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: 'e3c1b6d3ede82a002ce474cb72ad888586502201' }))));
     }
     get el() { return this; }
-}, [4, "bal-stage-back-link", {
+}, [260, "bal-stage-back-link", {
         "href": [1],
         "rel": [1],
         "shadow": [4],

package/components/bal-stage-body.js

@@ -2,16 +2,18 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const StageBody = /*@__PURE__*/ proxyCustomElement(class StageBody extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { key: '8c8f8b7fbdbf9dd9f32c0c561c93f934770b82bc', class: Object.assign({}, block.class()) }, h("slot", { key: 'df028b10599ec9d884c3eb2787f945219dff77e4' })));
+        return (h(Host, { key: '3b059393f680516ee22d093cb77927211f1b2a2a', class: Object.assign({}, block.class()) }, h("slot", { key: '739898aeda435256a9cf052dfe265d6f28115b94' })));
     }
     get el() { return this; }
-}, [4, "bal-stage-body"]);
+}, [260, "bal-stage-body"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-stage-foot.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const StageFoot = /*@__PURE__*/ proxyCustomElement(class StageFoot extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
-        return (h(Host, { key: '580ee910be7fb627379514f23302062cc3ae04cb', class: "hero-foot" }, h("slot", { key: 'cd9bbca66e1bf7773ca9366c00c935c11e4422a1' })));
+        return (h(Host, { key: '351793d066e2d3018a0a4c40cdb2b69495127199', class: "hero-foot" }, h("slot", { key: '76c2593eac606f7aed4c15ac6148780a37555b54' })));
     }
     get el() { return this; }
-}, [4, "bal-stage-foot"]);
+}, [260, "bal-stage-foot"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-stage-head.js

@@ -1,15 +1,17 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
 const StageHead = /*@__PURE__*/ proxyCustomElement(class StageHead extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
     }
     render() {
-        return (h(Host, { key: '13b87bdc02d0d8aa3c1295422c0f43730258404a', class: "hero-head" }, h("slot", { key: '19edc361f63647081375dad19e4ec33e38623e01' })));
+        return (h(Host, { key: '19fdb481ea37cab182e426f7582270ecdce23147', class: "hero-head" }, h("slot", { key: '69273fb5da2cd217de773a37eb5000adda15bbbf' })));
     }
     get el() { return this; }
-}, [4, "bal-stage-head"]);
+}, [260, "bal-stage-head"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/components/bal-stage-image.js

@@ -1,12 +1,14 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { B as BEM } from './bem.js';
-import { i as inheritAttributes } from './attributes.js';
 import { n as rOnLoad } from './helpers.js';
+import { i as inheritAttributes } from './attributes.js';
+import { B as BEM } from './bem.js';
 
 const StageImage = /*@__PURE__*/ proxyCustomElement(class StageImage extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.imageInheritAttributes = {};
         this.isOnLoadEventDone = false;
     }
@@ -21,10 +23,10 @@ const StageImage = /*@__PURE__*/ proxyCustomElement(class StageImage extends HTM
     render() {
         const block = BEM.block('stage-image');
         const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
-        return (h(Host, { key: 'bcc5678390b8facb7daf8720f7b26e7af55944fa', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
+        return (h(Host, { key: 'a39983d891acebe4f05e5387445483940d0b29dc', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     get el() { return this; }
-}, [0, "bal-stage-image", {
+}, [256, "bal-stage-image", {
         "srcSet": [1, "src-set"],
         "fallback": [1],
         "isOnLoadEventDone": [32]

package/components/bal-stage.js

@@ -5,9 +5,11 @@ import { d as defineCustomElement$2 } from './bal-shape2.js';
 const balStageCss = ":root{--bal-stage-background-red:var(--bal-color-red);--bal-stage-background-yellow:var(--bal-color-yellow);--bal-stage-background-green:var(--bal-color-green);--bal-stage-background-purple:var(--bal-color-purple);--bal-stage-back-font-family:var(--bal-font-family-title);--bal-stage-back-font-weight:var(--bal-font-weight-bold)}.bal-stage{display:block;position:relative}.bal-stage--is-purple{background:var(--bal-stage-background-purple)}.bal-stage--is-green{background:var(--bal-stage-background-green)}.bal-stage--is-red{background:var(--bal-stage-background-red)}.bal-stage--is-yellow{background:var(--bal-stage-background-yellow)}.bal-stage .bal-stage-content{display:block;position:static}.bal-stage .bal-stage-content .bal-stage-image{overflow:hidden}.bal-stage .bal-stage-content .bal-stage-image img{position:absolute;top:0;left:0;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.bal-stage .bal-stage-content .bal-stage-body{position:relative;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding-top:calc(var(--bal-space-xxxx-large) + 4rem);padding-bottom:var(--bal-space-xxx-large)}@media screen and (min-width: 769px),print{.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-tablet) + 4rem);padding-bottom:var(--bal-space-xx-large-tablet)}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-body{padding-top:calc(var(--bal-space-xxxx-large-desktop) + 3rem);padding-bottom:var(--bal-space-xx-large-desktop)}}.bal-stage .bal-stage-content .bal-stage-back-link--shadow{text-shadow:var(--bal-text-shadow-normal)}@media screen and (max-width: 1023px){.bal-stage .bal-stage-content .bal-stage-back-link{display:none}}@media screen and (min-width: 1024px){.bal-stage .bal-stage-content .bal-stage-back-link a{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-align:center;align-items:center;font-family:var(--bal-stage-back-font-family);font-weight:var(--bal-stage-back-font-weight);text-decoration:none}.bal-stage .bal-stage-content .bal-stage-back-link a:hover{text-decoration:underline}.bal-stage .bal-stage-content .bal-stage-back-link a:active{text-decoration:underline}}@media screen and (min-width: 1024px){.bal-stage--is-medium .bal-stage-content .bal-stage-body{min-height:25rem}}.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:23.438rem}@media screen and (min-width: 769px),print{.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:35rem}}@media screen and (min-width: 1024px){.bal-stage--is-large .bal-stage-content .bal-stage-body{min-height:52.5rem}}.bal-stage--has-shape .bal-stage-content{margin-bottom:1.375rem}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content{margin-bottom:2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content{margin-bottom:4.125rem}}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 7.5rem)}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-stage-body>*{max-width:calc(100% - 12.375rem)}}.bal-stage--has-shape .bal-stage-content .bal-shape{position:absolute;bottom:-1.375rem;right:0}@media screen and (min-width: 769px),print{.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-2.5rem}}@media screen and (min-width: 1024px){.bal-stage--has-shape .bal-stage-content .bal-shape{bottom:-4.125rem}}";
 
 const Stage = /*@__PURE__*/ proxyCustomElement(class Stage extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * Defines content width of the stage
          */
@@ -60,7 +62,7 @@ const Stage = /*@__PURE__*/ proxyCustomElement(class Stage extends HTMLElement {
         return (h(Host, { key: '9bde68d498d4ed263cb6e7ec0f72505b66436c6a', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: '0e96a3b8597f3607c98c6689b1658110d11dfa24', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: '3c2ca52c3a5750955adab54a9f7eed4c4da08d7c' }), this.shape && (h("div", { key: 'e69202693e9d45a5258c61c121d9499bde7b4bc8', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: 'fea5cb01b1062316da0ca04a600dd5cae4f91be0', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
     static get style() { return balStageCss; }
-}, [4, "bal-stage", {
+}, [260, "bal-stage", {
         "containerSize": [1, "container-size"],
         "size": [1],
         "color": [1],

package/components/bal-step-item.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as inheritTrackingAttributes } from './attributes.js';
 
 const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balNavigate = createEvent(this, "balNavigate", 7);
         this.inheritAttributes = {};
         this.isActive = false;
@@ -84,13 +86,13 @@ const StepItem = /*@__PURE__*/ proxyCustomElement(class StepItem extends HTMLEle
         };
     }
     render() {
-        return (h(Host, { key: '2c4f197cd8d47db462c0262b01080aff16e1e53f', role: "tabpanel", class: {
+        return (h(Host, { key: '4d22b6691427503ce62c4a0846fa1bc8639654a9', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: 'a4a68d86354b4c4b14c6e35362cfe5a9b7e79b77' })));
+            } }, h("slot", { key: '087ec315891c96985e14d4a94181563cd57b0b8f' })));
     }
     get el() { return this; }
-}, [4, "bal-step-item", {
+}, [260, "bal-step-item", {
         "active": [516],
         "value": [513],
         "label": [513],

package/components/bal-steps.js

@@ -1,21 +1,19 @@
 import { h, proxyCustomElement, HTMLElement, createEvent, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { k as debounceEvent } from './helpers.js';
-import { B as BEM } from './bem.js';
-import { L as Logger } from './log.js';
 import { a as areArraysEqual } from './array.js';
+import { B as BEM } from './bem.js';
 import { s as stopEventBubbling } from './form-input.js';
+import { k as debounceEvent } from './helpers.js';
+import { L as Logger } from './log.js';
 import { n as newBalStepOption } from './bal-step.util.js';
-import { L as ListenToMutation } from './mutation.decorator.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
+import { L as ListenToMutation } from './mutation.decorator.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import { d as defineCustomElement$2 } from './bal-icon2.js';
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = BEM.block('steps').element('nav').element('item').element('icon');
-    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)) },
-        h("bal-icon", { style: { display: item.done ? 'block' : 'none' }, size: isMobile ? 'small' : '', color: item.disabled ? 'grey' : 'white', name: "check" }),
-        h("span", { style: { display: !item.done ? 'block' : 'none' } }, item.failed ? '!' : (item.index || 0) + 1)));
+    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)) }, h("bal-icon", { style: { display: item.done ? 'block' : 'none' }, size: isMobile ? 'small' : '', color: item.disabled ? 'grey' : 'white', name: "check" }), h("span", { style: { display: !item.done ? 'block' : 'none' } }, item.failed ? '!' : (item.index || 0) + 1)));
 };
 
 const StepLabel = ({ item }) => {
@@ -29,21 +27,19 @@ const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
         return;
     }
     if (item.href) {
-        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, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) },
-            h(StepIcon, { item: item, isMobile: isMobile }),
-            h(StepLabel, { item: 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, rel: item.rel, target: item.target, onClick: (ev) => onSelectTab(ev, item) }, h(StepIcon, { item: item, isMobile: isMobile }), h(StepLabel, { item: item })));
     }
-    return (h("button", { 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}`, onClick: (ev) => onSelectTab(ev, item) },
-        h(StepIcon, { item: item, isMobile: isMobile }),
-        h(StepLabel, { item: item })));
+    return (h("button", { 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}`, 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}}: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;border:none;background-color:rgba(0,0,0,0)}.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__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}.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}.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;display:-ms-flexbox;display:flex;overflow-x:auto;overflow-y:hidden}.bal-step-item{width:100%;display:none}.bal-step-item--active{display:block}";
 
 const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balChange = createEvent(this, "balChange", 7);
         this.stepsId = `bal-steps-${StepsIds++}`;
         this.store = [];
@@ -245,7 +241,7 @@ const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {
         "value": ["valueChanged"]
     }; }
     static get style() { return balStepsCss; }
-}, [4, "bal-steps", {
+}, [260, "bal-steps", {
         "options": [16],
         "clickable": [4],
         "color": [1],

package/components/bal-switch.js

@@ -5,9 +5,11 @@ import { d as defineCustomElement$2 } from './bal-icon2.js';
 const balSwitchCss = ":root{--bal-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-checkbox-switch-label-background-pressed-after:var(--bal-color-border-primary-pressed);--bal-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-pressed-after:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-checkbox-switch-label-background-invalid-checked-hovered-before:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-checked-pressed-before:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white)}.bal-switch{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.5rem;height:1.5rem;padding:.25rem;border-radius:var(--bal-radius-rounded);overflow:hidden;background:var(--bal-checkbox-switch-label-background-before)}@media (hover: hover)and (pointer: fine){.bal-switch--hovered,.bal-switch:hover{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--hovered .bal-switch__toggle,.bal-switch:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-hover-after)}}.bal-switch--pressed,.bal-switch:active{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--pressed .bal-switch__toggle,.bal-switch:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-pressed-after)}.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-checked-before)}.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}@media (hover: hover)and (pointer: fine){.bal-switch--checked.bal-switch--hovered,.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-checked-hover-before)}.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}}.bal-switch--checked.bal-switch--pressed,.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-checked-active-before)}.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch--invalid{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-after)}@media (hover: hover)and (pointer: fine){.bal-switch--invalid.bal-switch--hovered,.bal-switch--invalid:hover{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-hover-after)}}.bal-switch--invalid.bal-switch--pressed,.bal-switch--invalid:active{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-pressed-after)}.bal-switch--invalid.bal-switch--checked.bal-switch,.bal-switch--invalid.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-invalid-checked-before)}.bal-switch--invalid.bal-switch--checked.bal-switch .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered,.bal-switch--invalid.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-invalid-checked-hovered-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed,.bal-switch--invalid.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-invalid-checked-pressed-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--disabled,.bal-switch--disabled:hover,.bal-switch--disabled:active{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-before)}.bal-switch--disabled .bal-switch__toggle,.bal-switch--disabled:hover .bal-switch__toggle,.bal-switch--disabled:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-after)}.bal-switch--disabled.bal-switch--checked,.bal-switch--disabled.bal-switch--checked:hover,.bal-switch--disabled.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-before)}.bal-switch--disabled.bal-switch--checked .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:hover .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-after)}.bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-after);border-radius:50%;position:absolute;top:.25rem;width:1rem;height:1rem;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.bal-switch__toggle--checked{-webkit-transform:translateX(100%);transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-icon{position:absolute}.bal-icon .bal-switch__icon--checked{opacity:1}.bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";
 
 const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -45,7 +47,7 @@ const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement
         return (h(Host, { key: '44e17aefdee7df228e92368c3863509a4dcd4bc8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: '1f27c8f3f92467ea80de321666e597c8ea7cde89', name: "check", color: "white", size: "small", "aria-hidden": "true", colorHovered: "white", colorPressed: "white", hovered: this.hovered, pressed: this.pressed, class: Object.assign({}, block.element('icon').modifier('checked').class(checked)) }), h("div", { key: 'd22b87a1a091669422db72acf16d48a4c4e8825f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('toggle').class()), block.element('toggle').modifier('checked').class(checked)), block.element('toggle').modifier('disabled').class(disabled)), block.element('toggle').modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) })));
     }
     static get style() { return balSwitchCss; }
-}, [0, "bal-switch", {
+}, [256, "bal-switch", {
         "checked": [1028],
         "invalid": [4],
         "disabled": [4],

package/components/bal-tab-item.js

@@ -2,9 +2,11 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { a as inheritTrackingAttributes } from './attributes.js';
 
 const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.balNavigate = createEvent(this, "balNavigate", 7);
         this.balKeyDown = createEvent(this, "balKeyDown", 7);
         this.inheritAttributes = {};
@@ -117,13 +119,13 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '4cca3771f21f5049d68fcb2da92a2a49972670c3', id: this.tabPanelID, class: {
+        return (h(Host, { key: '8faef74e951bde8c3e3be3348ce09ce614d321de', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'e8521265c345ce4dfbc5e6e1f332d11004c7588b' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', "aria-labelledby": this.tabsId ? `${this.tabsId}-button-${this.value}` : undefined, tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: '23bfff424e8da5faee77587e5bc6f46ea7cfb109' })));
     }
     get el() { return this; }
-}, [4, "bal-tab-item", {
+}, [260, "bal-tab-item", {
         "active": [516],
         "value": [513],
         "label": [513],

package/components/bal-table.js

@@ -4,9 +4,11 @@ import { B as BEM } from './bem.js';
 const balTableCss = ".bal-table{display:block;position:static}.bal-table--is-fullwidth{display:-ms-flexbox;display:flex;width:100%}bal-checkbox .bal-checkbox__label::before{top:0}bal-checkbox .bal-checkbox__label::after{margin-top:0px}";
 
 const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * If `true` the table has a full width
          */
@@ -16,11 +18,11 @@ const Table = /*@__PURE__*/ proxyCustomElement(class Table extends HTMLElement {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { key: 'e649f646f51b2ff16ad47498e4338b4856c078de', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'cb13c3d6ef13e8fc4013683f60b4557a13fd4401' })));
+        return (h(Host, { key: '02a18be55045376f238aeaaf4fdf0d1abd97788a', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: '33860f7409dc7b8ef772327022bed7978513a94a' })));
     }
     get el() { return this; }
     static get style() { return balTableCss; }
-}, [4, "bal-table", {
+}, [260, "bal-table", {
         "expanded": [4]
     }]);
 function defineCustomElement$1() {