@baloise/ds-core 16.4.0 → 16.5.0-nightly.20240918

package/dist/collection/components/bal-icon/bal-icon.css

@@ -1 +1 @@
-:root,:host{--bal-icon-color-grey: var(--bal-color-grey-5);--bal-icon-color-grey-light: var(--bal-color-border-grey-dark);--bal-icon-color-success: var(--bal-color-success);--bal-icon-color-success-dark: var(--bal-color-success-5);--bal-icon-color-success-darker: var(--bal-color-success-6);--bal-icon-color-warning: var(--bal-color-warning);--bal-icon-color-warning-dark: var(--bal-color-warning-5);--bal-icon-color-warning-darker: var(--bal-color-warning-6);--bal-icon-color-danger: var(--bal-color-danger);--bal-icon-color-danger-dark: var(--bal-color-danger-5);--bal-icon-color-danger-darker: var(--bal-color-danger-6);--bal-icon-color-primary: var(--bal-color-primary);--bal-icon-color-primary-dark: var(--bal-color-primary-6);--bal-icon-color-blue: var(--bal-color-primary);--bal-icon-color-light-blue: var(--bal-color-light-blue-5);--bal-icon-color-primary-light: var(--bal-color-primary-3);--bal-icon-color-white: var(--bal-color-white)}.bal-icon{display:flex;justify-content:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:inline-flex}.bal-icon__inner{display:block;position:static;transition:transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{align-items:center;color:inherit;display:inline-flex;vertical-align:top;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{flex-grow:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:flex}
+:root,:host{--bal-icon-color-grey: var(--bal-color-grey-5);--bal-icon-color-grey-light: var(--bal-color-border-grey-dark);--bal-icon-color-grey-dark: var(--bal-color-grey-dark);--bal-icon-color-success: var(--bal-color-success);--bal-icon-color-success-dark: var(--bal-color-success-5);--bal-icon-color-success-darker: var(--bal-color-success-6);--bal-icon-color-warning: var(--bal-color-warning);--bal-icon-color-warning-dark: var(--bal-color-warning-5);--bal-icon-color-warning-darker: var(--bal-color-warning-6);--bal-icon-color-danger: var(--bal-color-danger);--bal-icon-color-danger-dark: var(--bal-color-danger-5);--bal-icon-color-danger-darker: var(--bal-color-danger-6);--bal-icon-color-primary: var(--bal-color-primary);--bal-icon-color-primary-dark: var(--bal-color-primary-6);--bal-icon-color-blue: var(--bal-color-primary);--bal-icon-color-light-blue: var(--bal-color-light-blue-5);--bal-icon-color-primary-light: var(--bal-color-primary-3);--bal-icon-color-white: var(--bal-color-white)}.bal-icon{display:flex;justify-content:center;align-items:center;position:static;pointer-events:visible;width:1.125rem;max-height:1.125rem}.bal-icon--shadow svg{filter:drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.5))}.bal-icon--is-inline{display:inline-flex}.bal-icon__inner{display:block;position:static;transition:transform .2s ease-in-out;padding:.063rem;width:1.125rem;max-height:1.125rem}.bal-icon__inner--turn-plus{transform:rotate(225deg)}.bal-icon__inner--turn-caret-down,.bal-icon__inner--turn-caret-up{transform:rotate(180deg)}.bal-icon__inner--turn-nav-go-down{transform:rotate(180deg)}.bal-icon__inner>svg{vertical-align:top}.bal-icon--is-xsmall{width:.75rem;max-height:.75rem}.bal-icon--is-x-small{width:.75rem;max-height:.75rem}.bal-icon--is-small{width:.875rem;max-height:.875rem}.bal-icon--is-medium{width:1.625rem;max-height:1.625rem}.bal-icon--is-large{width:2.5rem;max-height:2.5rem;padding:0}.bal-icon--is-x-large{width:5rem;max-height:5rem;padding:0}.bal-icon--is-xx-large{width:11rem;max-height:11rem;padding:0}.bal-icon--is-grey svg,.bal-icon--is-grey g,.bal-icon--is-grey path,.bal-icon--is-grey circle{fill:var(--bal-icon-color-grey)}.bal-icon--is-grey-light svg,.bal-icon--is-grey-light g,.bal-icon--is-grey-light path,.bal-icon--is-grey-light circle{fill:var(--bal-icon-color-grey-light)}.bal-icon--is-grey-dark svg,.bal-icon--is-grey-dark g,.bal-icon--is-grey-dark path,.bal-icon--is-grey-dark circle{fill:var(--bal-icon-color-grey-dark)}.bal-icon--is-success svg,.bal-icon--is-success g,.bal-icon--is-success path,.bal-icon--is-success circle{fill:var(--bal-icon-color-success)}.bal-icon--is-success-dark svg,.bal-icon--is-success-dark g,.bal-icon--is-success-dark path,.bal-icon--is-success-dark circle{fill:var(--bal-icon-color-success-dark)}.bal-icon--is-success-darker svg,.bal-icon--is-success-darker g,.bal-icon--is-success-darker path,.bal-icon--is-success-darker circle{fill:var(--bal-icon-color-success-darker)}.bal-icon--is-warning svg,.bal-icon--is-warning g,.bal-icon--is-warning path,.bal-icon--is-warning circle{fill:var(--bal-icon-color-warning)}.bal-icon--is-warning-dark svg,.bal-icon--is-warning-dark g,.bal-icon--is-warning-dark path,.bal-icon--is-warning-dark circle{fill:var(--bal-icon-color-warning-dark)}.bal-icon--is-warning-darker svg,.bal-icon--is-warning-darker g,.bal-icon--is-warning-darker path,.bal-icon--is-warning-darker circle{fill:var(--bal-icon-color-warning-darker)}.bal-icon--is-danger svg,.bal-icon--is-danger g,.bal-icon--is-danger path,.bal-icon--is-danger circle{fill:var(--bal-icon-color-danger)}.bal-icon--is-danger-dark svg,.bal-icon--is-danger-dark g,.bal-icon--is-danger-dark path,.bal-icon--is-danger-dark circle{fill:var(--bal-icon-color-danger-dark)}.bal-icon--is-danger-darker svg,.bal-icon--is-danger-darker g,.bal-icon--is-danger-darker path,.bal-icon--is-danger-darker circle{fill:var(--bal-icon-color-danger-darker)}.bal-icon--is-primary svg,.bal-icon--is-primary g,.bal-icon--is-primary path,.bal-icon--is-primary circle{fill:var(--bal-icon-color-primary)}.bal-icon--is-primary-dark svg,.bal-icon--is-primary-dark g,.bal-icon--is-primary-dark path,.bal-icon--is-primary-dark circle{fill:var(--bal-icon-color-primary-dark)}.bal-icon--is-blue svg,.bal-icon--is-blue g,.bal-icon--is-blue path,.bal-icon--is-blue circle{fill:var(--bal-icon-color-blue)}.bal-icon--is-light-blue svg,.bal-icon--is-light-blue g,.bal-icon--is-light-blue path,.bal-icon--is-light-blue circle{fill:var(--bal-icon-color-light-blue)}.bal-icon--is-primary-light svg,.bal-icon--is-primary-light g,.bal-icon--is-primary-light path,.bal-icon--is-primary-light circle{fill:var(--bal-icon-color-primary-light)}.bal-icon--is-white svg,.bal-icon--is-white g,.bal-icon--is-white path,.bal-icon--is-white circle,.bal-icon--is-inverted svg,.bal-icon--is-inverted g,.bal-icon--is-inverted path,.bal-icon--is-inverted circle{fill:var(--bal-icon-color-white)}.icon-text{align-items:center;color:inherit;display:inline-flex;vertical-align:top;flex-wrap:nowrap;word-break:break-word;line-height:1.5rem}.icon-text.is-small{line-height:1.75rem}.icon-text.is-medium{line-height:1.5rem}.icon-text.is-large{line-height:3rem}.icon-text.is-x-large{line-height:4rem}.icon-text.is-xlarge{line-height:4rem}.icon-text .icon{flex-grow:0;flex-shrink:0}.icon-text .icon:not(:last-child){margin-right:.5rem}.icon-text .icon:not(:first-child){margin-right:.5rem}div.icon-text{display:flex}

package/dist/collection/components/bal-label/bal-label.js

@@ -7,11 +7,11 @@ import { i18nBalLabel } from "./bal-label.i18n";
 import { defaultBalAriaForm } from "../../utils/form";
 export class Label {
     constructor() {
-        this.inputId = `bal-lbl-${labelIds++}`;
         this.language = defaultConfig.language;
         this.region = defaultConfig.region;
         this.ariaForm = defaultBalAriaForm;
         this.htmlFor = undefined;
+        this.htmlId = `bal-lbl-${labelIds++}`;
         this.required = true;
         this.noWrap = false;
         this.multiline = false;
@@ -64,7 +64,7 @@ export class Label {
         const xLarge = this.size === 'x-large';
         const xxLarge = this.size === 'xx-large';
         const xxxLarge = this.size === 'xxx-large';
-        const id = this.ariaForm.labelId || this.inputId;
+        const id = this.ariaForm.labelId || this.htmlId;
         const htmlFor = this.htmlFor || this.ariaForm.controlId;
         return (h(Host, { class: Object.assign({}, block.class()) }, h("label", { id: id, htmlFor: htmlFor, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('native').class()), block.element('native').modifier('multiline').class(this.multiline)), block.element('native').modifier('no-wrap').class(this.noWrap)), block.element('native').modifier('disabled').class(disabled)), block.element('native').modifier('danger').class(danger)), block.element('native').modifier('success').class(success)), block.element('native').modifier('regular').class(regular)), block.element('native').modifier('small').class(small)), block.element('native').modifier('large').class(large)), block.element('native').modifier('x-large').class(xLarge)), block.element('native').modifier('xx-large').class(xxLarge)), block.element('native').modifier('xxx-large').class(xxxLarge)), block.element('native').modifier('hovered').class(this.hovered)), block.element('native').modifier('pressed').class(this.pressed)) }, h("slot", null), suffix)));
     }
@@ -99,6 +99,24 @@ export class Label {
                 "reflect": false,
                 "defaultValue": "undefined"
             },
+            "htmlId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the id of the native label element"
+                },
+                "attribute": "html-id",
+                "reflect": false,
+                "defaultValue": "`bal-lbl-${labelIds++}`"
+            },
             "required": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/bal-progress-bar/bal-progress-bar.js

@@ -2,6 +2,8 @@ import { __decorate, __metadata } from "tslib";
 import { h, Host } from "@stencil/core";
 import { BEM } from "../../utils/bem";
 import { ListenToBreakpoints, balBreakpoints } from "../../utils/breakpoints";
+import { ListenToWindowResize, } from "../../utils/resize";
+import { raf } from "../../utils/helpers";
 export class ProgressBar {
     constructor() {
         this.animated = true;
@@ -24,6 +26,9 @@ export class ProgressBar {
     breakpointListener(_breakpoints) {
         this.updateProgress();
     }
+    windowResizeListener() {
+        this.updateProgress();
+    }
     async configChanged(state) {
         this.animated = state.animated;
     }
@@ -33,16 +38,18 @@ export class ProgressBar {
      */
     updateProgress() {
         if (this.lineEl) {
-            const maxWidth = this.el.clientWidth;
-            const value = Math.max(0, Math.min(100, this.value));
-            const lineWidth = (maxWidth / 100) * value;
-            this.lineEl.style.width = `${lineWidth}px`;
-            if (value === 100) {
-                this.lineEl.classList.add('bal-progress-bar__line--full');
-            }
-            else {
-                this.lineEl.classList.remove('bal-progress-bar__line--full');
-            }
+            raf(() => {
+                const maxWidth = this.el.clientWidth;
+                const value = Math.max(0, Math.min(100, this.value));
+                const lineWidth = (maxWidth / 100) * value;
+                this.lineEl.style.width = `${lineWidth}px`;
+                if (value === 100) {
+                    this.lineEl.classList.add('bal-progress-bar__line--full');
+                }
+                else {
+                    this.lineEl.classList.remove('bal-progress-bar__line--full');
+                }
+            });
         }
     }
     /**
@@ -171,3 +178,9 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], ProgressBar.prototype, "breakpointListener", null);
+__decorate([
+    ListenToWindowResize(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], ProgressBar.prototype, "windowResizeListener", null);

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.css

@@ -0,0 +1 @@
+: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;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:flex;align-items:center;justify-content:center;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;transition:color 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{transform-origin:left;position:absolute;opacity:0;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{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%;transform:none;pointer-events:none}.bal-segment-item__indicator--animated{will-change:transform,opacity,top,bottom,left,right,min-width,min-heigth;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}.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;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;transform:translateX(-4px);transition:opacity 260ms cubic-bezier(0.4, 0, 0.2, 1),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;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}

package/dist/collection/components/bal-segment/bal-segment-item/bal-segment-item.js

@@ -0,0 +1,332 @@
+import { h, Host, } from "@stencil/core";
+import { BEM } from "../../../utils/bem";
+import { inheritAttributes } from "../../../utils/attributes";
+import { addEventListener, raf, removeEventListener } from "../../../utils/helpers";
+let ids = 0;
+export class SegmentItem {
+    constructor() {
+        this.segmentEl = null;
+        this.inheritedAttributes = {};
+        this.id = ids++;
+        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.items;
+                    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.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.disabled = false;
+        this.invalid = false;
+        this.focused = false;
+        this.checked = false;
+        this.label = '';
+        this.value = 'bal-si-' + this.id;
+    }
+    valueChanged() {
+        this.updateState();
+    }
+    connectedCallback() {
+        const segmentEl = (this.segmentEl = this.el.closest('bal-segment'));
+        if (segmentEl) {
+            this.updateState();
+            addEventListener(segmentEl, 'balSelect', this.updateState);
+            addEventListener(segmentEl, 'balVertical', this.updateVertical);
+        }
+    }
+    disconnectedCallback() {
+        const segmentEl = this.segmentEl;
+        if (segmentEl) {
+            removeEventListener(segmentEl, 'balSelect', this.updateState);
+            removeEventListener(segmentEl, 'balVertical', this.updateVertical);
+            this.segmentEl = null;
+        }
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, inheritAttributes(this.el, ['aria-label']));
+    }
+    componentDidLoad() {
+        raf(() => this.checkSlotContent());
+    }
+    /**
+     * @internal
+     * Focuses the native <button> element
+     * inside of ion-segment-button.
+     */
+    async setFocus() {
+        const { nativeEl } = this;
+        if (nativeEl !== undefined) {
+            nativeEl.focus();
+        }
+    }
+    get items() {
+        return this.allItems.filter(item => !item.disabled);
+    }
+    get allItems() {
+        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 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)) })));
+    }
+    static get is() { return "bal-segment-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-segment-item.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-segment-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the user cannot interact with the segment button."
+                },
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "invalid": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, the segment is shown in red."
+                },
+                "attribute": "invalid",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "focused": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets focus state for key navigation"
+                        }],
+                    "text": ""
+                },
+                "attribute": "focused",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets checked state for key navigation"
+                        }],
+                    "text": ""
+                },
+                "attribute": "checked",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label of the segment control"
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "SegmentValue",
+                    "resolved": "number | string",
+                    "references": {
+                        "SegmentValue": {
+                            "location": "import",
+                            "path": "../bal-segment.types",
+                            "id": "src/components/bal-segment/bal-segment.types.ts::SegmentValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value of the segment button."
+                },
+                "attribute": "value",
+                "reflect": false,
+                "defaultValue": "'bal-si-' + this.id"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "hasSlotContent": {},
+            "isFocusable": {},
+            "isVertical": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "balBlur",
+                "name": "balBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the component was touched"
+                },
+                "complexType": {
+                    "original": "BalEvents.BalSegmentBlurDetail",
+                    "resolved": "FocusEvent",
+                    "references": {
+                        "BalEvents": {
+                            "location": "global",
+                            "id": "global::BalEvents"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Focuses the native <button> element\ninside of ion-segment-button."
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "valueChanged"
+            }];
+    }
+}

package/dist/collection/components/bal-segment/bal-segment.css

@@ -0,0 +1 @@
+: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:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;justify-content:flex-start;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{justify-content:center;align-items:center}

package/dist/collection/components/bal-segment/bal-segment.interfaces.js

@@ -0,0 +1,4 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+// eslint-disable-next-line @typescript-eslint/triple-slash-reference
+/// <reference path="../../interfaces.d.ts" />