@baloise/ds-core 19.1.0 → 19.2.0-nightly.20250623

package/components/bal-steps.js

@@ -38,7 +38,7 @@ const StepButton = ({ item, color, isMobile, clickable, onSelectTab }) => {
         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}.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}}: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 BalStepsStyle0 = balStepsCss;
 
 const Steps = /*@__PURE__*/ proxyCustomElement(class Steps extends HTMLElement {

package/components/bal-tab-item.js

@@ -6,6 +6,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
         super();
         this.__registerHost();
         this.balNavigate = createEvent(this, "balNavigate", 7);
+        this.balKeyDown = createEvent(this, "balKeyDown", 7);
         this.inheritAttributes = {};
         this.tabPanelID = `bal-tab-panel-id-${panelID++}`;
         this.isActive = false;
@@ -63,6 +64,7 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
             passed: false,
             prevent: this.prevent,
             navigate: this.balNavigate,
+            keyDown: this.balKeyDown,
             trackingData: this.inheritAttributes,
             noPanel: this.noPanel,
             aria: this.aria,
@@ -73,10 +75,10 @@ const TabItem = /*@__PURE__*/ proxyCustomElement(class TabItem extends HTMLEleme
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: 'fb75a99fe41ccd8bbac4e1d8c0c8bf8a116e3121', id: this.tabPanelID, class: {
+        return (h(Host, { key: 'dff521c2768c6f6363c40f464d7a1c4b755ed56f', 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: '5e8e7ce04a22af2fce844c4604c3a3277dbccce5' })));
+            }, 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: '3a98e9f46657921751ba7d625ae45cf0eef46025' })));
     }
     get el() { return this; }
 }, [4, "bal-tab-item", {

package/components/bal-tabs2.js

@@ -83,7 +83,10 @@ const TabButton = ({ item, tabsId, isFirst, isLast, isMobile, isVertical, accord
     if (!isLinkList) {
         attrs['tabindex'] = item.active ? '0' : '-1';
     }
-    const renderButton = () => (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item) }),
+    const renderButton = () => (h(TagType, Object.assign({ id: `${tabsId}-button-${toKebabCase(item.value)}`, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, bemEl.class()), bemEl.modifier('active').class(item.active)), bemEl.modifier('disabled').class(item.disabled)), bemEl.modifier('clickable').class(clickable)), bemEl.modifier('accordion').class(accordion)), bemEl.modifier('inverted').class(inverted)), bemEl.modifier('expanded').class(isExpanded)), bemEl.modifier('spaceless').class(spaceless)), bemEl.modifier('first').class(isFirst)), bemEl.modifier('last').class(isLast)), bemEl.modifier('passed').class(item.passed)), bemEl.modifier('vertical').class(isVertical)), bemEl.modifier(`context-${context}`).class(context !== undefined)), bemEl.modifier(`icon-position-${iconPosition}`).class(iconPosition !== 'horizontal')), bemEl.modifier(`display-svg`).class(item.svg && item.svg.length > 0)), bemEl.modifier('group-has-sub-label').class(hasSubLabelInGroup)), bemEl.modifier('dim-inactive-elements').class(dimInactiveElements)), { 'bal-focusable': !item.disabled && !item.invisible }), draggable: false, "data-tabs": tabsId, "data-label": item.label, "data-value": item.value, "data-index": item.index, "data-testid": "bal-tabs-item", "aria-selected": !isTabButton ? undefined : item.active ? 'true' : 'false' }, attrs, { onClick: (ev) => onSelectTab(ev, item), onKeyDown: (ev) => {
+            var _a;
+            (_a = item.keyDown) === null || _a === void 0 ? void 0 : _a.emit(ev);
+        } }),
         item.icon || item.svg ? (h(TabIcon, { accordion: false, item: item, isMobile: isMobile, hasBubble: hasIconBubble, inverted: inverted })) : (''),
         h(TabLabel, { item: item, isMobile: isMobile, isVertical: isVertical, isExpanded: isExpanded, hasBubble: hasLabelBubble, inverted: inverted, context: context }),
         accordion && !item.href ? (h(TabIcon, { accordion: accordion, isAccordionOpen: isAccordionOpen, item: item, isMobile: isMobile, hasBubble: hasAccordionIconBubble, inverted: inverted })) : ('')));

package/components/focus-visible.js

@@ -14,7 +14,6 @@ const FOCUS_KEYS = [
     'Home',
     'End',
 ];
-const focusableQueryString = '[tabindex]:not([tabindex^="-"]), input:not([type=hidden]):not([tabindex^="-"]), textarea:not([tabindex^="-"]), button:not([tabindex^="-"]), select:not([tabindex^="-"]), .bal-focusable:not([tabindex^="-"])';
 const startFocusVisible = (rootEl) => {
     let currentFocus = [];
     let keyboardMode = true;
@@ -69,4 +68,4 @@ const startFocusVisible = (rootEl) => {
     };
 };
 
-export { FOCUS_KEYS as F, focusableQueryString as f, startFocusVisible as s };
+export { FOCUS_KEYS as F, startFocusVisible as s };

package/components/index.js

@@ -1,4 +1,3 @@
-import { setPlatformHelpers } from '@stencil/core/internal/client';
 export { getAssetPath, setAssetPath, setNonce, setPlatformOptions } from '@stencil/core/internal/client';
 export { F as FileUploadRejectionReason } from './bal-file-upload.type.js';
 export { i as i18nBalDate } from './bal-date.i18n.js';
@@ -6,17 +5,16 @@ export { i as i18nBalClose } from './bal-close.i18n.js';
 export { i as i18nBalTimeInput } from './bal-time-input.i18n.js';
 export { i as i18nBalInputStepper } from './bal-input-stepper.i18n.js';
 export { i as i18nBalLabel } from './bal-label.i18n.js';
-import { b as balBrowser } from './browser.js';
-export { b as balBrowser } from './browser.js';
-import { w as waitForComponent, g as getAppRoot, c as componentOnReady } from './helpers.js';
-export { c as componentOnReady, h as deepReady, g as getAppRoot, j as isDescendant, s as shallowReady, i as wait, b as waitAfterFramePaint, d as waitAfterIdleCallback, e as waitAfterLargestContentfulPaintCallback, w as waitForComponent, a as waitForDesignSystem, f as waitOnLoadEventCallback } from './helpers.js';
-import { d as defaultConfig } from './config.default.js';
-export { d as defaultConfig } from './config.default.js';
+export { a as BalSnackbarController, B as BalToastController, c as balSnackbarController, b as balToastController, i as initialize, i as initializeBaloiseDesignSystem, s as setupConfig } from './initialize.js';
 export { n as newBalOption } from './option.js';
 export { n as newBalStepOption } from './bal-step.util.js';
 export { n as newBalTabOption } from './bal-tab.util.js';
+import { g as getAppRoot, c as componentOnReady } from './helpers.js';
+export { c as componentOnReady, h as deepReady, g as getAppRoot, j as isDescendant, s as shallowReady, i as wait, b as waitAfterFramePaint, d as waitAfterIdleCallback, e as waitAfterLargestContentfulPaintCallback, w as waitForComponent, a as waitForDesignSystem, f as waitOnLoadEventCallback } from './helpers.js';
 export { s as scrollToFirstInvalidField } from './form.js';
 export { B as BalScrollHandler } from './scroll.js';
+import { b as balBrowser } from './browser.js';
+export { b as balBrowser } from './browser.js';
 import { b as balDevice } from './device.js';
 export { B as BalDevice, b as balDevice } from './device.js';
 export { I as INVALID_VALUE } from './mask-util.js';
@@ -24,175 +22,11 @@ import { g as getOverlays, a as getOverlay } from './overlays.js';
 import { B as BalWindowResizeListener, b as balBreakpoints } from './breakpoints.subject.js';
 export { c as BalBreakpointSubject, d as BalBreakpointsUtil, a as balBreakpointSubject, b as balBreakpoints } from './breakpoints.subject.js';
 export { a as attachToConfig, d as detachFromConfig, o as onBalConfigChange, u as updateBalAllowedLanguages, b as updateBalAnimated, c as updateBalIcons, e as updateBalLanguage, f as updateBalRegion, g as useBalConfig } from './config.utils.js';
+export { d as defaultConfig } from './config.default.js';
 import { S as Subject } from './listener.js';
 export { B as BalSwipeSubject } from './swipe.subject.js';
 export { B as BalDate } from './date.js';
 
-const BALOISE_SESSION_KEY = 'baloise-persist-config';
-const BALOISE_ANIMATION_KEY = 'baloise-animated';
-
-class Config {
-    constructor() {
-        this._componentObservers = [];
-        this._observers = [];
-        this._config = defaultConfig;
-    }
-    get locale() {
-        return `${this._config.language}-${this._config.region}`;
-    }
-    get region() {
-        return this._config.region;
-    }
-    set region(region) {
-        if (region !== this._config.region) {
-            this._config.region = region;
-            this._notify();
-        }
-    }
-    get language() {
-        return this._config.language;
-    }
-    set language(language) {
-        if (language !== this._config.language) {
-            if (this._config.allowedLanguages.includes(language)) {
-                this._config.language = language;
-            }
-            else {
-                this._config.language = this._config.fallbackLanguage;
-            }
-            this._notify();
-        }
-    }
-    get allowedLanguages() {
-        return this._config.allowedLanguages;
-    }
-    set allowedLanguages(allowedLanguages) {
-        if (allowedLanguages !== this._config.allowedLanguages) {
-            this._config.allowedLanguages = allowedLanguages;
-            this._notify();
-        }
-    }
-    get icons() {
-        return this._config.icons;
-    }
-    set icons(icons) {
-        this._config.icons = Object.assign(Object.assign({}, this._config.icons), icons);
-        this._notify();
-    }
-    get logger() {
-        return this._config.logger;
-    }
-    set logger(logger) {
-        this._config.logger = Object.assign({}, logger);
-        this._notify();
-    }
-    get animated() {
-        return this._config.animated;
-    }
-    set animated(animated) {
-        this._config.animated = animated;
-        this._notify();
-    }
-    get httpFormSubmit() {
-        return this._config.httpFormSubmit;
-    }
-    set httpFormSubmit(httpFormSubmit) {
-        this._config.httpFormSubmit = httpFormSubmit;
-        this._notify();
-    }
-    attach(observer) {
-        const isExist = this._observers.includes(observer);
-        if (isExist) {
-            return console.log('Subject: Observer has been attached already.');
-        }
-        this._observers.push(observer);
-        observer.configChanged(this._config);
-    }
-    detach(observer) {
-        const observerIndex = this._observers.indexOf(observer);
-        if (observerIndex === -1) {
-            return console.log('Subject: Nonexistent observer.');
-        }
-        this._observers.splice(observerIndex, 1);
-    }
-    attachComponent(observer) {
-        const isExist = this._componentObservers.includes(observer);
-        if (isExist) {
-            return console.log('Subject: Observer has been attached already.');
-        }
-        this._componentObservers.push(observer);
-        observer.configChanged(this._config);
-    }
-    detachComponent(observer) {
-        const observerIndex = this._componentObservers.indexOf(observer);
-        if (observerIndex === -1) {
-            return console.log('Subject: Nonexistent observer.');
-        }
-        this._componentObservers.splice(observerIndex, 1);
-    }
-    toString() {
-        return JSON.stringify(this._config);
-    }
-    reset(config) {
-        this._config = Object.assign(Object.assign(Object.assign({}, this._config), config), { icons: Object.assign(Object.assign({}, this._config.icons), config.icons) });
-        this._notify(false);
-    }
-    _notify(all = true) {
-        for (const observer of this._componentObservers) {
-            observer.configChanged(this._config);
-        }
-        if (all) {
-            for (const observer of this._observers) {
-                observer.configChanged(this._config);
-            }
-        }
-        if (balBrowser.hasWindow) {
-            saveConfig(window, this._config);
-        }
-    }
-}
-const config = /*@__PURE__*/ new Config();
-const configFromSession = (win) => {
-    try {
-        const configStr = win.sessionStorage.getItem(BALOISE_SESSION_KEY);
-        return configStr !== null ? JSON.parse(configStr) : {};
-    }
-    catch (e) {
-        return {};
-    }
-};
-const configFromLocalStorage = (win) => {
-    try {
-        const animated = JSON.parse(win.localStorage.getItem(BALOISE_ANIMATION_KEY));
-        if (animated !== null) {
-            return {
-                animated,
-            };
-        }
-        return {};
-    }
-    catch (e) {
-        return {};
-    }
-};
-const saveConfig = (win, c) => {
-    try {
-        win.sessionStorage.setItem(BALOISE_SESSION_KEY, JSON.stringify(c));
-    }
-    catch (e) {
-        return;
-    }
-};
-
-const setupConfig = (userConfig = {}, win = {}) => {
-    if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
-        win = window;
-    }
-    win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
-    config.reset(Object.assign(Object.assign(Object.assign(Object.assign({}, configFromSession(win)), configFromLocalStorage(win)), userConfig), { icons: Object.assign(Object.assign({}, configFromSession(win).icons), userConfig.icons) }));
-    win.BaloiseDesignSystem.config = config;
-};
-
 const i18nBalFieldLabel = {
     de: {
         optional: ' (optional)',
@@ -226,147 +60,6 @@ const i18nBalFieldLabel = {
     },
 };
 
-class BalNoticeController {
-    constructor(options) {
-        this.options = options;
-        this.container = null;
-        this.queue = [];
-        this.preQueue = [];
-        this.queueLimit = 5;
-    }
-    create(options) {
-        if (balBrowser.hasDocument) {
-            this.setupContainer(options);
-            const clone = this.findClone(options);
-            if (clone === undefined) {
-                const el = document.createElement(this.options.tag);
-                Object.assign(el, options);
-                el.addEventListener('balClose', ev => {
-                    this.removeFromQueue(ev.detail);
-                });
-                this.preQueue.push(el);
-                this.updateQueue();
-                return el;
-            }
-            return clone;
-        }
-    }
-    setQueue(queueLimit) {
-        this.queueLimit = queueLimit;
-    }
-    async dismissAll() {
-        var _a;
-        const elements = (_a = this.container) === null || _a === void 0 ? void 0 : _a.querySelectorAll(this.options.tag);
-        if (elements) {
-            const closingQueue = [];
-            for (let index = 0; index < elements.length; index++) {
-                const el = elements[index];
-                if (el.close) {
-                    closingQueue.push(el.close());
-                }
-            }
-            await Promise.all(closingQueue);
-        }
-    }
-    /**
-     * @deprecated use dismissAll instead
-     */
-    async clearAll() {
-        console.warn('[DEPRECATED] - use dismissAll() instead');
-        return this.dismissAll();
-    }
-    findClone(options) {
-        for (let index = 0; index < this.queue.length; index++) {
-            const el = this.queue[index];
-            if (el.message === options.message && el.color === options.color) {
-                return el;
-            }
-        }
-        return undefined;
-    }
-    setupContainer(options) {
-        if (balBrowser.hasDocument) {
-            const containerId = `${this.options.tag}-container`;
-            this.container = document.getElementById(containerId);
-            if (this.container)
-                return;
-            if (!this.container) {
-                this.container = document.createElement('bal-notices');
-                this.container.setAttribute('interface', this.options.tag.replace('bal-', ''));
-                this.container.setAttribute('animated', options.animated ? 'true' : 'false');
-                if (options.container !== undefined) {
-                    this.container.setAttribute('container', options.container === true ? '' : options.container);
-                }
-                this.container.id = containerId;
-            }
-            document.body.appendChild(this.container);
-        }
-    }
-    async updateQueue() {
-        var _a;
-        if (this.queue.length < this.queueLimit) {
-            const el = this.preQueue.shift();
-            if (el && this.container) {
-                await waitForComponent(this.container);
-                const innerEl = this.container.querySelector('.bal-notices__inner');
-                if (innerEl) {
-                    this.queue.push(el);
-                    innerEl.insertAdjacentElement('beforeend', el);
-                }
-            }
-        }
-        if (this.queue.length === 0) {
-            (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
-        }
-    }
-    removeFromQueue(toastId) {
-        this.queue = this.queue.filter(el => el.id !== toastId);
-        setTimeout(() => this.updateQueue(), 0);
-    }
-}
-
-class BalToastController extends BalNoticeController {
-    constructor() {
-        super({
-            tag: 'bal-toast',
-        });
-    }
-    create(options) {
-        return super.create(options);
-    }
-}
-const balToastController = new BalToastController();
-
-class BalSnackbarController extends BalNoticeController {
-    constructor() {
-        super({
-            tag: 'bal-snackbar',
-        });
-    }
-    create(options) {
-        return super.create(options);
-    }
-}
-const balSnackbarController = new BalSnackbarController();
-
-// generated by .build/version.js
-const VERSION = '19.1.0';
-
-const initializeBaloiseDesignSystem = (userConfig = {}, platformConfig = undefined, win = {}) => {
-    if (Object.keys(win).length === 0 && balBrowser.hasWindow) {
-        win = window;
-    }
-    win.BaloiseDesignSystem = win.BaloiseDesignSystem || {};
-    if (platformConfig) {
-        setPlatformHelpers(platformConfig);
-    }
-    setupConfig(Object.assign(Object.assign({}, userConfig), platformConfig), win);
-    win.BaloiseDesignSystem.toastController = balToastController;
-    win.BaloiseDesignSystem.snackbarController = balSnackbarController;
-    win.BaloiseDesignSystem.initialize = () => setupConfig(win.BaloiseDesignSystem.config, win);
-    win.BaloiseDesignSystem.version = VERSION;
-};
-
 const newBalCheckboxOption = (option) => {
     return Object.assign(Object.assign({ interface: 'checkbox', labelHidden: false, flat: false, disabled: false, readonly: false, required: false, nonSubmit: false, invalid: false, checked: false }, option), { label: '', html: option.label });
 };
@@ -484,4 +177,4 @@ const isPlatform = (winOrPlatform, platform) => {
 const NewBalOptionValue = newBalOptionValue;
 const NewBalSingleOptionValue = newBalSingleOptionValue;
 
-export { BalModalController, BalOrientationSubject, BalSnackbarController, BalToastController, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, balSnackbarController, balToastController, getPlatforms, hasTouchSupport, i18nBalFieldLabel, initializeBaloiseDesignSystem as initialize, initializeBaloiseDesignSystem, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue, setupConfig };
+export { BalModalController, BalOrientationSubject, NewBalOptionValue, NewBalSingleOptionValue, balModalController, balOrientationSubject, getPlatforms, hasTouchSupport, i18nBalFieldLabel, isBrowser, isPlatform, newBalCheckboxOption, newBalOptionValue, newBalRadioOption, newBalSingleOptionValue };