@baloise/ds-core 16.5.0 → 16.5.1

package/components/bal-field.js

@@ -29,6 +29,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-input-slider',
             'bal-file-upload',
             'bal-dropdown',
+            'bal-segment',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
         this.isDirectChild = (el) => {
@@ -118,6 +119,8 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
+            'bal-field-control bal-segment-item',
+            'bal-field-control bal-segment',
             'bal-field-control bal-checkbox-group',
             'bal-field-control bal-radio-group',
             'bal-field-control bal-number-input',

package/components/bal-input-date2.js

@@ -4,7 +4,7 @@ import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { i as inheritAttributes } from './attributes.js';
 import { o as hasParent } from './helpers.js';
-import { i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { h as hasValueChanged, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { d as dateSeparator } from './index.esm.js';
 import { N as NUMBER_KEYS } from './keys.constant.js';
@@ -128,8 +128,7 @@ class MaskContext {
                     this._options.component.balInput.emit(this.value);
                 }
                 if ((eventType === 'change' || eventType === 'blur') && parsedValue !== undefined) {
-                    const valueChanged = this._options.component.value !== parsedValue;
-                    if (valueChanged) {
+                    if (hasValueChanged(this._options.component.value, parsedValue)) {
                         this._options.component.value = parsedValue;
                         this._options.component.balChange.emit(parsedValue);
                     }

package/components/bal-input.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { m as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
-import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, h as inputHandleClick, c as inputHandleHostClick, d as inputListenOnClick, j as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, j as inputHandleClick, c as inputHandleHostClick, d as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { l as lodash_isnil } from './index2.js';
 import { i as isCtrlOrCommandKey, A as ACTION_KEYS, N as NUMBER_KEYS } from './keys.constant.js';
 import { B as BEM } from './bem.js';

package/components/bal-number-input.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { h as inputHandleClick, c as inputHandleHostClick, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, k as getNativeInputValue, l as getUpcomingValue, s as stopEventBubbling, d as inputListenOnClick, j as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { j as inputHandleClick, c as inputHandleHostClick, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, l as getNativeInputValue, m as getUpcomingValue, s as stopEventBubbling, d as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { m as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { y as getDecimalSeparator$1, z as getThousandSeparator$1, x as formatLocaleNumber$1 } from './index.esm.js';

package/components/bal-segment-item.js

@@ -1,7 +1,8 @@
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { B as BEM } from './bem.js';
 import { i as inheritAttributes } from './attributes.js';
-import { j as addEventListener, r as removeEventListener, l as raf } from './helpers.js';
+import { j as addEventListener, l as raf, r as removeEventListener } from './helpers.js';
+import { d as defaultBalAriaForm } from './form.js';
 import { d as defineCustomElement$5 } from './bal-content2.js';
 import { d as defineCustomElement$4 } from './bal-icon2.js';
 import { d as defineCustomElement$3 } from './bal-label2.js';
@@ -10,15 +11,15 @@ import { d as defineCustomElement$2 } from './bal-stack2.js';
 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 ids = 0;
+let SegmentItemIds = 0;
 const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.balBlur = createEvent(this, "balBlur", 7);
         this.segmentEl = null;
         this.inheritedAttributes = {};
-        this.id = ids++;
+        this.internalId = SegmentItemIds++;
+        this.inputId = `bal-si-${this.internalId}`;
         this.updateVertical = (ev) => {
             this.isVertical = ev.detail;
         };
@@ -26,7 +27,7 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
             const { segmentEl } = this;
             if (segmentEl) {
                 if (segmentEl.value === '' || segmentEl.value === undefined || segmentEl.value === null) {
-                    const items = this.items;
+                    const items = this.allAvailableOptions;
                     if (items.length > 0) {
                         const first = items[0];
                         this.isFocusable = first === this.el;
@@ -39,6 +40,9 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
                 if (segmentEl.disabled) {
                     this.disabled = true;
                 }
+                this.isLast = segmentEl.lastElementChild === this.el;
+                this.isFirst = segmentEl.firstElementChild === this.el;
+                this.calculateEmptyValue();
             }
         };
         this.onSlottedItemsChange = () => {
@@ -52,23 +56,35 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
         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.id;
+        this.value = 'bal-si-' + this.internalId;
     }
-    valueChanged() {
-        this.updateState();
+    valueChanged(newValue, oldValue) {
+        if (newValue !== oldValue) {
+            this.updateState();
+        }
     }
-    connectedCallback() {
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
+    }
+    componentDidLoad() {
         const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
         if (segmentEl) {
-            this.updateState();
             addEventListener(segmentEl, 'balSelect', this.updateState);
             addEventListener(segmentEl, 'balVertical', this.updateVertical);
         }
+        raf(() => {
+            this.checkSlotContent();
+            this.updateState();
+        });
     }
     disconnectedCallback() {
         const segmentEl = this.segmentEl;
@@ -78,11 +94,14 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
             this.segmentEl = null;
         }
     }
-    componentWillLoad() {
-        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
-    }
-    componentDidLoad() {
-        raf(() => this.checkSlotContent());
+    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
@@ -95,54 +114,47 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
             nativeEl.focus();
         }
     }
-    get items() {
-        return this.allItems.filter(item => !item.disabled);
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
     }
-    get allItems() {
+    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 [];
     }
-    isFirst() {
-        const { segmentEl } = this;
-        let items = this.items;
-        if (segmentEl && segmentEl.disabled) {
-            items = this.allItems;
-        }
-        if (items.length > 0) {
-            const first = items[0];
-            return first === this.el;
-        }
-        return false;
-    }
-    isLast() {
-        const { segmentEl } = this;
-        let items = this.items;
-        if (segmentEl && segmentEl.disabled) {
-            items = this.allItems;
-        }
-        if (items.length > 0) {
-            const last = items[items.length - 1];
-            return last === this.el;
-        }
-        return false;
-    }
     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 } = this;
+        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;
-        return (h(Host, { class: Object.assign(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('line').class(!this.isFirst() && !checked)), block.modifier('last').class(this.isLast() && !checked)) }, h("button", Object.assign({ role: "radio", "aria-checked": checked ? 'true' : 'false', 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)), "aria-labelledby": `bal-si-${this.id}-label`, type: 'button', tabIndex: isFocusable ? 0 : -1, part: "native", onBlur: ev => this.balBlur.emit(ev), 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.id}-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)) })));
+        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 this; }
     static get watchers() { return {
@@ -155,11 +167,16 @@ const SegmentItem = /*@__PURE__*/ proxyCustomElement(class SegmentItem extends H
         "focused": [1028],
         "checked": [1028],
         "label": [1],
-        "value": [8],
+        "value": [1032],
         "hasSlotContent": [32],
         "isFocusable": [32],
         "isVertical": [32],
-        "setFocus": [64]
+        "isLast": [32],
+        "isFirst": [32],
+        "hasEmptyValue": [32],
+        "ariaForm": [32],
+        "setFocus": [64],
+        "setAriaForm": [64]
     }, undefined, {
         "value": ["valueChanged"]
     }]);

package/components/bal-segment.js

@@ -6,6 +6,8 @@ import { a as isSpaceKey, q as isArrowUpKey, A as isArrowLeftKey, o as isArrowDo
 import { s as stopEventBubbling } from './form-input.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
 import { l as raf } from './helpers.js';
+import { d as defaultBalAriaForm } from './form.js';
+import { L as ListenToFocus } from './focus.decorator.js';
 import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
 import { L as ListenToWindowResize } from './window-resize.decorator.js';
 
@@ -16,13 +18,19 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     constructor() {
         super();
         this.__registerHost();
+        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.items.filter(item => !item.disabled);
+            const items = this.allItems.filter(item => !item.disabled);
             const currIndex = items.findIndex(item => item === document.activeElement.closest('bal-segment-item'));
             switch (selector) {
                 case 'current':
@@ -87,6 +95,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         this.isVertical = false;
         this.isMobile = false;
         this.maxWidth = 0;
+        this.ariaForm = defaultBalAriaForm;
         this.invalid = false;
         this.disabled = false;
         this.vertical = false;
@@ -97,6 +106,9 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     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).
@@ -111,6 +123,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
     connectedCallback() {
         this.el.addEventListener('touchstart', this.onPointerDown);
         this.el.addEventListener('mousedown', this.onPointerDown);
+        this.disabledChanged();
     }
     disconnectedCallback() {
         this.el.removeEventListener('touchstart', this.onPointerDown);
@@ -120,10 +133,12 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         this.setCheckedClasses();
         this.defineWidth();
     }
-    /**
-     * LISTENERS
-     * ------------------------------------------------------
-     */
+    focusInListener(ev) {
+        this.balFocus.emit(ev);
+    }
+    focusOutListener(ev) {
+        this.balBlur.emit(ev);
+    }
     breakpointListener(breakpoints) {
         this.isMobile = breakpoints.mobile;
     }
@@ -145,9 +160,8 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             this.emitVerticalChange(true);
         }
     }
-    listenOnBalBlur(ev) {
-        stopEventBubbling(ev);
-        this.balBlur.emit(ev.detail);
+    listenOnKeyDownOutside() {
+        this.keyboardMode = true;
     }
     listenOnKeyDown(ev) {
         this.keyboardMode = FOCUS_KEYS.includes(ev.key);
@@ -155,6 +169,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         if (isSpaceKey(ev)) {
             stopEventBubbling(ev);
             current = this.getSegmentItem('current');
+            this.value = current.value;
         }
         else if (isArrowUpKey(ev) || isArrowLeftKey(ev)) {
             stopEventBubbling(ev);
@@ -184,15 +199,25 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
             current.setFocus();
         }
     }
+    /**
+     * PUBLIC METHODS
+     * ------------------------------------------------------
+     */
+    /**
+     * @internal
+     */
+    async setAriaForm(ariaForm) {
+        this.ariaForm = Object.assign({}, ariaForm);
+    }
     /**
      * GETTERS
      * ------------------------------------------------------
      */
-    get items() {
+    get allItems() {
         return Array.from(this.el.querySelectorAll('bal-segment-item'));
     }
     get checked() {
-        return this.items.find(item => item.value === this.value);
+        return this.allItems.find(item => item.value === this.value);
     }
     /**
      * PRIVATE METHODS
@@ -217,8 +242,11 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         });
     }
     getIndicator(item) {
-        const root = item.shadowRoot || item;
-        return root.querySelector('.bal-segment-item__indicator');
+        if (item) {
+            const root = item.shadowRoot || item;
+            return root.querySelector('.bal-segment-item__indicator');
+        }
+        return null;
     }
     checkButton(previous, current) {
         const previousIndicator = this.getIndicator(previous);
@@ -255,7 +283,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         this.setCheckedClasses();
     }
     setCheckedClasses() {
-        const items = this.items;
+        const items = this.allItems;
         const index = items.findIndex(item => item.value === this.value);
         const next = index + 1;
         const previous = index - 1;
@@ -275,12 +303,13 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
      * ------------------------------------------------------
      */
     render() {
-        const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile } = this;
+        const { invalid, isVertical, scrollable, keyboardMode, expanded, isMobile, disabled } = this;
         const block = BEM.block('segment');
-        return (h(Host, { role: "radiogroup", class: 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('expanded').class((expanded || isMobile) && !isVertical)), onClick: this.onClick }, h("slot", { onSlotchange: this.onSlottedItemsChange })));
+        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 this; }
     static get watchers() { return {
+        "disabled": ["disabledChanged"],
         "value": ["valueChanged"]
     }; }
     static get style() { return BalSegmentStyle0; }
@@ -295,8 +324,11 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         "keyboardMode": [32],
         "isVertical": [32],
         "isMobile": [32],
-        "maxWidth": [32]
-    }, [[0, "balBlur", "listenOnBalBlur"], [0, "keydown", "listenOnKeyDown"]], {
+        "maxWidth": [32],
+        "ariaForm": [32],
+        "setAriaForm": [64]
+    }, [[4, "keydown", "listenOnKeyDownOutside"], [0, "keydown", "listenOnKeyDown"]], {
+        "disabled": ["disabledChanged"],
         "value": ["valueChanged"]
     }]);
 __decorate([
@@ -305,6 +337,18 @@ __decorate([
     __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),

package/components/bal-textarea.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, h as inputHandleClick, c as inputHandleHostClick, d as inputListenOnClick, j as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, j as inputHandleClick, c as inputHandleHostClick, d as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { m as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { B as BEM } from './bem.js';

package/components/bal-time-input.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
 import { l as lodash_isnil } from './index2.js';
-import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, d as inputListenOnClick, j as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
+import { g as getInputTarget, b as inputHandleFocus, e as inputHandleBlur, f as inputHandleChange, s as stopEventBubbling, d as inputListenOnClick, k as inputHandleReset, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { m as debounceEvent } from './helpers.js';
 import { i as inheritAttributes } from './attributes.js';
 import { i as isCtrlOrCommandKey, N as NUMBER_KEYS, A as ACTION_KEYS } from './keys.constant.js';

package/components/form-input.js

@@ -73,5 +73,18 @@ const inputHandleChange = (component) => {
         component.balChange.emit(component.value);
     }
 };
+const isEmptyValue = (value) => {
+    return (value === '' ||
+        value === undefined ||
+        value === null ||
+        (Array.isArray(value) && !value.length) ||
+        (typeof value === 'number' && isNaN(value)));
+};
+const parseValue = (value) => {
+    return isEmptyValue(value) ? undefined : value;
+};
+const hasValueChanged = (oldValue, newValue) => {
+    return parseValue(oldValue) !== parseValue(newValue);
+};
 
-export { inputSetBlur as a, inputHandleFocus as b, inputHandleHostClick as c, inputListenOnClick as d, inputHandleBlur as e, inputHandleChange as f, getInputTarget as g, inputHandleClick as h, inputSetFocus as i, inputHandleReset as j, getNativeInputValue as k, getUpcomingValue as l, stopEventBubbling as s };
+export { inputSetBlur as a, inputHandleFocus as b, inputHandleHostClick as c, inputListenOnClick as d, inputHandleBlur as e, inputHandleChange as f, getInputTarget as g, hasValueChanged as h, inputSetFocus as i, inputHandleClick as j, inputHandleReset as k, getNativeInputValue as l, getUpcomingValue as m, stopEventBubbling as s };

package/components/index.js

@@ -328,7 +328,7 @@ class BalSnackbarController extends BalNoticeController {
 const balSnackbarController = new BalSnackbarController();
 
 // generated by .build/version.js
-const VERSION = '16.5.0';
+const VERSION = '16.5.1';
 
 const initializeBaloiseDesignSystem = (userConfig = {}, platformConfig = undefined, win = {}) => {
     if (Object.keys(win).length === 0 && balBrowser.hasWindow) {

package/components/tokens.esm.js

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 17 Sep 2024 12:02:09 GMT
+ * Generated on Tue, 24 Sep 2024 12:54:29 GMT
  */
 const balColorGreen3 = "#94e3d4";
 const balColorGreen6 = "#1b5951";