@baloise/ds-core 16.0.3 → 16.1.0

package/components/bal-field.js

@@ -28,6 +28,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-input-stepper',
             'bal-input-slider',
             'bal-file-upload',
+            'bal-dropdown',
         ];
         this.formElements = [...this.formControlElement, 'bal-field-label', 'bal-field-message'];
         this.isDirectChild = (el) => {
@@ -46,18 +47,26 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             }
             return this.isDirectChild(parent);
         };
+        this.isVisible = (el) => {
+            if (!el) {
+                return false;
+            }
+            return el.ariaHidden !== 'true';
+        };
         this.findDirectChild = (selectors) => {
             const element = this.el.querySelector(selectors);
             const isDirectChild = this.isDirectChild(element);
             if (isDirectChild) {
-                return element;
+                if (this.isVisible(element)) {
+                    return element;
+                }
             }
             return undefined;
         };
         this.findDirectChildren = (selectors) => {
             return selectors
                 .map(selector => {
-                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild);
+                return Array.from(this.el.querySelectorAll(selector)).filter(this.isDirectChild).filter(this.isVisible);
             })
                 .flat();
         };
@@ -106,6 +115,7 @@ const Field = /*@__PURE__*/ proxyCustomElement(class Field extends HTMLElement {
             'bal-field-control bal-input',
             'bal-field-control bal-select',
             'bal-field-control bal-input-date',
+            'bal-field-control bal-dropdown',
             'bal-field-control bal-checkbox',
             'bal-field-control bal-radio',
             'bal-field-control bal-checkbox-group',

package/components/bal-file-upload.js

@@ -56,7 +56,7 @@ var _default = lib.default = default_1;
 const bemListEl = BEM.block('file-upload').element('list');
 const FileListComponent = ({ files, disabled, subTitle, onRemoveFile, }) => {
     return (h("bal-card", { class: Object.assign({}, bemListEl.class()), flat: true },
-        h("bal-list", { disabled: disabled, border: true, size: "large" }, files.map((file, index) => (h("bal-list-item", { disabled: disabled },
+        h("bal-list", { disabled: disabled, border: true, size: "large" }, files.map((file, index) => (h("bal-list-item", { key: file.name, disabled: disabled },
             h("bal-list-item-icon", null,
                 h("bal-icon", { name: "document" })),
             h("bal-list-item-content", null,

package/components/bal-footer.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { o as loadFooterLinks, q as loadSocialMediaLinks, L as Language } from './index.esm.js';
+import { u as loadFooterLinks, v as loadSocialMediaLinks, L as Language } from './index.esm.js';
 import { B as BEM } from './bem.js';
 import { L as Logger } from './log.js';
 import { k as rIC } from './helpers.js';
@@ -105,12 +105,12 @@ const Footer = /*@__PURE__*/ proxyCustomElement(class Footer extends HTMLElement
         const elSocialMediaLinks = elLinksContainer.element('social-media-links');
         return (h(Host, { class: Object.assign({}, block.class()) }, h("footer", { class: Object.assign({}, elInner.class()) }, h("div", { class: Object.assign({}, elInnerWrapper.class()) }, h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elHeaderContainer.class()) }, h("div", { class: Object.assign({}, elLogo.class()) }, h("bal-logo", { color: "white" })), h("div", { class: Object.assign({}, elLanguage.class()), style: {
                 display: this.hideLanguageSelection || this.allowedLanguages.length <= 1 ? 'none' : 'flex',
-            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white" }), h("bal-select", { value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-select-option", { label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("slot", null), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
+            } }, h("div", { class: Object.assign({}, elWrapper.class()) }, h("bal-input-group", null, h("bal-icon", { class: Object.assign({}, elIcon.class()), name: "web", color: "white" }), h("bal-select", { value: this.language, onBalChange: event => this.changeLanguage(event.detail), "data-testid": "bal-footer-language" }, this.allowedLanguages.map(language => (h("bal-select-option", { key: language, label: language.toLocaleUpperCase(), value: language }, language.toLocaleUpperCase())))))))), h("slot", null), h("div", { class: Object.assign(Object.assign({ container: true }, elContainer.class()), elLinksContainer.class()) }, h("div", { class: Object.assign({}, elSocialMediaLinks.class()), style: {
                 display: !this.showSocialMedia ? 'none' : 'flex',
-            } }, this.socialMediaLinks.map(link => (h("a", { href: link.link, target: "_blank", class: {
+            } }, this.socialMediaLinks.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-inverted': true,
-            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { href: link.link, target: "_blank", class: {
+            } }, h("bal-icon", { name: link.label.toLowerCase() }))))), h("div", { class: Object.assign({}, elLegalLinks.class()), style: { display: this.hideLinks ? 'none' : 'flex' } }, this.links.map(link => (h("a", { key: link.link, href: link.link, target: "_blank", class: {
                 'link': true,
                 'is-light': true,
             } }, link.label)))))))));

package/components/bal-input-slider.js

@@ -160,7 +160,7 @@ const InputSlider = /*@__PURE__*/ proxyCustomElement(class InputSlider extends H
                 width: this.cssWidth(),
             } }, h("div", { class: Object.assign({}, backgroundUpperInnerEl.class()) })), h("div", { class: Object.assign({}, backgroundLowerEl.class()), style: {
                 width: this.cssWidth(true),
-            } }, h("div", { class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { class: Object.assign({}, inputEl.class()) }, h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
+            } }, h("div", { class: Object.assign({}, backgroundLowerInnerEl.class()) }))), h("div", { class: Object.assign({}, inputEl.class()) }, h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueLeftEl.class()) }), h("input", { type: "range", class: Object.assign(Object.assign({}, inputNativeEl.class()), inputNativeEl.modifier('disabled').class(this.disabled || this.readonly)), ref: inputEl => (this.nativeInput = inputEl), id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": this.disabled ? 'true' : null, "aria-invalid": this.invalid === true ? 'true' : 'false', disabled: this.disabled, readonly: this.readonly, name: this.name, required: this.required, tabIndex: this.balTabindex, step: this.step, min: this.min, max: this.max, value: this.value !== '' && this.value !== undefined ? this.value : 0, onInput: this.onInput, onBlur: this.onBlur, onFocus: this.onFocus, onKeyPress: e => this.balKeyPress.emit(e), "data-testid": "bal-input-slider" }), h("div", { class: Object.assign(Object.assign({}, inputValueEl.class()), inputValueRightEl.class()) })), h("div", { class: Object.assign({}, stepsEl.class()), style: { display: this.hasTicks ? 'flex' : 'none' } }, this.getNumberOfSteps().map(step => (h("div", { key: step, class: Object.assign(Object.assign({}, stepsItemEl.class()), stepsItemEl.modifier('disabled').class(this.disabled || this.readonly)), "data-step-id": step }))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/components/bal-label.js

@@ -1,6 +1,6 @@
-import { B as BalLabel$1, d as defineCustomElement$1 } from './bal-label2.js';
+import { L as Label, d as defineCustomElement$1 } from './bal-label2.js';
 
-const BalLabel = BalLabel$1;
+const BalLabel = Label;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalLabel, defineCustomElement };

package/components/bal-label2.js

@@ -10,7 +10,7 @@ import { L as ListenToConfig } from './config.decorator.js';
 const balLabelCss = ".bal-label{display:inline;-webkit-box-sizing:content-box;box-sizing:content-box;position:static;word-break:break-word}.bal-label__native{display:inline;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;white-space:pre;min-width:0;font-family:var(--bal-form-field-label-font-family);font-weight:var(--bal-form-field-label-font-weight);font-size:var(--bal-text-size-normal);line-height:var(--bal-line-height-normal)}.bal-label__native--multiline{white-space:normal}.bal-label__native--no-wrap{display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.bal-label__native--small{font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-label__native--small{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-label__native--small{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-label__native--large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-large);line-height:var(--bal-line-height-large)}@media screen and (min-width: 769px),print{.bal-label__native--large{font-size:var(--bal-text-size-large-tablet);line-height:var(--bal-line-height-tablet-large)}}@media screen and (min-width: 1024px){.bal-label__native--large{font-size:var(--bal-text-size-large-desktop);line-height:var(--bal-line-height-desktop-large)}}.bal-label__native--x-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-x-large);line-height:var(--bal-line-height-x-large)}@media screen and (min-width: 769px),print{.bal-label__native--x-large{font-size:var(--bal-text-size-x-large-tablet);line-height:var(--bal-line-height-tablet-x-large)}}@media screen and (min-width: 1024px){.bal-label__native--x-large{font-size:var(--bal-text-size-x-large-desktop);line-height:var(--bal-line-height-desktop-x-large)}}.bal-label__native--xx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xx-large);line-height:var(--bal-line-height-xx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-tablet);line-height:var(--bal-line-height-tablet-xx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xx-large{font-size:var(--bal-text-size-xx-large-desktop);line-height:var(--bal-line-height-desktop-xx-large)}}.bal-label__native--xxx-large{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-xxx-large);line-height:var(--bal-line-height-xxx-large)}@media screen and (min-width: 769px),print{.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-tablet);line-height:var(--bal-line-height-tablet-xxx-large)}}@media screen and (min-width: 1024px){.bal-label__native--xxx-large{font-size:var(--bal-text-size-xxx-large-desktop);line-height:var(--bal-line-height-desktop-xxx-large)}}.bal-label__native--success{color:var(--bal-form-field-label-success-color)}.bal-label__native--danger{color:var(--bal-form-field-label-danger-color)}.bal-label__native--disabled{color:var(--bal-form-field-label-disabled-color) !important}.bal-label__native--regular{font-weight:var(--bal-font-weight-regular)}.bal-label__native--hovered{color:var(--bal-form-field-label-color-hover)}.bal-label__native--pressed{color:var(--bal-form-field-label-color-active)}.bal-label__native--danger.bal-label__native--hovered{color:var(--bal-form-field-label-danger-color-hover)}.bal-label__native--danger.bal-label__native--pressed{color:var(--bal-form-field-label-danger-color-active)}";
 const BalLabelStyle0 = balLabelCss;
 
-const BalLabel = /*@__PURE__*/ proxyCustomElement(class BalLabel extends HTMLElement {
+const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -101,13 +101,13 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], BalLabel.prototype, "createLogger", null);
+], Label.prototype, "createLogger", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
-], BalLabel.prototype, "configChanged", null);
+], Label.prototype, "configChanged", null);
 let labelIds = 0;
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
@@ -117,10 +117,10 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-label":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, BalLabel);
+                customElements.define(tagName, Label);
             }
             break;
     } });
 }
 
-export { BalLabel as B, defineCustomElement as d };
+export { Label as L, defineCustomElement as d };

package/components/bal-nav-link-grid-col.js

@@ -1,6 +1,6 @@
-import { N as NavigationLinkGridCol, d as defineCustomElement$1 } from './bal-nav-link-grid-col2.js';
+import { N as NavLinkGridCol, d as defineCustomElement$1 } from './bal-nav-link-grid-col2.js';
 
-const BalNavLinkGridCol = NavigationLinkGridCol;
+const BalNavLinkGridCol = NavLinkGridCol;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalNavLinkGridCol, defineCustomElement };

package/components/bal-nav-link-grid-col2.js

@@ -6,7 +6,7 @@ import { B as BEM } from './bem.js';
 const balNavLinkGridColCss = ".bal-nav-link-grid-col{display:block;padding:0;-ms-flex:none;flex:none;width:100%}.bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid-col{-ms-flex:none;flex:none;width:50%;padding-top:0;padding-bottom:0;padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}.bal-nav-link-grid-col .bal-nav-link-group{margin-bottom:var(--bal-space-normal);padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{padding-left:0}@media screen and (min-width: 1440px){.bal-nav-link-grid-col.bal-nav-link-grid-col--is-static{-ms-flex:none;flex:none;width:33.3333%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static){-ms-flex:none;flex:none;width:66.6666%}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--bal-space-large)}}.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{margin:0;width:100%}@media screen and (min-width: 1024px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{padding-left:0;padding-right:0}}@media screen and (min-width: 1440px){.bal-nav-link-grid-col:not(.bal-nav-link-grid-col--is-static) .bal-nav-link-grid-col__inner .bal-nav-link-group{width:calc(50% - var(--bal-space-large)/2)}}";
 const BalNavLinkGridColStyle0 = balNavLinkGridColCss;
 
-const NavigationLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavigationLinkGridCol extends HTMLElement {
+const NavLinkGridCol = /*@__PURE__*/ proxyCustomElement(class NavLinkGridCol extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -33,7 +33,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLinkGridCol.prototype, "createLogger", null);
+], NavLinkGridCol.prototype, "createLogger", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -42,10 +42,10 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav-link-grid-col":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, NavigationLinkGridCol);
+                customElements.define(tagName, NavLinkGridCol);
             }
             break;
     } });
 }
 
-export { NavigationLinkGridCol as N, defineCustomElement as d };
+export { NavLinkGridCol as N, defineCustomElement as d };

package/components/bal-nav-link-grid.js

@@ -1,6 +1,6 @@
-import { N as NavigationLinkGrid, d as defineCustomElement$1 } from './bal-nav-link-grid2.js';
+import { N as NavLinkGrid, d as defineCustomElement$1 } from './bal-nav-link-grid2.js';
 
-const BalNavLinkGrid = NavigationLinkGrid;
+const BalNavLinkGrid = NavLinkGrid;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalNavLinkGrid, defineCustomElement };

package/components/bal-nav-link-grid2.js

@@ -6,7 +6,7 @@ import { B as BEM } from './bem.js';
 const balNavLinkGridCss = ".bal-nav-link-grid{--bal-column-gap:0}@media screen and (min-width: 1024px){.bal-nav-link-grid{--bal-column-gap:1.5rem}}.bal-nav-link-grid{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:0;margin-left:calc(var(--bal-column-gap)*-1);margin-right:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid:last-child{margin-bottom:calc(var(--bal-column-gap)*-1)}.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-grid .bal-nav-link-grid-col:not(:last-child){margin-bottom:0}}";
 const BalNavLinkGridStyle0 = balNavLinkGridCss;
 
-const NavigationLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavigationLinkGrid extends HTMLElement {
+const NavLinkGrid = /*@__PURE__*/ proxyCustomElement(class NavLinkGrid extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -29,7 +29,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLinkGrid.prototype, "createLogger", null);
+], NavLinkGrid.prototype, "createLogger", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -38,10 +38,10 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav-link-grid":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, NavigationLinkGrid);
+                customElements.define(tagName, NavLinkGrid);
             }
             break;
     } });
 }
 
-export { NavigationLinkGrid as N, defineCustomElement as d };
+export { NavLinkGrid as N, defineCustomElement as d };

package/components/bal-nav-link-group.js

@@ -6,7 +6,7 @@ import { B as BEM } from './bem.js';
 const balNavLinkGroupCss = ":root{--bal-nav-link-group-background:transparent;--bal-nav-link-group-background-grey:var(--bal-color-grey);--bal-nav-link-group-background-purple:var(--bal-color-purple);--bal-nav-link-group-background-red:var(--bal-color-red);--bal-nav-link-group-background-yellow:var(--bal-color-yellow);--bal-nav-link-group-background-green:var(--bal-color-green);--bal-nav-link-group-radius:var(--bal-radius-large)}.bal-nav-link-group{display:block;background:var(--bal-nav-link-group-background);border-radius:var(--bal-nav-link-group-radius);padding-top:var(--bal-space-normal);padding-bottom:var(--bal-space-normal);padding-left:var(--bal-space-normal);padding-right:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link-group{padding-left:var(--bal-space-large);padding-right:var(--bal-space-large)}}.bal-nav-link-group--is-grey{background:var(--bal-nav-link-group-background-grey)}.bal-nav-link-group--is-purple{background:var(--bal-nav-link-group-background-purple)}.bal-nav-link-group--is-red{background:var(--bal-nav-link-group-background-red)}.bal-nav-link-group--is-yellow{background:var(--bal-nav-link-group-background-yellow)}.bal-nav-link-group--is-green{background:var(--bal-nav-link-group-background-green)}";
 const BalNavLinkGroupStyle0 = balNavLinkGroupCss;
 
-const NavigationLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavigationLinkGroup extends HTMLElement {
+const NavLinkGroup = /*@__PURE__*/ proxyCustomElement(class NavLinkGroup extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -33,7 +33,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLinkGroup.prototype, "createLogger", null);
+], NavLinkGroup.prototype, "createLogger", null);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
@@ -42,13 +42,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav-link-group":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, NavigationLinkGroup);
+                customElements.define(tagName, NavLinkGroup);
             }
             break;
     } });
 }
 
-const BalNavLinkGroup = NavigationLinkGroup;
+const BalNavLinkGroup = NavLinkGroup;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalNavLinkGroup, defineCustomElement };

package/components/bal-nav-link.js

@@ -1,6 +1,6 @@
-import { N as NavigationLink, d as defineCustomElement$1 } from './bal-nav-link2.js';
+import { N as NavLink, d as defineCustomElement$1 } from './bal-nav-link2.js';
 
-const BalNavLink = NavigationLink;
+const BalNavLink = NavLink;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalNavLink, defineCustomElement };

package/components/bal-nav-link2.js

@@ -6,7 +6,7 @@ import { B as BEM } from './bem.js';
 const balNavLinkCss = "@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}:root{--bal-nav-link-text-color:var(--bal-link-color);--bal-nav-link-text-color-hover:var(--bal-link-color-hover);--bal-nav-link-text-color-active:var(--bal-link-color-active)}.bal-nav-link{display:block}.bal-nav-link:not(:last-child){margin-bottom:var(--bal-space-x-small)}.bal-nav-link--variant-title:not(:last-child){margin-bottom:var(--bal-space-normal) !important}.bal-nav-link--variant-overview:not(:last-child){margin-bottom:0 !important}@media screen and (min-width: 1024px){.bal-nav-link--variant-overview:not(:last-child){margin-bottom:var(--bal-space-normal) !important}}.bal-nav-link__native{display:inline;color:var(--bal-nav-link-text-color);font-size:var(--bal-text-size-normal);line-height:var(--bal-body-line-height);font-family:var(--bal-font-family-text);text-align:left;padding:0;border:none;background:none}.bal-nav-link__native--variant-title{font-family:var(--bal-font-family-title);font-size:var(--bal-text-size-normal);font-weight:var(--bal-font-weight-bold);text-decoration:none;margin-bottom:var(--bal-space-normal)}@media screen and (min-width: 1024px){.bal-nav-link__native--variant-title{font-size:var(--bal-text-size-xx-large)}}.bal-nav-link__native--variant-overview{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-nav-link__native--selected{-webkit-text-decoration:var(--bal-link-text-decoration) !important;text-decoration:var(--bal-link-text-decoration) !important;text-decoration-thickness:1px !important;text-underline-offset:2px !important}button.bal-nav-link__native,a.bal-nav-link__native{cursor:pointer}@media (hover: hover)and (pointer: fine){button.bal-nav-link__native:hover,a.bal-nav-link__native:hover{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-hover);text-underline-offset:2px}}button.bal-nav-link__native:focus-visible,a.bal-nav-link__native:focus-visible{border-radius:var(--bal-radius-normal)}button.bal-nav-link__native:active,a.bal-nav-link__native:active{-webkit-text-decoration:var(--bal-link-text-decoration);text-decoration:var(--bal-link-text-decoration);text-decoration-thickness:1px;color:var(--bal-nav-link-text-color-active);text-underline-offset:2px}";
 const BalNavLinkStyle0 = balNavLinkCss;
 
-const NavigationLink = /*@__PURE__*/ proxyCustomElement(class NavigationLink extends HTMLElement {
+const NavLink = /*@__PURE__*/ proxyCustomElement(class NavLink extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -51,7 +51,7 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavigationLink.prototype, "createLogger", null);
+], NavLink.prototype, "createLogger", null);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
@@ -60,10 +60,10 @@ function defineCustomElement() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav-link":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, NavigationLink);
+                customElements.define(tagName, NavLink);
             }
             break;
     } });
 }
 
-export { NavigationLink as N, defineCustomElement as d };
+export { NavLink as N, defineCustomElement as d };

package/components/bal-nav.js

@@ -387,7 +387,7 @@ const i18nNavBars = {
 const balNavCss = ":root{--bal-nav-background:var(--bal-color-primary);--bal-nav-service-background-grey:var(--bal-color-grey);--bal-nav-service-background-purple:var(--bal-color-purple);--bal-nav-service-background-red:var(--bal-color-red);--bal-nav-service-background-yellow:var(--bal-color-yellow);--bal-nav-service-background-green:var(--bal-color-green)}.bal-nav{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:block;width:100%}.bal-nav__flyout{background:var(--bal-color-white);scroll-padding-top:1rem;padding-top:1rem;padding-bottom:1rem;height:calc(var(--bal-app-height, 100%) - 4rem - 4rem);overflow-y:auto}@media screen and (min-width: 1024px){.bal-nav__flyout{display:none;visibility:hidden}}.bal-nav__flyout__container{-ms-flex-positive:1;flex-grow:1;margin:0 auto;position:relative;width:auto;width:100% !important;padding-left:var(--bal-container-space);padding-right:var(--bal-container-space)}.bal-nav__flyout__container--fluid{max-width:var(--bal-container-size-fluid) !important}.bal-nav__flyout__container--detail-page{max-width:var(--bal-container-size-detail-page) !important}.bal-nav__flyout__container--compact{max-width:var(--bal-container-size-compact) !important}.bal-nav__flyout__container--blog-page{max-width:var(--bal-container-size-blog-page) !important}@media screen and (min-width: 769px),print{.bal-nav__flyout__container{padding-left:var(--bal-container-space-tablet);padding-right:var(--bal-container-space-tablet)}}@media screen and (min-width: 1024px){.bal-nav__flyout__container{padding-left:var(--bal-container-space-desktop);padding-right:var(--bal-container-space-desktop);max-width:var(--bal-container-size-normal)}}.bal-nav__flyout:not(.bal-nav__flyout--visible){position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav .bal-nav-meta-bar,.bal-nav .bal-nav-menu-bar{z-index:auto !important}.bal-list__item__accordion-head:after{background:rgba(0,0,0,0) !important}.bal-nav-meta-bar-transform-touch{z-index:var(--bal-z-index-popup);position:relative}.bal-nav__mobile-meta-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;padding:0;margin:0;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-large);line-height:var(--bal-line-heigh-x-large);cursor:pointer}.bal-nav__mobile-menu-item{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:3rem;border:none;margin:0;padding:0 0 0 1rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-large);line-height:var(--bal-line-heigh-large);cursor:pointer}.bal-nav__mobile-section-item,.bal-nav__mobile-service-item>a{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-title);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-links{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:start;width:100%;min-height:2rem;border:none;margin:0;padding:0 2rem 0 2rem;gap:var(--bal-space-normal);background:rgba(0,0,0,0);font-family:var(--bal-font-family-text);font-size:var(--bal-size-normal);line-height:var(--bal-line-heigh-normal)}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li,.bal-nav__mobile-menu-list,.bal-nav__mobile-menu-list>li,.bal-nav__mobile-section-list,.bal-nav__mobile-service-list,.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li,.bal-nav__mobile-links-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.bal-nav__mobile-meta-list,.bal-nav__mobile-meta-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list{gap:var(--bal-space-normal)}.bal-nav__mobile-menu-list>li{gap:var(--bal-space-normal)}.bal-nav__mobile-section-list,.bal-nav__mobile-service-list{gap:var(--bal-space-x-large)}.bal-nav__mobile-section-list>li,.bal-nav__mobile-service-list>li{gap:var(--bal-space-xx-small)}.bal-nav__mobile-links-list{gap:var(--bal-space-xx-small)}.bal-nav__mobile-section-list{padding-top:1rem}.bal-nav__mobile-service-list>li{border-radius:var(--bal-radius-normal);padding-top:1rem;padding-bottom:1rem}.bal-nav__mobile-section-list--invisible,.bal-nav__mobile-service-list--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link{font-family:var(--bal-font-family-text);font-weight:var(--bal-weight-bold);font-size:var(--bal-size-x-small);line-height:var(--bal-line-height-x-small)}.bal-nav__mobile-overview-link--invisible{position:absolute !important;height:1px !important;width:1px !important;padding:0 !important;overflow:hidden !important;border:none !important;white-space:nowrap !important;clip:rect(1px 1px 1px 1px) !important;clip:rect(1px, 1px, 1px, 1px) !important}.bal-nav__mobile-overview-link--menu{padding:0 0 0 1rem}.bal-nav__line{background-color:var(--bal-color-border-grey-light);height:var(--bal-border-width-normal);border:none;display:block;border-radius:var(--bal-list-item-radius);width:100%;margin:0;padding:0}.bal-nav__mobile-links--clickable,.bal-nav__mobile-section-item--clickable,.bal-nav__mobile-service-item--clickable>a{cursor:pointer}.bal-nav__mobile-links--selected,.bal-nav__mobile-section-item--selected,.bal-nav__mobile-service-item--selected>a{text-decoration:underline}.bal-nav__mobile-service-item--color-grey{background:var(--bal-nav-service-background-grey)}.bal-nav__mobile-service-item--color-purple{background:var(--bal-nav-service-background-purple)}.bal-nav__mobile-service-item--color-red{background:var(--bal-nav-service-background-red)}.bal-nav__mobile-service-item--color-yellow{background:var(--bal-nav-service-background-yellow)}.bal-nav__mobile-service-item--color-green{background:var(--bal-nav-service-background-green)}";
 const BalNavStyle0 = balNavCss;
 
-const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTMLElement {
+const Nav = /*@__PURE__*/ proxyCustomElement(class Nav extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -678,7 +678,7 @@ const NavMetaBar = /*@__PURE__*/ proxyCustomElement(class NavMetaBar extends HTM
     renderTouchMenuAccordions(metaItem) {
         return (h("bal-list", { "accordion-one-level": true, class: "pt-xxx-small pb-normal" }, metaItem.mainLinkItems.map(menuItem => {
             var _a, _b, _c;
-            return menuItem.isLink ? (h("bal-list-item", { "sub-accordion-item": true, href: menuItem.href, target: menuItem.target }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label)))) : (h("bal-list-item", { accordion: true, "sub-accordion-item": true }, h("bal-list-item-accordion-head", { icon: "nav-go-down", "accordion-open": menuItem.active }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label))), h("bal-list-item-accordion-body", null, h("div", { style: { width: '100%' } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_a = menuItem.overviewLink) === null || _a === void 0 ? void 0 : _a.href, target: (_b = menuItem.overviewLink) === null || _b === void 0 ? void 0 : _b.target, onClick: () => this.linkItemClickListener(menuItem.overviewLink) }, (_c = menuItem.overviewLink) === null || _c === void 0 ? void 0 : _c.label), h("div", { class: "pt-normal" }, this.renderGridLinks(menuItem))))));
+            return menuItem.isLink ? (h("bal-list-item", { key: menuItem.label, "sub-accordion-item": true, href: menuItem.href, target: menuItem.target }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label)))) : (h("bal-list-item", { key: menuItem.label, accordion: true, "sub-accordion-item": true }, h("bal-list-item-accordion-head", { icon: "nav-go-down", "accordion-open": menuItem.active }, h("bal-list-item-content", null, h("bal-list-item-title", { "visual-level": "medium", level: "span" }, menuItem.label))), h("bal-list-item-accordion-body", null, h("div", { style: { width: '100%' } }, h("bal-nav-link", { role: "listitem", variant: "overview", href: (_a = menuItem.overviewLink) === null || _a === void 0 ? void 0 : _a.href, target: (_b = menuItem.overviewLink) === null || _b === void 0 ? void 0 : _b.target, onClick: () => this.linkItemClickListener(menuItem.overviewLink) }, (_c = menuItem.overviewLink) === null || _c === void 0 ? void 0 : _c.label), h("div", { class: "pt-normal" }, this.renderGridLinks(menuItem))))));
         })));
     }
     renderLogo() {
@@ -723,25 +723,25 @@ __decorate([
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Function]),
     __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "createLogger", null);
+], Nav.prototype, "createLogger", null);
 __decorate([
     ListenToMutation({ tags: ['bal-popup'], waitAfterFramePrint: true }),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "mutationListener", null);
+], Nav.prototype, "mutationListener", null);
 __decorate([
     ListenToBreakpoints(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
-], NavMetaBar.prototype, "breakpointListener", null);
+], Nav.prototype, "breakpointListener", null);
 __decorate([
     ListenToConfig(),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
-], NavMetaBar.prototype, "configChanged", null);
+], Nav.prototype, "configChanged", null);
 let NavIds = 0;
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
@@ -751,7 +751,7 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, NavMetaBar);
+                customElements.define(tagName, Nav);
             }
             break;
         case "bal-badge":
@@ -927,7 +927,7 @@ function defineCustomElement$1() {
     } });
 }
 
-const BalNav = NavMetaBar;
+const BalNav = Nav;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalNav, defineCustomElement };

package/components/bal-notices.js

@@ -3,7 +3,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 const balNoticesCss = ".bal-notices{position:fixed !important;display:-ms-flexbox !important;display:flex !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;padding:1rem !important;margin:0 !important;overflow:hidden !important;z-index:var(--bal-z-index-toast) !important;pointer-events:none !important;-ms-flex-direction:column !important;flex-direction:column !important}.bal-notices .container{width:100% !important}.bal-notices.has-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:end;align-items:flex-end;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin:.5em}.bal-notices.has-snackbar .bal-snackbar{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-item-align:end;align-self:flex-end;pointer-events:auto !important}.bal-notices.has-toast{-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;margin:.5em}.bal-notices.has-toast .bal-toast{-ms-flex-pack:center;justify-content:center;-ms-flex-item-align:center;align-self:center}";
 const BalNoticesStyle0 = balNoticesCss;
 
-const BalNotices$1 = /*@__PURE__*/ proxyCustomElement(class BalNotices extends HTMLElement {
+const Notices = /*@__PURE__*/ proxyCustomElement(class Notices extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
@@ -28,13 +28,13 @@ function defineCustomElement$1() {
     components.forEach(tagName => { switch (tagName) {
         case "bal-notices":
             if (!customElements.get(tagName)) {
-                customElements.define(tagName, BalNotices$1);
+                customElements.define(tagName, Notices);
             }
             break;
     } });
 }
 
-const BalNotices = BalNotices$1;
+const BalNotices = Notices;
 const defineCustomElement = defineCustomElement$1;
 
 export { BalNotices, defineCustomElement };

package/components/bal-number-input.js

@@ -150,25 +150,33 @@ function isNotNumber(value) {
     return !isNumber(value) && value !== '' && value !== getNegativeSymbol() && value !== getDecimalSeparator();
 }
 function toNumber(value, decimalPoints = 0) {
-    if (value === '' ||
-        value === undefined ||
-        value === null ||
-        lodash_isnan(value) ||
-        value === getNegativeSymbol() ||
-        value === getDecimalSeparator() ||
-        !isNumber(value)) {
+    let val = value;
+    if (val === '' ||
+        val === undefined ||
+        val === null ||
+        lodash_isnan(val) ||
+        val === getNegativeSymbol() ||
+        val === getDecimalSeparator() ||
+        !isNumber(val)) {
         return undefined;
     }
-    return decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value);
+    if (typeof val === 'string') {
+        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
+    }
+    return decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val);
 }
 function toFixedNumber(value, decimalPoints = 0) {
-    if (lodash_isnil(value)) {
+    let val = value;
+    if (lodash_isnil(val)) {
         return '';
     }
-    if (value.charAt(0) === getDecimalSeparator()) {
-        value = `0${value}`;
+    if (typeof val === 'string') {
+        val = val.split(getThousandSeparator()).join('').split('`').join('').split("'").join('');
     }
-    const num = decimalPoints === 0 ? parseInt(value, 10) : parseFloat(value.replace(getDecimalSeparator(), '.'));
+    if (val.charAt(0) === getDecimalSeparator()) {
+        val = `0${val}`;
+    }
+    const num = decimalPoints === 0 ? parseInt(val, 10) : parseFloat(val.replace(getDecimalSeparator(), '.'));
     return lodash_isnan(num) ? '' : num.toFixed(decimalPoints);
 }
 function mapDecimalSeparator(value) {
@@ -186,7 +194,12 @@ function toUserFormattedNumber(value, decimalPoints = 0, suffix = '') {
     return lodash_isnan(num) ? '' : formatLocaleNumber(num, decimalPoints) + formattedSuffix;
 }
 const countDecimalSeparators = (value) => (value.split(getDecimalSeparator()) || []).length - 1 || 0;
-function validateKeyDown({ key, selectionStart, selectionEnd, newValue, decimal, }) {
+function validateKeyDown({ key, ctrlKey, metaKey, selectionStart, selectionEnd, newValue, decimal, }) {
+    //
+    // allow select all, copy and paste
+    if (['a', 'c', 'v'].includes(key) && (ctrlKey || metaKey)) {
+        return true;
+    }
     //
     // only allow negative symbols at the start of the input
     if (key === getNegativeSymbol() && selectionStart && selectionStart > 0 && selectionEnd && selectionEnd > 0) {
@@ -263,6 +276,8 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
             // restore the input with the last user value without the formatting
             if (this.nativeInput) {
                 this.nativeInputValue = mapDecimalSeparator(this.lastValue || '');
+                clearTimeout(this.selectTimeout);
+                this.selectTimeout = setTimeout(() => this.nativeInput.select());
             }
         };
         this.onBlur = (ev) => {
@@ -272,6 +287,7 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
             if (this.nativeInput) {
                 this.lastValue = toFixedNumber(this.lastValueGetter, this.decimal);
                 this.nativeInputValue = toUserFormattedNumber(this.lastValueGetter, this.decimal, this.suffix);
+                this.nativeInput.value = this.nativeInputValue;
             }
             this.inputValue = toNumber(this.lastValueGetter, this.decimal);
             inputHandleChange(this);
@@ -283,6 +299,8 @@ const NumberInput = /*@__PURE__*/ proxyCustomElement(class NumberInput extends H
             if (input &&
                 !validateKeyDown({
                     key: ev.key,
+                    ctrlKey: ev.ctrlKey,
+                    metaKey: ev.metaKey,
                     decimal: this.decimal,
                     newValue,
                     oldValue,

package/components/bal-option-list.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface BalOptionList extends Components.BalOptionList, HTMLElement {}
+export const BalOptionList: {
+    prototype: BalOptionList;
+    new (): BalOptionList;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;