@baloise/ds-core 16.5.0 → 16.5.1

package/dist/esm/bal-segment_2.entry.js

@@ -0,0 +1,511 @@
+import { r as registerInstance, c as createEvent, w as writeTask, h, H as Host, g as getElement } from './index-b6003bc7.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
+import { B as BEM } from './bem-8c7d2eb0.js';
+import { L as Logger } from './log-dfd1c19f.js';
+import { e as isSpaceKey, s as isArrowUpKey, y as isArrowLeftKey, q as isArrowDownKey, z as isArrowRightKey, A as isHomeKey, B as isEndKey } from './index.esm-cc299511.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
+import { F as FOCUS_KEYS } from './focus-visible-f0cdd043.js';
+import { l as raf, j as addEventListener, r as removeEventListener } from './helpers-c201154e.js';
+import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';
+import { L as ListenToFocus } from './focus.decorator-8acd79c3.js';
+import { L as ListenToWindowResize } from './window-resize.decorator-9c08027e.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.js';
+import { i as inheritAttributes } from './attributes-4fa7040f.js';
+import './browser-a8073d92.js';
+import './index-82aff103.js';
+import './_commonjsHelpers-1c8beb5f.js';
+import './icons.constant-a7885631.js';
+import './config.utils-6ac6c9bd.js';
+import './listener-04842ae9.js';
+import './breakpoints.subject-e3538fe7.js';
+import './device-8c6d2881.js';
+import './tokens.esm-7cf87670.js';
+
+const balSegmentCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment{display:-ms-flexbox;display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{-ms-flex-direction:column;flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;-ms-flex:1;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{-ms-flex:1;flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
+const BalSegmentStyle0 = balSegmentCss;
+
+const Segment = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.balFocus = createEvent(this, "balFocus", 7);
+        this.balBlur = createEvent(this, "balBlur", 7);
+        this.balChange = createEvent(this, "balChange", 7);
+        this.balSelect = createEvent(this, "balSelect", 7);
+        this.balVertical = createEvent(this, "balVertical", 7);
+        /**
+         * LISTENERS
+         * ------------------------------------------------------
+         */
+        this.hasFocus = false;
+        this.getSegmentItem = (selector) => {
+            var _a, _b;
+            const items = this.allItems.filter(item => !item.disabled);
+            const currIndex = items.findIndex(item => item === document.activeElement.closest('bal-segment-item'));
+            switch (selector) {
+                case 'current':
+                    return items[currIndex];
+                case 'first':
+                    return items[0];
+                case 'last':
+                    return items[items.length - 1];
+                case 'next':
+                    return (_a = items[currIndex + 1]) !== null && _a !== void 0 ? _a : items[0];
+                case 'previous':
+                    return (_b = items[currIndex - 1]) !== null && _b !== void 0 ? _b : items[items.length - 1];
+                default:
+                    return null;
+            }
+        };
+        /**
+         * PRIVATE EVENT HANDLERS
+         * ------------------------------------------------------
+         */
+        this.onPointerDown = () => {
+            this.keyboardMode = false;
+        };
+        this.onSlottedItemsChange = () => {
+            /**
+             * When the slotted segment buttons change we need to
+             * ensure that the new segment buttons are checked if
+             * the value matches the segment button value.
+             */
+            this.valueChanged(this.value);
+            this.defineWidth();
+        };
+        this.onClick = (ev) => {
+            if (this.disabled) {
+                return;
+            }
+            const current = ev.target;
+            const previous = this.checked;
+            // If the current element is a segment then that means
+            // the user tried to swipe to a segment button and
+            // click a segment button at the same time so we should
+            // not update the checked segment button
+            if (current.tagName === 'BAL-SEGMENT') {
+                return;
+            }
+            if (current && current.setFocus) {
+                current.setFocus();
+            }
+            if (previous) {
+                this.checkButton(previous, current);
+            }
+            else {
+                this.setCheckedClasses();
+                this.checkButton(current, current);
+            }
+            if (current !== previous) {
+                this.emitValueChange();
+            }
+        };
+        this.focusedValue = undefined;
+        this.keyboardMode = true;
+        this.isVertical = false;
+        this.isMobile = false;
+        this.maxWidth = 0;
+        this.ariaForm = defaultBalAriaForm;
+        this.invalid = false;
+        this.disabled = false;
+        this.vertical = false;
+        this.scrollable = false;
+        this.expanded = false;
+        this.value = undefined;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    disabledChanged() {
+        this.allItems.map(item => (item.disabled = this.disabled));
+    }
+    valueChanged(value) {
+        /**
+         * `balSelect` is emitted every time the value changes (internal or external changes).
+         * Used by `bal-segment-item` to determine if the button should be checked.
+         */
+        this.balSelect.emit(value);
+    }
+    /**
+     * LIFECYCLE
+     * ------------------------------------------------------
+     */
+    connectedCallback() {
+        this.el.addEventListener('touchstart', this.onPointerDown);
+        this.el.addEventListener('mousedown', this.onPointerDown);
+        this.disabledChanged();
+    }
+    disconnectedCallback() {
+        this.el.removeEventListener('touchstart', this.onPointerDown);
+        this.el.removeEventListener('mousedown', this.onPointerDown);
+    }
+    async componentDidLoad() {
+        this.setCheckedClasses();
+        this.defineWidth();
+    }
+    focusInListener(ev) {
+        this.balFocus.emit(ev);
+    }
+    focusOutListener(ev) {
+        this.balBlur.emit(ev);
+    }
+    breakpointListener(breakpoints) {
+        this.isMobile = breakpoints.mobile;
+    }
+    windowResizeListener() {
+        if (this.vertical === false && this.maxWidth > 0) {
+            const parent = this.el.parentElement.getBoundingClientRect();
+            if (parent.width < this.maxWidth) {
+                //
+                // element in horizontal is to big
+                this.emitVerticalChange(true);
+            }
+            else {
+                //
+                // element has enough space in parent element
+                this.emitVerticalChange(false);
+            }
+        }
+        else {
+            this.emitVerticalChange(true);
+        }
+    }
+    listenOnKeyDownOutside() {
+        this.keyboardMode = true;
+    }
+    listenOnKeyDown(ev) {
+        this.keyboardMode = FOCUS_KEYS.includes(ev.key);
+        let current;
+        if (isSpaceKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('current');
+            this.value = current.value;
+        }
+        else if (isArrowUpKey(ev) || isArrowLeftKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('previous');
+        }
+        else if (isArrowDownKey(ev) || isArrowRightKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('next');
+        }
+        else if (isHomeKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('first');
+        }
+        else if (isEndKey(ev)) {
+            stopEventBubbling(ev);
+            current = this.getSegmentItem('last');
+        }
+        if (!current) {
+            return;
+        }
+        const previous = this.checked;
+        if (current !== previous) {
+            this.checkButton(previous, current);
+            this.emitValueChange();
+        }
+        if (current) {
+            current.setFocus();
+        }
+    }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    /**
+     * GETTERS
+     * ------------------------------------------------------
+     */
+    get allItems() {
+        return Array.from(this.el.querySelectorAll('bal-segment-item'));
+    }
+    get checked() {
+        return this.allItems.find(item => item.value === this.value);
+    }
+    /**
+     * PRIVATE METHODS
+     * ------------------------------------------------------
+     */
+    emitValueChange() {
+        this.balChange.emit(this.value);
+    }
+    emitVerticalChange(isVertical) {
+        if (this.isVertical !== isVertical) {
+            this.isVertical = isVertical;
+            this.balVertical.emit(this.isVertical);
+        }
+    }
+    defineWidth() {
+        raf(() => {
+            if (this.isVertical === false) {
+                const childRect = this.el.getBoundingClientRect();
+                this.maxWidth = childRect.width;
+            }
+            this.windowResizeListener();
+        });
+    }
+    getIndicator(item) {
+        if (item) {
+            const root = item.shadowRoot || item;
+            return root.querySelector('.bal-segment-item__indicator');
+        }
+        return null;
+    }
+    checkButton(previous, current) {
+        const previousIndicator = this.getIndicator(previous);
+        const currentIndicator = this.getIndicator(current);
+        if (previousIndicator === null || currentIndicator === null) {
+            return;
+        }
+        const previousClientRect = previousIndicator.getBoundingClientRect();
+        const currentClientRect = currentIndicator.getBoundingClientRect();
+        const widthDelta = previousClientRect.width / currentClientRect.width;
+        const xPosition = previousClientRect.left - currentClientRect.left;
+        // Scale the indicator width to match the previous indicator width
+        // and translate it on top of the previous indicator
+        let transform = `translate3d(${xPosition}px, 0, 0) scaleX(${widthDelta})`;
+        if (this.isVertical) {
+            const heightDelta = previousClientRect.height / currentClientRect.height;
+            const yPosition = previousClientRect.top - currentClientRect.top;
+            // Scale the indicator width to match the previous indicator width
+            // and translate it on top of the previous indicator
+            transform = `translate3d(0, ${yPosition}px, 0) scaleY(${heightDelta})`;
+        }
+        writeTask(() => {
+            // Remove the transition before positioning on top of the previous indicator
+            currentIndicator.classList.remove('bal-segment-item__indicator--animated');
+            currentIndicator.style.setProperty('transform', transform);
+            // Force a repaint to ensure the transform happens
+            currentIndicator.getBoundingClientRect();
+            // Add the transition to move the indicator into place
+            currentIndicator.classList.add('bal-segment-item__indicator--animated');
+            // Remove the transform to slide the indicator back to the button clicked
+            currentIndicator.style.setProperty('transform', '');
+        });
+        this.value = current.value;
+        this.setCheckedClasses();
+    }
+    setCheckedClasses() {
+        const items = this.allItems;
+        const index = items.findIndex(item => item.value === this.value);
+        const next = index + 1;
+        const previous = index - 1;
+        for (const item of items) {
+            item.classList.remove('bal-segment-item--after-checked');
+            item.classList.remove('bal-segment-item--before-checked');
+        }
+        if (next < items.length) {
+            items[next].classList.add('bal-segment-item--after-checked');
+        }
+        if (previous < items.length && previous >= 0) {
+            items[previous].classList.add('bal-segment-item--before-checked');
+        }
+    }
+    /**
+     * RENDER
+     * ------------------------------------------------------
+     */
+    render() {
+        const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
+        const block = BEM.block('segment');
+        return (h(Host, { role: "radiogroup", "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", { onSlotchange: this.onSlottedItemsChange })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "disabled": ["disabledChanged"],
+        "value": ["valueChanged"]
+    }; }
+};
+__decorate([
+    Logger('bal-segment'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "createLogger", null);
+__decorate([
+    ListenToFocus(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [FocusEvent]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "focusInListener", null);
+__decorate([
+    ListenToFocus(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [FocusEvent]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "focusOutListener", null);
+__decorate([
+    ListenToBreakpoints(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "breakpointListener", null);
+__decorate([
+    ListenToWindowResize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], Segment.prototype, "windowResizeListener", null);
+Segment.style = BalSegmentStyle0;
+
+const balSegmentItemCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment-item{display:block;position:relative;height:auto;text-decoration:none;text-overflow:ellipsis;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;grid-row:1;-webkit-font-kerning:none;font-kerning:none}.bal-segment-item--disabled{cursor:default !important;pointer-events:none !important}.bal-segment-item__button{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;min-height:2.5rem;min-width:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1;padding-top:.375rem;padding-bottom:.375rem;padding-left:20px;padding-right:20px;outline:none;border-color:rgba(0,0,0,0);border-width:var(--bal-border-width-normal);border-style:solid;border-radius:var(--bal-radius-normal);background:rgba(0,0,0,0);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);color:var(--bal-segment-item-text-color);overflow:hidden;position:relative;contain:content;pointer-events:none;cursor:pointer;z-index:2}.bal-segment-item__button--vertical{padding-left:.75rem;padding-right:.75rem}.bal-segment-item__button span{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-regular)}.bal-segment-item__button{will-change:color,padding;-webkit-transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:color 160ms cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1);transition:padding 160ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{content:\"\";position:absolute;background:var(--bal-segment-item-divider-background);border-radius:var(--bal-radius-normal)}.bal-segment-item:not(.bal-segment-item--vertical):not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{top:2px;bottom:2px;right:-1px;width:2px}.bal-segment-item.bal-segment-item--vertical:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{left:2px;right:2px;bottom:-1px;height:2px}.bal-segment-item--invalid:not(.bal-segment-item--checked):not(.bal-segment-item--last):not(.bal-segment-item--before-checked)::after{background:var(--bal-segment-item-divider-background-invalid)}.bal-segment-item__indicator{-webkit-transform-origin:left;transform-origin:left;position:absolute;opacity:0;-webkit-box-sizing:border-box;box-sizing:border-box;pointer-events:none;border-radius:var(--bal-radius-normal);background:var(--bal-segment-item-indicator-background);top:0;left:0}.bal-segment-item__indicator--vertical{-webkit-transform-origin:top;transform-origin:top}.bal-segment-item__indicator--invalid{background:var(--bal-segment-item-indicator-background-invalid)}.bal-segment-item__indicator--background{min-width:100%;min-height:100%;-webkit-transform:none;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;-webkit-transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease;transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1),min-width 100ms ease,min-height 100ms ease,top 100ms ease,left 100ms ease,bottom 100ms ease,right 100ms ease,-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__indicator--checked{opacity:1}.bal-segment-item:active .bal-segment-item__indicator{min-width:calc(100% - 4px);min-height:calc(100% - 4px);top:2px !important;bottom:2px !important;left:2px !important;right:2px !important}.bal-segment-item__button__icon{position:absolute !important;opacity:0;width:0 !important;-webkit-transform:translateX(0.1rem);transform:translateX(0.1rem);pointer-events:none !important;cursor:inherit;will-change:transform,opacity}.bal-segment-item__button__icon:not(.bal-segment-item__button__icon--vertical){left:10px}.bal-segment-item__button__icon--vertical{right:10px}.bal-segment-item__button__icon--animated{opacity:1;width:.875rem !important;-webkit-transform:translateX(-4px);transform:translateX(-4px);-webkit-transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),transform 260ms cubic-bezier(0.4, 0, 0.2, 1),-webkit-transform 260ms cubic-bezier(0.4, 0, 0.2, 1)}.bal-segment-item__button--checked{color:var(--bal-segment-item-text-color-checked);padding-right:40px}.bal-segment-item__button--checked:not(.bal-segment-item__button--vertical){padding-left:26px;padding-right:12px}@media (hover: hover)and (pointer: fine){.bal-segment-item:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-hovered)}}.bal-segment-item:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-checked-pressed)}.bal-segment--keyboard .bal-segment-item__button:not(.bal-segment-item__button--disabled):focus-visible,.bal-segment--keyboard .bal-segment-item__button--focused:not(.bal-segment-item__button--disabled){border-color:var(--bal-segment-item-focus-border);border-width:var(--bal-border-width-normal);border-style:solid;-webkit-transition:border 300ms ease-in-out;transition:border 300ms ease-in-out}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled) .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid)}@media (hover: hover)and (pointer: fine){.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):hover .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-hovered)}}.bal-segment-item.bal-segment-item--invalid:not(.bal-segment-item--disabled):active .bal-segment-item__button:not(.bal-segment-item__button--checked){color:var(--bal-segment-item-text-color-invalid-pressed)}.bal-segment-item__button--invalid.bal-segment-item__button--checked{color:var(--bal-color-text-white)}.bal-segment-item__button--disabled{background:rgba(0,0,0,0);color:var(--bal-segment-item-text-color-disabled)}.bal-segment-item__button--disabled.bal-segment-item__button--checked{background:var(--bal-segment-item-indicator-background-disabled);color:var(--bal-segment-item-text-color-disabled-checked)}.bal-segment-item__button__slot--hidden{display:none !important}";
+const BalSegmentItemStyle0 = balSegmentItemCss;
+
+let SegmentItemIds = 0;
+const SegmentItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.segmentEl = null;
+        this.inheritedAttributes = {};
+        this.internalId = SegmentItemIds++;
+        this.inputId = `bal-si-${this.internalId}`;
+        this.updateVertical = (ev) => {
+            this.isVertical = ev.detail;
+        };
+        this.updateState = () => {
+            const { segmentEl } = this;
+            if (segmentEl) {
+                if (segmentEl.value === '' || segmentEl.value === undefined || segmentEl.value === null) {
+                    const items = this.allAvailableOptions;
+                    if (items.length > 0) {
+                        const first = items[0];
+                        this.isFocusable = first === this.el;
+                    }
+                }
+                else {
+                    this.checked = segmentEl.value === this.value;
+                    this.isFocusable = segmentEl.value === this.value;
+                }
+                if (segmentEl.disabled) {
+                    this.disabled = true;
+                }
+                this.isLast = segmentEl.lastElementChild === this.el;
+                this.isFirst = segmentEl.firstElementChild === this.el;
+                this.calculateEmptyValue();
+            }
+        };
+        this.onSlottedItemsChange = () => {
+            /**
+             * When the slotted segment buttons change we need to
+             * ensure that the new segment buttons are checked if
+             * the value matches the segment button value.
+             */
+            this.checkSlotContent();
+        };
+        this.hasSlotContent = false;
+        this.isFocusable = false;
+        this.isVertical = false;
+        this.isLast = false;
+        this.isFirst = false;
+        this.hasEmptyValue = true;
+        this.ariaForm = defaultBalAriaForm;
+        this.disabled = false;
+        this.invalid = false;
+        this.focused = false;
+        this.checked = false;
+        this.label = '';
+        this.value = 'bal-si-' + this.internalId;
+    }
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.updateState();
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
+    }
+    componentDidLoad() {
+        const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
+        if (segmentEl) {
+            addEventListener(segmentEl, 'balSelect', this.updateState);
+            addEventListener(segmentEl, 'balVertical', this.updateVertical);
+        }
+        raf(() => {
+            this.checkSlotContent();
+            this.updateState();
+        });
+    }
+    disconnectedCallback() {
+        const segmentEl = this.segmentEl;
+        if (segmentEl) {
+            removeEventListener(segmentEl, 'balSelect', this.updateState);
+            removeEventListener(segmentEl, 'balVertical', this.updateVertical);
+            this.segmentEl = null;
+        }
+    }
+    calculateEmptyValue() {
+        if (this.segmentEl) {
+            const segments = Array.from(this.segmentEl.querySelectorAll('bal-segment-item'));
+            this.hasEmptyValue = !segments.some(item => item.value === this.segmentEl.value);
+        }
+        else {
+            this.hasEmptyValue = false;
+        }
+    }
+    /**
+     * @internal
+     * Focuses the native <button> element
+     * inside of ion-segment-button.
+     */
+    async setFocus() {
+        const { nativeEl } = this;
+        if (nativeEl !== undefined) {
+            nativeEl.focus();
+        }
+    }
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
+    get allAvailableOptions() {
+        return this.allOptions.filter(item => !item.disabled);
+    }
+    get allOptions() {
+        const { segmentEl } = this;
+        if (segmentEl) {
+            return Array.from(segmentEl.querySelectorAll('bal-segment-item'));
+        }
+        return [];
+    }
+    checkSlotContent() {
+        const slot = this.el.querySelector('[part="slot"]');
+        const children = slot ? slot.innerHTML.trim() : '';
+        this.hasSlotContent = children.length > 0;
+    }
+    render() {
+        const { checked, focused, segmentEl, label, isFocusable, isFirst, hasEmptyValue } = this;
+        const block = BEM.block('segment-item');
+        const buttonBem = block.element('button');
+        const indicatorBem = block.element('indicator');
+        const invalid = this.invalid || (segmentEl && segmentEl.invalid);
+        const disabled = this.disabled || (segmentEl && segmentEl.disabled);
+        const vertical = this.isVertical;
+        const hasTabindex = (hasEmptyValue && isFirst) || (isFocusable && !disabled);
+        const id = (hasTabindex && this.ariaForm.controlId) || this.inputId;
+        let buttonAttributes = {};
+        if (hasTabindex) {
+            let labelId = this.ariaForm.labelId || null;
+            labelId = `${labelId || ''} ${id}-lbl`.trim();
+            buttonAttributes = {
+                'aria-labelledby': labelId,
+                'aria-describedby': this.ariaForm.messageId,
+            };
+        }
+        return (h(Host, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('vertical').class(vertical)), block.modifier('disabled').class(disabled)), block.modifier('checked').class(checked)), block.modifier('invalid').class(invalid)), block.modifier('last').class(this.isLast && !checked)) }, h("button", Object.assign({ id: id, role: "radio", "aria-checked": checked ? 'true' : 'false' }, buttonAttributes, { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, buttonBem.class()), buttonBem.modifier('checked').class(checked)), buttonBem.modifier('invalid').class(invalid)), buttonBem.modifier('disabled').class(disabled)), buttonBem.modifier('focused').class(focused)), buttonBem.modifier('vertical').class(vertical)), type: 'button', tabIndex: hasTabindex ? 0 : -1, part: "native", disabled: disabled, ref: el => (this.nativeEl = el) }, this.inheritedAttributes), h("bal-icon", { name: "check", size: "small", class: Object.assign(Object.assign(Object.assign({}, buttonBem.element('icon').class()), buttonBem.element('icon').modifier('animated').class(checked)), buttonBem.element('icon').modifier('vertical').class(vertical)), color: disabled ? 'grey-dark' : invalid ? 'white' : 'primary' }), h("bal-stack", { space: "x-small", layout: 'horizontal' }, h("bal-content", { space: "none" }, h("bal-label", { htmlId: `bal-si-${this.internalId}-label` }, label), h("span", { part: "slot", class: Object.assign({}, buttonBem.element('slot').modifier('hidden').class(!this.hasSlotContent)) }, ' ', h("slot", { onSlotchange: this.onSlottedItemsChange }))))), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, indicatorBem.class()), indicatorBem.modifier('animated').class()), indicatorBem.modifier('background').class()), indicatorBem.modifier('disabled').class(disabled)), indicatorBem.modifier('invalid').class(invalid)), indicatorBem.modifier('checked').class(checked)), indicatorBem.modifier('vertical').class(vertical)) })));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valueChanged"]
+    }; }
+};
+SegmentItem.style = BalSegmentItemStyle0;
+
+export { Segment as bal_segment, SegmentItem as bal_segment_item };

package/dist/esm/bal-select_2.entry.js

@@ -2,9 +2,9 @@ import { r as registerInstance, c as createEvent, h, H as Host, g as getElement
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { l as lodash_isnil } from './index-82aff103.js';
 import { k as rIC, d as waitAfterIdleCallback, e as deepReady, i as isDescendant, h as debounce } from './helpers-c201154e.js';
-import { e as isSpaceKey, o as areArraysEqual, q as isArrowDownKey, s as isArrowUpKey, h as isEnterKey, u as isEscapeKey, y as isBackspaceKey } from './index.esm-76abd8e3.js';
+import { e as isSpaceKey, o as areArraysEqual, q as isArrowDownKey, s as isArrowUpKey, h as isEnterKey, u as isEscapeKey, C as isBackspaceKey } from './index.esm-cc299511.js';
 import { r as removeValue, p as preventDefault, l as length, g as getValues, i as includes, s as startsWith, a as addValue, f as findLabelByValue, b as findOptionByLabel, v as validateAfterBlur } from './utils-9fbab1d3.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { d as defaultBalAriaForm } from './form-fb8dd9f5.js';

package/dist/esm/bal-shape.entry.js

@@ -1,6 +1,6 @@
 import { r as registerInstance, h, H as Host, g as getElement } from './index-b6003bc7.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
-import { f as balColorGrey4, g as balColorYellow3, h as balColorYellow5, i as balColorPurple3, j as balColorPurple6, k as balColorRed3, l as balColorRed5, m as balColorGreen3, n as balColorGreen6 } from './tokens.esm-337782ae.js';
+import { f as balColorGrey4, g as balColorYellow3, h as balColorYellow5, i as balColorPurple3, j as balColorPurple6, k as balColorRed3, l as balColorRed5, m as balColorGreen3, n as balColorGreen6 } from './tokens.esm-7cf87670.js';
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
 const BalShapeStyle0 = balShapeCss;

package/dist/esm/bal-steps.entry.js

@@ -3,12 +3,12 @@ import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { m as debounceEvent } from './helpers-c201154e.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
-import { o as areArraysEqual } from './index.esm-76abd8e3.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { o as areArraysEqual } from './index.esm-cc299511.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { n as newBalStepOption } from './bal-step.util-3905ad56.js';
-import { b as balBreakpoints } from './breakpoints.subject-3605e395.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.js';
 import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.js';
 import './browser-a8073d92.js';
 import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
@@ -16,7 +16,7 @@ import './index-82aff103.js';
 import './_commonjsHelpers-1c8beb5f.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-337782ae.js';
+import './tokens.esm-7cf87670.js';
 
 const StepIcon = ({ item, isMobile }) => {
     const bemEl = BEM.block('steps').element('nav').element('item').element('icon');

package/dist/esm/bal-tab-item_2.entry.js

@@ -1,17 +1,17 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
 import { a as inheritTrackingAttributes } from './attributes-4fa7040f.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { o as areArraysEqual } from './index.esm-76abd8e3.js';
+import { o as areArraysEqual } from './index.esm-cc299511.js';
 import { l as raf, e as deepReady, t as transitionEndAsync, m as debounceEvent, n as hasParent, o as isChildOfEventTarget, i as isDescendant, b as waitAfterFramePaint } from './helpers-c201154e.js';
 import { B as BEM } from './bem-8c7d2eb0.js';
 import { L as Logger } from './log-dfd1c19f.js';
 import { n as newBalTabOption } from './bal-tab.util-933315fe.js';
-import { s as stopEventBubbling } from './form-input-28a08ec5.js';
+import { s as stopEventBubbling } from './form-input-a8fdaaef.js';
 import { b as balBrowser } from './browser-a8073d92.js';
 import { a as getComputedPadding } from './style-ca1bd202.js';
-import { b as balBreakpoints } from './breakpoints.subject-3605e395.js';
+import { b as balBreakpoints } from './breakpoints.subject-e3538fe7.js';
 import { L as ListenToMutation } from './mutation.decorator-c7b24839.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-f2ac9963.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-8a50482f.js';
 import { L as ListenToResize } from './resize.decorator-f70563b5.js';
 import { L as ListenToConfig } from './config.decorator-d18abfe1.js';
 import './index-82aff103.js';
@@ -20,7 +20,7 @@ import './icons.constant-a7885631.js';
 import './config.utils-6ac6c9bd.js';
 import './device-8c6d2881.js';
 import './listener-04842ae9.js';
-import './tokens.esm-337782ae.js';
+import './tokens.esm-7cf87670.js';
 
 const TabItem = class {
     constructor(hostRef) {

package/dist/esm/bal-textarea.entry.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
-import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, h as inputHandleClick, a as inputHandleHostClick, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, h as inputHandleClick, a as inputHandleHostClick, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
 import { m as debounceEvent } from './helpers-c201154e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { B as BEM } from './bem-8c7d2eb0.js';

package/dist/esm/bal-time-input.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-b6003bc7.js';
 import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
 import { l as lodash_isnil } from './index-82aff103.js';
-import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-28a08ec5.js';
+import { g as getInputTarget, i as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, b as inputListenOnClick, j as inputHandleReset, c as inputSetFocus, d as inputSetBlur } from './form-input-a8fdaaef.js';
 import { m as debounceEvent } from './helpers-c201154e.js';
 import { i as inheritAttributes } from './attributes-4fa7040f.js';
 import { i as isCtrlOrCommandKey, N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant-0eb059e0.js';