@baloise/ds-core 16.5.0-snapshot.1471-e419cbebb → 16.5.1

package/components/all.d.ts

@@ -28,7 +28,6 @@ import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from '.
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDatepicker, defineCustomElement as defineBalDatepicker } from './bal-datepicker'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
-import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -147,7 +146,6 @@ export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDatepicker, defineBalDatepicker }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }

package/components/all.js

@@ -28,7 +28,6 @@ import { BalDateCalendar, defineCustomElement as defineBalDateCalendar } from '.
 import { BalDateCalendarCell, defineCustomElement as defineBalDateCalendarCell } from './bal-date-calendar-cell'
 import { BalDatepicker, defineCustomElement as defineBalDatepicker } from './bal-datepicker'
 import { BalDivider, defineCustomElement as defineBalDivider } from './bal-divider'
-import { BalDocApp, defineCustomElement as defineBalDocApp } from './bal-doc-app'
 import { BalDropdown, defineCustomElement as defineBalDropdown } from './bal-dropdown'
 import { BalField, defineCustomElement as defineBalField } from './bal-field'
 import { BalFieldControl, defineCustomElement as defineBalFieldControl } from './bal-field-control'
@@ -147,7 +146,6 @@ export { BalDateCalendar, defineBalDateCalendar }
 export { BalDateCalendarCell, defineBalDateCalendarCell }
 export { BalDatepicker, defineBalDatepicker }
 export { BalDivider, defineBalDivider }
-export { BalDocApp, defineBalDocApp }
 export { BalDropdown, defineBalDropdown }
 export { BalField, defineBalField }
 export { BalFieldControl, defineBalFieldControl }
@@ -267,7 +265,6 @@ export const defineAllComponents = () => {
   defineBalDateCalendarCell()
   defineBalDatepicker()
   defineBalDivider()
-  defineBalDocApp()
   defineBalDropdown()
   defineBalField()
   defineBalFieldControl()

package/components/bal-app.js

@@ -1,4 +1,88 @@
-import { A as App, d as defineCustomElement$1 } from './bal-app2.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { _ as __decorate, a as __metadata } from './tslib.es6.js';
+import { b as balBrowser } from './browser.js';
+import { b as balDevice } from './device.js';
+import { h as debounce, k as rIC } from './helpers.js';
+import { L as Logger } from './log.js';
+import { s as startFocusVisible } from './focus-visible.js';
+import { b as updateBalAnimated } from './config.utils.js';
+
+const balAppCss = ":root{--bal-app-height:100%}.bal-app{position:relative;display:block}";
+const BalAppStyle0 = balAppCss;
+
+const App = /*@__PURE__*/ proxyCustomElement(class App extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.debouncedNotify = debounce(() => this.notifyResize(), 100);
+        this.notifyResize = async () => {
+            if (balBrowser.hasDocument && balBrowser.hasWindow) {
+                const doc = document.documentElement;
+                doc.style.setProperty('--bal-app-height', `${window.innerHeight}px`);
+            }
+        };
+        this.animated = true;
+        this.ready = false;
+    }
+    createLogger(log) {
+        this.log = log;
+    }
+    connectedCallback() {
+        updateBalAnimated(this.animated);
+        if (balBrowser.hasWindow) {
+            window.addEventListener('resize', this.debouncedNotify);
+            this.debouncedNotify();
+        }
+    }
+    componentDidLoad() {
+        rIC(async () => {
+            this.ready = true;
+            startFocusVisible();
+        });
+    }
+    disconnectedCallback() {
+        if (balBrowser.hasWindow) {
+            window.removeEventListener('resize', this.debouncedNotify);
+        }
+    }
+    async setFocus(elements) {
+        if (this.focusVisible) {
+            this.focusVisible.setFocus(elements);
+        }
+    }
+    render() {
+        return (h(Host, { class: {
+                'bal-app': true,
+                'bal-app--safari': balBrowser.isSafari,
+                'bal-app--touch': balDevice.hasTouchScreen,
+            } }, h("slot", null)));
+    }
+    get el() { return this; }
+    static get style() { return BalAppStyle0; }
+}, [4, "bal-app", {
+        "animated": [516],
+        "ready": [1540],
+        "setFocus": [64]
+    }]);
+__decorate([
+    Logger('bal-app'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Function]),
+    __metadata("design:returntype", void 0)
+], App.prototype, "createLogger", null);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-app"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-app":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, App);
+            }
+            break;
+    } });
+}
 
 const BalApp = App;
 const defineCustomElement = defineCustomElement$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-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),