@baloise/ds-core 17.2.4 → 17.2.5

package/components/bal-hint2.js

@@ -13,7 +13,7 @@ import { b as balBreakpoints } from './breakpoints.subject.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToConfig } from './config.decorator.js';
 
-const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
+const balHintCss = ":root{--bal-hint-content-background:var(--bal-color-grey-2)}.bal-hint{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block}.bal-hint__icon{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer}@media (hover: hover)and (pointer: fine){.bal-hint__icon:hover svg,.bal-hint__icon:hover g,.bal-hint__icon:hover path,.bal-hint__icon:hover circle,.bal-hint__icon:focus svg,.bal-hint__icon:focus g,.bal-hint__icon:focus path,.bal-hint__icon:focus circle{fill:var(--bal-color-light-blue-5)}}.bal-hint__content{background:var(--bal-hint-content-background);display:-ms-flexbox;display:flex;gap:1.5rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 768px){.bal-hint__content{padding:1.25rem;min-height:100%}.bal-hint__content>div{-ms-flex:1;flex:1}}.bal-hint__content__title{display:block;margin-bottom:1rem}.bal-hint__content__title__heading{font-family:var(--bal-title-font-family);font-weight:var(--bal-title-font-weight);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-hint__content__title__heading{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}@media screen and (min-width: 769px),print{.bal-hint__content__buttons--is-hidden-desktop{display:none !important}}.bal-hint__content__text__field{font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text);font-size:var(--bal-text-size-normal)}.bal-hint__overlay__content{position:fixed;display:none;overflow:auto;top:0;left:0;right:0;bottom:0;z-index:var(--bal-z-index-popup)}.bal-hint__overlay__content--active{display:block}";
 const BalHintStyle0 = balHintCss;
 
 const Hint = /*@__PURE__*/ proxyCustomElement(class Hint extends HTMLElement {

package/components/bal-nav.js

@@ -5,30 +5,34 @@ import { L as Logger } from './log.js';
 import { b as balBrowser } from './browser.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { w as waitForComponent, d as waitAfterIdleCallback } from './helpers.js';
-import { d as defineCustomElement$p } from './bal-badge2.js';
-import { d as defineCustomElement$o } from './bal-button2.js';
-import { d as defineCustomElement$n } from './bal-checkbox2.js';
-import { d as defineCustomElement$m } from './bal-dropdown2.js';
-import { d as defineCustomElement$l } from './bal-heading2.js';
-import { d as defineCustomElement$k } from './bal-icon2.js';
-import { d as defineCustomElement$j } from './bal-list2.js';
-import { d as defineCustomElement$i } from './bal-list-item2.js';
-import { d as defineCustomElement$h } from './bal-list-item-accordion-body2.js';
-import { d as defineCustomElement$g } from './bal-list-item-accordion-head2.js';
-import { d as defineCustomElement$f } from './bal-list-item-content2.js';
-import { d as defineCustomElement$e } from './bal-list-item-icon2.js';
-import { d as defineCustomElement$d } from './bal-list-item-title2.js';
-import { d as defineCustomElement$c } from './bal-logo2.js';
-import { d as defineCustomElement$b } from './bal-nav-link2.js';
-import { d as defineCustomElement$a } from './bal-nav-link-grid2.js';
-import { d as defineCustomElement$9 } from './bal-nav-link-grid-col2.js';
-import { d as defineCustomElement$8 } from './bal-nav-menu-bar2.js';
-import { d as defineCustomElement$7 } from './bal-nav-menu-flyout2.js';
-import { d as defineCustomElement$6 } from './bal-nav-meta-bar2.js';
-import { d as defineCustomElement$5 } from './bal-option2.js';
-import { d as defineCustomElement$4 } from './bal-spinner2.js';
-import { d as defineCustomElement$3 } from './bal-stack2.js';
-import { d as defineCustomElement$2 } from './bal-tabs2.js';
+import { d as defineCustomElement$t } from './bal-badge2.js';
+import { d as defineCustomElement$s } from './bal-button2.js';
+import { d as defineCustomElement$r } from './bal-checkbox2.js';
+import { d as defineCustomElement$q } from './bal-close2.js';
+import { d as defineCustomElement$p } from './bal-heading2.js';
+import { d as defineCustomElement$o } from './bal-icon2.js';
+import { d as defineCustomElement$n } from './bal-list2.js';
+import { d as defineCustomElement$m } from './bal-list-item2.js';
+import { d as defineCustomElement$l } from './bal-list-item-accordion-body2.js';
+import { d as defineCustomElement$k } from './bal-list-item-accordion-head2.js';
+import { d as defineCustomElement$j } from './bal-list-item-content2.js';
+import { d as defineCustomElement$i } from './bal-list-item-icon2.js';
+import { d as defineCustomElement$h } from './bal-list-item-title2.js';
+import { d as defineCustomElement$g } from './bal-logo2.js';
+import { d as defineCustomElement$f } from './bal-nav-link2.js';
+import { d as defineCustomElement$e } from './bal-nav-link-grid2.js';
+import { d as defineCustomElement$d } from './bal-nav-link-grid-col2.js';
+import { d as defineCustomElement$c } from './bal-nav-menu-bar2.js';
+import { d as defineCustomElement$b } from './bal-nav-menu-flyout2.js';
+import { d as defineCustomElement$a } from './bal-nav-meta-bar2.js';
+import { d as defineCustomElement$9 } from './bal-popover2.js';
+import { d as defineCustomElement$8 } from './bal-popover-content2.js';
+import { d as defineCustomElement$7 } from './bal-select2.js';
+import { d as defineCustomElement$6 } from './bal-select-option2.js';
+import { d as defineCustomElement$5 } from './bal-spinner2.js';
+import { d as defineCustomElement$4 } from './bal-stack2.js';
+import { d as defineCustomElement$3 } from './bal-tabs2.js';
+import { d as defineCustomElement$2 } from './bal-tag2.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
 import { d as defaultConfig } from './config.default.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
@@ -740,7 +744,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-nav", "bal-badge", "bal-button", "bal-checkbox", "bal-dropdown", "bal-heading", "bal-icon", "bal-list", "bal-list-item", "bal-list-item-accordion-body", "bal-list-item-accordion-head", "bal-list-item-content", "bal-list-item-icon", "bal-list-item-title", "bal-logo", "bal-nav-link", "bal-nav-link-grid", "bal-nav-link-grid-col", "bal-nav-menu-bar", "bal-nav-menu-flyout", "bal-nav-meta-bar", "bal-option", "bal-spinner", "bal-stack", "bal-tabs"];
+    const components = ["bal-nav", "bal-badge", "bal-button", "bal-checkbox", "bal-close", "bal-heading", "bal-icon", "bal-list", "bal-list-item", "bal-list-item-accordion-body", "bal-list-item-accordion-head", "bal-list-item-content", "bal-list-item-icon", "bal-list-item-title", "bal-logo", "bal-nav-link", "bal-nav-link-grid", "bal-nav-link-grid-col", "bal-nav-menu-bar", "bal-nav-menu-flyout", "bal-nav-meta-bar", "bal-popover", "bal-popover-content", "bal-select", "bal-select-option", "bal-spinner", "bal-stack", "bal-tabs", "bal-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav":
             if (!customElements.get(tagName)) {
@@ -749,120 +753,140 @@ function defineCustomElement$1() {
             break;
         case "bal-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$t();
             }
             break;
         case "bal-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$s();
             }
             break;
         case "bal-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "bal-close":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
+        case "bal-heading":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "bal-list":
             if (!customElements.get(tagName)) {
                 defineCustomElement$n();
             }
             break;
-        case "bal-dropdown":
+        case "bal-list-item":
             if (!customElements.get(tagName)) {
                 defineCustomElement$m();
             }
             break;
-        case "bal-heading":
+        case "bal-list-item-accordion-body":
             if (!customElements.get(tagName)) {
                 defineCustomElement$l();
             }
             break;
-        case "bal-icon":
+        case "bal-list-item-accordion-head":
             if (!customElements.get(tagName)) {
                 defineCustomElement$k();
             }
             break;
-        case "bal-list":
+        case "bal-list-item-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }
             break;
-        case "bal-list-item":
+        case "bal-list-item-icon":
             if (!customElements.get(tagName)) {
                 defineCustomElement$i();
             }
             break;
-        case "bal-list-item-accordion-body":
+        case "bal-list-item-title":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "bal-list-item-accordion-head":
+        case "bal-logo":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "bal-list-item-content":
+        case "bal-nav-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "bal-list-item-icon":
+        case "bal-nav-link-grid":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "bal-list-item-title":
+        case "bal-nav-link-grid-col":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "bal-logo":
+        case "bal-nav-menu-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "bal-nav-link":
+        case "bal-nav-menu-flyout":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "bal-nav-link-grid":
+        case "bal-nav-meta-bar":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "bal-nav-link-grid-col":
+        case "bal-popover":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "bal-nav-menu-bar":
+        case "bal-popover-content":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "bal-nav-menu-flyout":
+        case "bal-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "bal-nav-meta-bar":
+        case "bal-select-option":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "bal-option":
+        case "bal-spinner":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "bal-spinner":
+        case "bal-stack":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "bal-stack":
+        case "bal-tabs":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "bal-tabs":
+        case "bal-tag":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-option.js

@@ -1,4 +1,169 @@
-import { O as Option, d as defineCustomElement$1 } from './bal-option2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { B as BEM } from './bem.js';
+import { L as Logger } from './log.js';
+import { a as ariaBooleanToString } from './aria.js';
+import { s as stopEventBubbling } from './form-input.js';
+import { B as BalElementStateListener, L as ListenToElementStates } from './element-states.decorator.js';
+import { d as defineCustomElement$4 } from './bal-checkbox2.js';
+import { d as defineCustomElement$3 } from './bal-icon2.js';
+import { d as defineCustomElement$2 } from './bal-stack2.js';
+
+const balOptionCss = ":root{--bal-option-padding-x:var(--bal-space-small);--bal-option-min-height:1.5rem;--bal-option-background:var(--bal-color-white);--bal-option-background-hovered:var(--bal-color-grey-2);--bal-option-background-selected:var(--bal-color-primary-1);--bal-option-background-selected-hovered:#dddfeb;--bal-option-background-invalid:var(--bal-color-danger-1);--bal-option-background-invalid-hovered:#fbe0de;--bal-option-border-width:var(--bal-border-width-normal);--bal-option-border-color:var(--bal-color-grey-2);--bal-option-font-family:var(--bal-font-family-text);--bal-option-font-weight:var(--bal-font-weight-regular);--bal-option-line-height:1.125rem;--bal-option-text-hovered:var(--bal-color-text-primary-hovered);--bal-option-text-pressed:var(--bal-color-text-primary-pressed);--bal-option-text-disabled:var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-ms-flex:1;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media (hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media (hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media (hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-radio-checkbox-symbol-size:1.125rem;--bal-radio-checkbox-symbol-width:calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height:calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left:calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top:0.188rem;--bal-radio-checkbox-label-min-height:1.125rem}";
+const BalOptionStyle0 = balOptionCss;
+
+const Option = /*@__PURE__*/ proxyCustomElement(class Option extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.balOptionChange = createEvent(this, "balOptionChange", 7);
+        this.balOptionFocus = createEvent(this, "balOptionFocus", 7);
+        this.inputId = `bal-option-${balOptionIds++}`;
+        /**
+         * EVENT BINDING
+         * ------------------------------------------------------
+         */
+        this.onClick = (ev) => {
+            const listEl = this.el.closest('bal-option-list');
+            if (this.disabled || (listEl && listEl.disabled)) {
+                stopEventBubbling(ev);
+            }
+            else {
+                if (listEl && listEl.required && !listEl.multiple) {
+                    if (!this.selected) {
+                        this.select(true);
+                    }
+                }
+                else {
+                    this.select(!this.selected);
+                }
+            }
+        };
+        this.checkbox = false;
+        this.interactionState = BalElementStateListener.DefaultState;
+        this.label = '';
+        this.value = '';
+        this.disabled = false;
+        this.multiline = false;
+        this.invalid = false;
+        this.selected = false;
+        this.focused = false;
+        this.hidden = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    componentWillRender() {
+        if (this.el) {
+            const optionListEl = this.el.closest('bal-option-list');
+            if (optionListEl) {
+                this.checkbox = !!optionListEl.multiple;
+            }
+        }
+    }
+    /**
+     * LISTENERS
+     * ------------------------------------------------------
+     */
+    listenToMouseEnter() {
+        const { label, value, selected, disabled, hidden } = this;
+        if (!hidden && !disabled) {
+            this.balOptionFocus.emit({ label, value, selected });
+        }
+    }
+    elementStateListener(info) {
+        this.interactionChildElements.forEach(element => {
+            element.hovered = info.hovered;
+            element.pressed = info.pressed;
+        });
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * Selects or deselects the option and informs other components
+     */
+    async select(selected = true) {
+        this.selected = selected;
+        const { label, value } = this;
+        this.balOptionChange.emit({ label, value, selected });
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    get interactionChildElements() {
+        return Array.from(this.el.querySelectorAll('bal-checkbox'));
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const block = BEM.block('option');
+        return (h(Host, { key: '2dbf49c5030c61a24ce0b2b8cb2fe0f1ede9895b', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: '1ed42549cea2542e4eb56d7cfc6c1024dd13aa71', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '3f3c59ec2f04e77bd0400ec58b8294c3ecd7a1b7', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '04e84d67e23ba2e5bd59e5ddb7c4549327e77ce0' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+    }
+    get el() { return this; }
+    static get style() { return BalOptionStyle0; }
+}, [4, "bal-option", {
+        "label": [1],
+        "value": [1],
+        "disabled": [4],
+        "multiline": [4],
+        "invalid": [4],
+        "selected": [1028],
+        "focused": [1028],
+        "hidden": [4],
+        "checkbox": [32],
+        "interactionState": [32],
+        "select": [64]
+    }, [[1, "mouseenter", "listenToMouseEnter"]]]);
+__decorate([
+    Logger('bal-option'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "createLogger", null);
+__decorate([
+    ListenToElementStates(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Option.prototype, "elementStateListener", null);
+let balOptionIds = 0;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-option", "bal-checkbox", "bal-icon", "bal-stack"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Option);
+            }
+            break;
+        case "bal-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const BalOption = Option;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-segment.js

@@ -4,10 +4,12 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
-import { j as isDescendant, n as raf } from './helpers.js';
+import { n as raf } from './helpers.js';
 import { d as defaultBalAriaForm } from './form.js';
-import { a as isSpaceKey, i as isEnterKey, d as isArrowUpKey, f as isArrowLeftKey, c as isArrowDownKey, g as isArrowRightKey, h as isHomeKey, j as isEndKey } from './keyboard.helpers.js';
+import { a as isSpaceKey, i as isEnterKey, d as isArrowUpKey, g as isArrowLeftKey, c as isArrowDownKey, h as isArrowRightKey, j as isHomeKey, k as isEndKey } from './keyboard.helpers.js';
 import { L as ListenToFocus } from './focus.decorator.js';
+import { L as ListenToAnimation } from './animation.decorator.js';
+import { L as ListenToVisibility } from './visibility.decorator.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToWindowResize } from './window-resize.decorator.js';
 
@@ -140,12 +142,15 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     focusOutListener(ev) {
         this.balBlur.emit(ev);
     }
-    listenToDidAnimate(ev) {
-        if (ev && ev.target && isDescendant(ev.target, this.el)) {
-            const childRect = this.el.getBoundingClientRect();
-            this.maxWidth = childRect.width;
-            this.windowResizeListener();
-        }
+    animationListener() {
+        const childRect = this.el.getBoundingClientRect();
+        this.maxWidth = childRect.width;
+        this.windowResizeListener();
+    }
+    visibilityListener() {
+        const childRect = this.el.getBoundingClientRect();
+        this.maxWidth = childRect.width;
+        this.windowResizeListener();
     }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
@@ -315,7 +320,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     render() {
         const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { key: '4c6bee1fb3f114c0459fdb9ef6610a618de332f3', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '98c4e333f66632968b120605f66f38e5de5ff34c', onSlotchange: this.onSlottedItemsChange })));
+        return (h(Host, { key: 'e28612fc58901cc642d00f702e7638eca4611e68', role: "radiogroup", id: this.ariaForm.controlId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('invalid').class(invalid)), block.modifier('vertical').class(isVertical)), block.modifier('scrollable').class(scrollable)), block.modifier('keyboard').class(keyboardMode)), block.modifier('disabled').class(disabled)), block.modifier('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { key: '6c720184db8d50c4ba2cb386c406ea131f6f49c6', onSlotchange: this.onSlottedItemsChange })));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -337,7 +342,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         "maxWidth": [32],
         "ariaForm": [32],
         "setAriaForm": [64]
-    }, [[8, "balWillAnimate", "listenToDidAnimate"], [4, "keydown", "listenOnKeyDownOutside"], [0, "keydown", "listenOnKeyDown"]], {
+    }, [[4, "keydown", "listenOnKeyDownOutside"], [0, "keydown", "listenOnKeyDown"]], {
         "disabled": ["disabledChanged"],
         "value": ["valueChanged"]
     }]);
@@ -359,6 +364,18 @@ __decorate([
     __metadata("design:paramtypes", [FocusEvent]),
     __metadata("design:returntype", void 0)
 ], Segment.prototype, "focusOutListener", null);
+__decorate([
+    ListenToAnimation(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "animationListener", null);
+__decorate([
+    ListenToVisibility(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "visibilityListener", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),

package/components/bal-select-option.js

@@ -1,48 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { L as Logger } from './log.js';
-
-const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.label = undefined;
-        this.disabled = false;
-        this.value = undefined;
-        this.for = `bal-selopt-${selectOptionIds++}`;
-    }
-    createLogger(log) {
-        this.log = log;
-    }
-    render() {
-        return (h(Host, { key: '5d3ad22cd5a4a3f681cb90abf1a82e6b8c782a6b', style: { display: 'none' } }, h("slot", { key: 'f9e214692daeafb1670a73f39311fe2d48232620' })));
-    }
-}, [4, "bal-select-option", {
-        "label": [513],
-        "disabled": [4],
-        "value": [513],
-        "for": [513]
-    }]);
-__decorate([
-    Logger('bal-select-option'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Function]),
-    __metadata("design:returntype", void 0)
-], SelectOption.prototype, "createLogger", null);
-let selectOptionIds = 0;
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-select-option"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-select-option":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, SelectOption);
-            }
-            break;
-    } });
-}
+import { S as SelectOption, d as defineCustomElement$1 } from './bal-select-option2.js';
 
 const BalSelectOption = SelectOption;
 const defineCustomElement = defineCustomElement$1;

package/components/bal-select-option2.js

@@ -0,0 +1,47 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { L as Logger } from './log.js';
+
+const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.label = undefined;
+        this.disabled = false;
+        this.value = undefined;
+        this.for = `bal-selopt-${selectOptionIds++}`;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    render() {
+        return (h(Host, { key: '5d3ad22cd5a4a3f681cb90abf1a82e6b8c782a6b', style: { display: 'none' } }, h("slot", { key: 'f9e214692daeafb1670a73f39311fe2d48232620' })));
+    }
+}, [4, "bal-select-option", {
+        "label": [513],
+        "disabled": [4],
+        "value": [513],
+        "for": [513]
+    }]);
+__decorate([
+    Logger('bal-select-option'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], SelectOption.prototype, "createLogger", null);
+let selectOptionIds = 0;
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-select-option"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-select-option":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, SelectOption);
+            }
+            break;
+    } });
+}
+
+export { SelectOption as S, defineCustomElement as d };