@baloise/ds-core 18.3.0 → 19.0.0-nightly.20250512

package/dist/collection/components/bal-nav/models/bal-nav-link-item.js

@@ -49,7 +49,7 @@ export class NavLinkItem {
         return (h("li", null, h("a", { id: this.id, class: Object.assign(Object.assign(Object.assign({}, block.element('mobile-links').class()), block.element('mobile-links').modifier('selected').class(this.active)), block.element('mobile-links').modifier('clickable').class(this.clickable)), href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onClick(ev) }, this.label)));
     }
     render(_context) {
-        return (h("bal-nav-link", { role: "listitem", href: this.href, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
+        return (h("bal-nav-link", { role: "listitem", href: this.href, rel: this.rel, target: this.target, clickable: this.clickable, selected: this.active, onClick: ev => this.onClick(ev) }, this.label));
     }
 }
 let NavLinkItemIDs = 0;

package/dist/collection/components/bal-nav/models/bal-nav-menu-link-item.js

@@ -24,7 +24,7 @@ export class NavMenuLinkItem extends NavLinkItem {
         const hasSectionLinkItems = this.sectionLinkItems && this.sectionLinkItems.length > 0;
         const hasServiceLinkItems = this.serviceLinkItems && this.serviceLinkItems.length > 0;
         const isSelected = (context === null || context === void 0 ? void 0 : context.activeMenuLinkValue) === this.value;
-        return (h("li", null, h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }), h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true, isVisible: isSelected }), hasSectionLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-section-list').class()), block
+        return (h("li", null, h(AccordionButton, { id: this.id, level: "menu", label: this.label, href: this.href, rel: this.rel, target: this.target, link: hasSectionLinkItems || hasServiceLinkItems ? false : this.isLink, open: isSelected, onClick: ev => this.onAccordionClick(ev) }), h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev), isMenu: true, isVisible: isSelected }), hasSectionLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-section-list').class()), block
                 .element('mobile-section-list')
                 .modifier('invisible')
                 .class(isSelected === false)) }, this.sectionLinkItems.map(item => item.renderTouch()))) : (''), hasServiceLinkItems ? (h("ul", { class: Object.assign(Object.assign({}, block.element('mobile-service-list').class()), block
@@ -35,7 +35,7 @@ export class NavMenuLinkItem extends NavLinkItem {
     render(context) {
         const hasChildren = this.sectionLinkItems.length > 0 || this.serviceLinkItems.length > 0;
         if (!hasChildren && this.isLink) {
-            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, rel: this.rel, target: this.target, "no-panel": true }));
         }
         return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 context === null || context === void 0 ? void 0 : context.onClick();

package/dist/collection/components/bal-nav/models/bal-nav-meta-button.js

@@ -23,7 +23,7 @@ export class NavMetaButton extends NavLinkItem {
     }
     renderAtMetaBar() {
         if (this.isLink) {
-            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, href: this.href, target: this.target, aria: {
+            return (h("bal-button", { id: this.value, color: "light", size: "small", icon: this.icon, square: !this.label || this.label.length < 3, inverted: true, rel: this.rel, href: this.href, target: this.target, aria: {
                     title: this.htmlTitle,
                     label: this.ariaLabel || this.label,
                 } }, this.label));
@@ -36,7 +36,7 @@ export class NavMetaButton extends NavLinkItem {
     renderAtTouchTopMetaBar() {
         if (this.touchPlacement === 'top') {
             if (this.isLink) {
-                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, target: this.target, aria: {
+                return (h("bal-button", { id: this.value, color: "light", icon: this.icon, square: !!this.icon || !this.label || this.label.length < 3, href: this.href, rel: this.rel, target: this.target, aria: {
                         title: this.htmlTitle,
                         label: this.ariaLabel || this.label,
                     } }, this.icon ? '' : this.label));

package/dist/collection/components/bal-nav/models/bal-nav-meta-link-item.js

@@ -19,14 +19,14 @@ export class NavMetaLinkItem extends NavLinkItem {
     renderTouch(context) {
         const block = BEM.block('nav');
         const isSelected = (context === null || context === void 0 ? void 0 : context.activeMetaLinkValue) === this.value;
-        return (h("li", null, h(AccordionButton, { id: this.id, level: "meta", label: this.label, open: isSelected, link: this.mainLinkItems.length > 0 ? false : this.isLink, href: this.href, target: this.target, onClick: ev => this.onAccordionClick(ev) }), isSelected ? h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev) }) : '', isSelected ? (h("hr", { class: Object.assign(Object.assign({}, block.element('line').class()), block.element('line').modifier('up').class()) })) : (''), isSelected && this.mainLinkItems && this.mainLinkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-menu-list').class()) }, this.mainLinkItems.map(item => item.renderTouch({
+        return (h("li", null, h(AccordionButton, { id: this.id, level: "meta", label: this.label, open: isSelected, link: this.mainLinkItems.length > 0 ? false : this.isLink, href: this.href, rel: this.rel, target: this.target, onClick: ev => this.onAccordionClick(ev) }), isSelected ? h(OverviewLink, { item: this.overviewLink, onClick: ev => this.onClick(ev) }) : '', isSelected ? (h("hr", { class: Object.assign(Object.assign({}, block.element('line').class()), block.element('line').modifier('up').class()) })) : (''), isSelected && this.mainLinkItems && this.mainLinkItems.length > 0 ? (h("ul", { class: Object.assign({}, block.element('mobile-menu-list').class()) }, this.mainLinkItems.map(item => item.renderTouch({
             activeMetaLinkValue: context.activeMetaLinkValue,
             activeMenuLinkValue: context.activeMenuLinkValue,
         })))) : (''), h("hr", { class: Object.assign({}, block.element('line').class()) })));
     }
     render(context) {
         if (this.isLink) {
-            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, href: this.href, target: this.target, "no-panel": true }));
+            return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, rel: this.rel, href: this.href, target: this.target, "no-panel": true }));
         }
         return (h("bal-tab-item", { aria: { controls: context.flyoutId }, label: this.label, value: this.value, "no-panel": true, onBalNavigate: ev => {
                 if (this.onClick) {

package/dist/collection/components/bal-navbar/bal-navbar-brand/bal-navbar-brand.js

@@ -75,7 +75,7 @@ export class NavbarBrand {
         const navbarBrandEl = BEM.block('navbar').element('brand');
         const logoTemplate = this.logo ? (h("img", { class: Object.assign({}, navbarBrandEl.element('logo').class()), src: this.logo, alt: "" })) : (h("bal-logo", { animated: this.animated, color: 'white', size: this.logoSize }));
         const logoLabel = this.logoLabel ? this.logoLabel : i18nBalNavbarBrand[this.language].logoButtonLabel;
-        return (h(Host, { key: '6492bf4163017452e6fcbd3e75f067db73e631d7', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: '026a303393f964c22eecc94b92468832a5d3594a', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '632838cf1193499f8751a340e4ed897dc7d01d54' })), h("bal-button", { key: '44e63c04ba674399b60eeedf58f5b3ce680dd939', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
+        return (h(Host, { key: '1c5a31aedc7120f89f9a1b31d25bd00b724de889', class: Object.assign(Object.assign({}, navbarBrandEl.class()), navbarBrandEl.modifier(`context-${this.interface}`).class()) }, this.href ? (h("a", { "aria-label": logoLabel, title: logoLabel, href: this.href, rel: this.rel, target: this.target, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : this.logoClickable ? (h("button", { "aria-label": logoLabel, title: logoLabel, onClick: (ev) => this.balNavigate.emit(ev) }, logoTemplate)) : (logoTemplate), h("span", { key: 'b6347efe529507db4f4b4f78352fc82c957f71fc', class: Object.assign({}, navbarBrandEl.element('title').class()) }, h("slot", { key: '4357757d01e9ccc0d497ea04021c64fa06bea1a8' })), h("bal-button", { key: '35e86c5414289bb937a4aab0c5c8bbdc0a27d67a', class: Object.assign(Object.assign({}, navbarBrandEl.element('burger').class()), navbarBrandEl
                 .element('burger')
                 .modifier('hidden')
                 .class(this.interface === 'simple')), color: "light", inverted: true, square: true, icon: this.isMenuActive ? 'close' : 'menu-bars', onClick: () => this.onClick() })));

package/dist/collection/components/bal-navbar/bal-navbar-menu/bal-navbar-menu.js

@@ -32,7 +32,7 @@ export class NavbarMenu {
                 container = navbarEl.container;
             }
         }
-        return (h(Host, { key: '82e424f6a56e40091320eee01e849dd5ac9853f3', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: '2a9e2c5b3e4d9e55372107d9096ff7ea7b0b69be' })));
+        return (h(Host, { key: 'e3632d31af2bf0bbd0bc416c40ff17ed7cd3a74f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, menuEl.class()), menuEl.modifier('active').class(this.isMenuActive)), menuEl.modifier(`context-${this.interface}`).class()), { container: true, [`is-${container}`]: container !== '' }) }, h("slot", { key: '63897a0b6c61e222fc3f87051c1f4cf89d27be5a' })));
     }
     static get is() { return "bal-navbar-menu"; }
     static get properties() {

package/dist/collection/components/bal-navbar/bal-navbar-menu-end/bal-navbar-menu-end.js

@@ -6,7 +6,7 @@ export class NavbarMenuEnd {
     }
     render() {
         const menuEndEl = BEM.block('navbar').element('menu').element('end');
-        return (h(Host, { key: 'c48d9c4cf059e64185d2c873f951cd5e2e133665', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: 'e956c085b46e4fbe1f655e161b92c81a08f398de' })));
+        return (h(Host, { key: '704fe4c50701625f0160aa39a79a5fc3e2f9debb', class: Object.assign(Object.assign({}, menuEndEl.class()), menuEndEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '05737e744803b4b62906ab835d555d1c9cc6cf98' })));
     }
     static get is() { return "bal-navbar-menu-end"; }
     static get properties() {

package/dist/collection/components/bal-navbar/bal-navbar-menu-start/bal-navbar-menu-start.js

@@ -6,7 +6,7 @@ export class NavbarMenuStart {
     }
     render() {
         const menuStartEl = BEM.block('navbar').element('menu').element('start');
-        return (h(Host, { key: '9694a2d3843c5d010a6523e404e7feaea40a8183', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '29fb9854fd7de27e095c6ab141be4f005a00e535' })));
+        return (h(Host, { key: 'b53e1c198366eeca89e5d71bf52af297902307a8', class: Object.assign(Object.assign({}, menuStartEl.class()), menuStartEl.modifier(`context-${this.interface}`).class()) }, h("slot", { key: '3e123a521d151135d72001d1b3ac703d236a4c8f' })));
     }
     static get is() { return "bal-navbar-menu-start"; }
     static get properties() {

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

@@ -24,7 +24,7 @@ export class Navbar {
     }
     render() {
         const navbarEl = BEM.block('navbar');
-        return (h(Host, { key: 'bc3b4a7517b5f96970b7c3c65d7d496c4829a644', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: '4df024c578399098ab513995f9d302ecdd1b2f63', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '45710ae4fd3b25cf23be8c5bf25bada4cfac312f' }))));
+        return (h(Host, { key: 'fd92bf967ce7199269234da14b2a9612c56cbb06', class: Object.assign(Object.assign(Object.assign({}, navbarEl.class()), navbarEl.modifier(`context-${this.interface}`).class()), navbarEl.modifier(`is-light`).class(this.light)) }, h("nav", { key: '7e172f369abc559d4e9ccdaee88631d8480f6704', role: "navigation", "aria-label": "main navigation", class: Object.assign(Object.assign({}, navbarEl.element('nav').class()), { container: true, [`is-${this.container}`]: this.container !== '' }) }, h("slot", { key: '7970369d6f3a5538884a29a30db863acf6f9061b' }))));
     }
     static get is() { return "bal-navbar"; }
     static get originalStyleUrls() {

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

@@ -10,7 +10,7 @@ export class Notices {
         const block = BEM.block('notices');
         const innerEl = block.element('inner');
         const hasContainer = this.interface === 'toast' && this.container !== undefined;
-        return (h(Host, { key: '914b7643a3297d183e7b1751afc8252ed75e2176', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: '7e2d3a0980a58c9b2f0b69d06bae71779e81d90b', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'db39f336699c3de8776f56ec79630e0221444114' }))));
+        return (h(Host, { key: '83c73f66abe9dc3abf4181c43af09fc4ce7f3b7a', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: 'f16cd17c52f0df45500e9be985fc099c5c134cf6', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: 'bdf0fc55a2b9d63fed14821e8e83553394052ac2' }))));
     }
     static get is() { return "bal-notices"; }
     static get originalStyleUrls() {

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

@@ -9,7 +9,7 @@ export class Notification {
     render() {
         const block = BEM.block('notification');
         const innerEl = block.element('inner');
-        return (h(Host, { key: '867254c1020d19f225d64757749df32941d997e1', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '6ac1a4235074bb8ad8599af069f0f6860c3d066c' })));
+        return (h(Host, { key: '25a9149c4bb693ebf3c1b1a863e72f7727b8d046', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '6254964fe9f247d75cb102a80c7a251a233bf2d9' })));
     }
     static get is() { return "bal-notification"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-number-input/bal-number-input.js

@@ -233,7 +233,7 @@ export class NumberInput {
      */
     render() {
         const block = BEM.block('number-input');
-        return (h(Host, { key: 'e4185f48852de078ce7bcf8eb9fcf7977a1146d2', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: 'cd89ad02a6788cee9efbf2fcf5bf61eb7dd23ba5', class: {
+        return (h(Host, { key: 'b8eed12bfcd82452d4764d316294744faff1f797', onClick: this.handleClick, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.class()) }, h("input", Object.assign({ key: '0f04129ed1bd55b8660e7add8f673e154bf4107b', class: {
                 'input': true,
                 'is-disabled': this.disabled || this.readonly,
                 'is-danger': this.invalid,

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

@@ -1 +1 @@
-:root{--bal-option-padding-x: var(--bal-space-small);--bal-option-min-height: 1.5rem;--bal-option-background: var(--bal-color-white);--bal-option-background-hovered: var(--bal-color-grey-3);--bal-option-background-selected: var(--bal-color-primary-1);--bal-option-background-selected-hovered: #dddfeb;--bal-option-background-invalid: var(--bal-color-danger-1);--bal-option-background-invalid-hovered: #fbe0de;--bal-option-border-width: var(--bal-border-width-normal);--bal-option-border-color: var(--bal-color-grey-2);--bal-option-font-family: var(--bal-font-family-text);--bal-option-font-weight: var(--bal-font-weight-regular);--bal-option-line-height: 1.125rem;--bal-option-text-hovered: var(--bal-color-text-primary-hovered);--bal-option-text-pressed: var(--bal-color-text-primary-pressed);--bal-option-text-disabled: var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media(hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media(hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media(hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media(hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-radio-checkbox-symbol-size: 1.125rem;--bal-radio-checkbox-symbol-width: calc(0.375rem - 1px);--bal-radio-checkbox-symbol-height: calc(0.656rem - 1px);--bal-radio-checkbox-symbol-left: calc(0.375rem + 1px);--bal-radio-checkbox-symbol-margin-top: 0.188rem;--bal-radio-checkbox-label-min-height: 1.125rem}
+:root{--bal-option-padding-x: var(--bal-space-small);--bal-option-min-height: 1.5rem;--bal-option-background: var(--bal-color-white);--bal-option-background-hovered: var(--bal-color-grey-3);--bal-option-background-selected: var(--bal-color-primary-1);--bal-option-background-selected-hovered: #dddfeb;--bal-option-background-invalid: var(--bal-color-danger-1);--bal-option-background-invalid-hovered: #fbe0de;--bal-option-border-width: var(--bal-border-width-normal);--bal-option-border-color: var(--bal-color-grey-2);--bal-option-font-family: var(--bal-font-family-text);--bal-option-font-weight: var(--bal-font-weight-regular);--bal-option-line-height: 1.125rem;--bal-option-text-hovered: var(--bal-color-text-primary-hovered);--bal-option-text-pressed: var(--bal-color-text-primary-pressed);--bal-option-text-disabled: var(--bal-color-text-grey-light)}.bal-option{font-size:16px;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:block;list-style:none;cursor:pointer;border-bottom-width:var(--bal-option-border-width);border-bottom-color:var(--bal-option-border-color);border-bottom-style:solid;background:var(--bal-option-background);padding-left:var(--bal-option-padding-x);padding-right:var(--bal-option-padding-x);min-height:var(--bal-option-min-height)}.bal-option>bal-stack{min-height:var(--bal-option-min-height)}.bal-option:last-child{border-bottom:none}.bal-option::-moz-focus-inner{border:none}.bal-option--hidden{display:none;visibility:hidden}.bal-option__inner{font-family:var(--bal-option-font-family);font-weight:var(--bal-option-font-weight);line-height:var(--bal-option-line-height);word-break:break-word;white-space:normal;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.bal-option__inner--multiline{white-space:normal}.bal-option--focused{background:var(--bal-option-background-hovered)}@media(hover: hover)and (pointer: fine){.bal-option:hover{background:var(--bal-option-background-hovered);color:var(--bal-option-text-hovered)}}.bal-option:active{background:var(--bal-option-background-hovered);color:var(--bal-option-text-pressed)}.bal-option--selected{background:var(--bal-option-background-selected)}@media(hover: hover)and (pointer: fine){.bal-option--selected:hover{background:var(--bal-option-background-selected-hovered)}}.bal-option--selected:active{background:var(--bal-option-background-selected-hovered)}.bal-option--selected .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--selected.bal-option--focused{background:var(--bal-option-background-selected-hovered)}.bal-option--selected.bal-option--focused .bal-option__inner{font-weight:var(--bal-font-weight-bold)}.bal-option--invalid{background:var(--bal-option-background-invalid)}@media(hover: hover)and (pointer: fine){.bal-option--invalid:hover{background:var(--bal-option-background-invalid-hovered)}}.bal-option--invalid:active{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid.bal-option--focused{background:var(--bal-option-background-invalid-hovered)}.bal-option--invalid .bal-option__inner{color:var(--bal-color-text-danger-hovered)}@media(hover: hover)and (pointer: fine){.bal-option--invalid:hover .bal-option__inner{color:var(--bal-color-text-danger-hovered)}}.bal-option--invalid:active .bal-option__inner{color:var(--bal-color-text-danger-pressed)}.bal-option--disabled,.bal-option--disabled.bal-option--focused{background:var(--bal-option-background) !important;color:var(--bal-option-text-disabled) !important;cursor:default !important}.bal-option--disabled:hover,.bal-option--disabled.bal-option--focused:hover{background:var(--bal-option-background) !important}.bal-option{--bal-check-size: 1.25rem}

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

@@ -1,11 +1,11 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
-import { BEM } from "../../utils/bem";
-import { Logger } from "../../utils/log";
 import { ariaBooleanToString } from "../../utils/aria";
+import { BEM } from "../../utils/bem";
 import { ListenToElementStates } from "../../utils/element-states";
-import { stopEventBubbling } from "../../utils/form-input";
 import { BalElementStateListener } from "../../utils/element-states/element-states.listener";
+import { stopEventBubbling } from "../../utils/form-input";
+import { Logger } from "../../utils/log";
 export class Option {
     constructor() {
         this.inputId = `bal-option-${balOptionIds++}`;
@@ -88,7 +88,7 @@ export class Option {
      * ------------------------------------------------------
      */
     get interactionChildElements() {
-        return Array.from(this.el.querySelectorAll('bal-checkbox'));
+        return Array.from(this.el.querySelectorAll('bal-check'));
     }
     /**
      * RENDER
@@ -96,7 +96,7 @@ export class Option {
      */
     render() {
         const block = BEM.block('option');
-        return (h(Host, { key: 'e1d4103868276fe7d159660d36b3aa485f76a3f1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'bc0e96fb1b4876c1832834d334d2d93afedb84bc', py: "small", space: "x-small" }, this.checkbox ? (h("bal-checkbox", { flat: true, nonSubmit: true, "label-hidden": true, checked: this.selected, disabled: this.disabled, invalid: this.invalid, tabindex: -1 })) : (''), h("div", { key: '64d0e10a856b96031c736fec625d80ef74f33c30', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '64a86c1dbb5c7c463145429a037437439435d016' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
+        return (h(Host, { key: 'a9b567396356b31dc5dacf1115b538eb6f0229e9', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checkbox').class(this.checkbox)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('selected').class(this.selected)), block.modifier('disabled').class(this.disabled)), block.modifier('hidden').class(this.hidden)), role: "option", id: this.inputId, "data-value": this.value, "data-label": this.label, "aria-label": this.label, "aria-hidden": ariaBooleanToString(this.hidden), "aria-selected": ariaBooleanToString(this.selected), "aria-checked": ariaBooleanToString(this.selected), "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": ariaBooleanToString(this.invalid), tabIndex: -1, onClick: this.onClick }, h("bal-stack", { key: 'bc7b02be2431b89e05a16df87b2ef5e7e828577a', py: "small", space: "x-small" }, this.checkbox ? (h("bal-check", { checked: this.selected, disabled: this.disabled, invalid: this.invalid, hovered: this.interactionState.hovered, pressed: this.interactionState.pressed, tabindex: -1 })) : (''), h("div", { key: 'dd0f4a8143bcff57bcfd578073fc5c13fc947b64', class: Object.assign(Object.assign({}, block.element('inner').class()), block.element('inner').modifier('multiline').class(this.multiline)) }, h("slot", { key: '49d60c90205cc0181cfc61eac50e2de14bc1dc80' })), this.selected && !this.checkbox ? (h("bal-icon", { name: "check", size: "small", color: this.disabled ? 'grey' : this.invalid ? 'danger' : 'primary' })) : (''))));
     }
     static get is() { return "bal-option"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-option-list/bal-option-list.js

@@ -415,7 +415,7 @@ export class OptionList {
     render() {
         const block = BEM.block('option-list');
         const labelledby = this.labelledby || this.ariaForm.labelId;
-        return (h(Host, { key: '6ca4230b34121fe0a67b324fdda50ff4da05bed8', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: 'bf810dbcda8f0fa7db371bdeefd92d22d5107640', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '4e7905a83f7f61b325a828382ed319d2c57b104b' }))));
+        return (h(Host, { key: '934c509e0703b3d7435028ad7bff05290d6a855b', class: Object.assign({}, block.class()), id: this.inputId }, h("div", Object.assign({ key: '4d6b39d94ea7f7abacd128ca65e0f9f985ae3165', role: "listbox", "aria-labelledby": labelledby, "aria-disabled": ariaBooleanToString(this.disabled), class: Object.assign({}, block.element('container').class()) }, this.inheritAttributes), h("slot", { key: '0ad6401208e35316c7eb892d0b8ffba1476a8611' }))));
     }
     static get is() { return "bal-option-list"; }
     static get originalStyleUrls() {

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

@@ -101,10 +101,10 @@ export class Pagination {
         const leftControlTitle = i18nControlLabel[this.language].left;
         const rightControlTitle = i18nControlLabel[this.language].right;
         const hasBasicNavigationButtons = this.interface === '' || (isSmall && this.totalPages <= 5);
-        const SmallWithText = () => (h("span", { key: '3b097795020dbe312e3307483744f183d70e0cd1', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '1f877d2c55d94fce949cb281fa1fe1bd34d11975' }, this._value), ' / ' + this.totalPages));
-        const PaginationTablet = () => (h("ul", { key: 'f1a9b59d0c9ba663312b3d3ae9ff9de678b746c2', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
-        const PaginationMobile = () => (h("ul", { key: 'a03438621f33facc36ec894bf9507374ac5f180a', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
-        return (h(Host, { key: 'e5cd5b90b5bfac0ca375aa1953a3c798a3c02e7d', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: '2c6ffa97605d79b65ef3bcf3f812632d846eb037', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: 'eab1b2b44d7188cdceb8681b8da4eb6274314931', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: 'd5124c40a333c03b15e19050d3166d8397a697cd', name: "nav-go-left", size: "small" })), h("bal-button", { key: 'f7c9e505a74db8d883e890967a1bde93a88ecf11', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: '61dbf967b6387ff7462df52e9938fdcf67631eb1', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
+        const SmallWithText = () => (h("span", { key: '80f6ab1b5075ab3bd88046ec5b97574bf0c79ed5', class: Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()) }, h("span", { key: '1e4313d171625773d8d234a8c45642bc6685e37a' }, this._value), ' / ' + this.totalPages));
+        const PaginationTablet = () => (h("ul", { key: '3f7dce2e4c8ca26728744fdc6707d187f624d7b6', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, tabletItems));
+        const PaginationMobile = () => (h("ul", { key: 'bd3506ca35fe0aeec0fdad4b3ee273426be63ed1', class: Object.assign(Object.assign(Object.assign({}, elList.class()), elList.modifier(`context-${this.interface}`).class()), { 'is-disabled': this.disabled }), "data-testid": "bal-pagination-list" }, mobileItems));
+        return (h(Host, { key: '4402b36d447508550b265fbd7b9d019a0b991021', class: Object.assign(Object.assign({}, block.class()), block.modifier('is-sticky').class(this.sticky)) }, h("nav", { key: 'fab886ec2da35d0d6e39cff8c624bd69de5da2a2', class: Object.assign(Object.assign(Object.assign({}, elNav.class()), elNav.modifier(`context-${this.interface}`).class(this.interface !== '')), elNav.modifier(`align-${this.align}`).class(this.align !== '')), role: "navigation", "aria-label": "pagination" }, h("bal-button", { key: 'b482e3df263b4d068f3ff563466a6438de032256', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elPrevious.class()), elPrevious.modifier(`context-${this.interface}`).class()), disabled: this._value < 2 || this.disabled, onClick: () => this.previous(), "data-testid": "bal-pagination-controls-left", title: leftControlTitle }, h("bal-icon", { key: 'b15a56d746b21747cd35de104ba9858b3afc2998', name: "nav-go-left", size: "small" })), h("bal-button", { key: '16e0e1aa9e827ef3f273417ee79d9aa6750e4ccf', square: true, color: buttonColor, size: buttonSize, flat: flat, class: Object.assign(Object.assign({}, elNext.class()), elNext.modifier(`context-${this.interface}`).class()), disabled: this._value === this.totalPages || this.disabled, onClick: () => this.next(), "data-testid": "bal-pagination-controls-right", title: rightControlTitle }, h("bal-icon", { key: '4cad894cb58baa3d089f12aad0a6ea41aa67d3c7', name: "nav-go-right", size: "small" })), hasBasicNavigationButtons && this.isMobile ? h(PaginationMobile, null) : '', hasBasicNavigationButtons && !this.isMobile ? h(PaginationTablet, null) : '', !hasBasicNavigationButtons ? h(SmallWithText, null) : '')));
     }
     static get is() { return "bal-pagination"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-popover/bal-popover-content/bal-popover-content.js

@@ -53,7 +53,7 @@ export class PopoverContent {
     }
     render() {
         const block = BEM.block('popover').element('content');
-        return (h(Host, { key: '8c5281cc1fe731c729e6fb2859451b9872254f57', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '10fa564b011b3f0a0e1bd0c338d09970f3ce809e', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: 'cddf8ead7a7a6028a54b2d0a152f68a7dbeb9462' })), h("div", { key: 'acaa433bb6c396d86d927f95013fae818e694ab3', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
+        return (h(Host, { key: 'a9fcd1ea22fd05ad6be18b080c4dd4e88dc08d71', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('expanded').class(this.expanded)), block.modifier('spaceless').class(this.spaceless)), block.modifier('no-shadow').class(this.noShadow)), block.modifier(`radius-${this.radius}`).class()), block.modifier(`color-${this.color}`).class()), block.modifier('on-top').class(this.mobileTop)), "data-testid": "bal-popover-content", role: "tooltip", style: this.contentStyle }, h("div", { key: '43cb910ae76b5dea745959c0eb84d1cf666f0bc6', class: Object.assign({}, block.element('inner').class()), style: this.innerStyle }, h("slot", { key: '60d532af90339403cd863bebd249ae2134f8ce0d' })), h("div", { key: 'd913a7220d213326381e703f7db8ea327e747dc0', class: Object.assign({}, block.element('arrow').class()), "data-popper-arrow": true })));
     }
     static get is() { return "bal-popover-content"; }
     static get properties() {

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

@@ -310,7 +310,7 @@ export class Popup {
         const innerBlock = block.element('inner');
         const innerHeadBlock = innerBlock.element('head');
         const innerContentBlock = innerBlock.element('content');
-        return (h(Host, { key: '7d28fda7c02f6fefbcbb6aa82d2cda79291d1a08', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: '64e696bdb37f3428332fed2313ad92dfa21bc60b', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: '809fb517c7a69f1c85e0673a9ce44c63a1b4baba', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: 'cfb7b21ac6602480c0431f51c77650625b724666', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '7e113fac6750446fb9be2b159bb1c3c9ab17710d', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '1a1417a1d2f35d1de1523941e37c251801edb69a', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '897c6c7991f7570689e6b10c1981e52eb31a4ef3' }))))));
+        return (h(Host, { key: '22256d10b23aaeefad30786345780029c23f10a5', class: Object.assign({}, block.class()), role: "dialog", "aria-hidden": `${this.presented !== true}`, "aria-modal": `${this.presented === true}`, "aria-presented": `${this.presented === true}`, "aria-labelledby": `${this.popupId}-heading` }, h("div", { key: 'a3a5862b32a8a6acadd12893729148e016527dec', class: Object.assign({}, backdropBlock.class()), ref: backdropEl => (this.backdropEl = backdropEl) }), h("div", { key: 'da06417052ab28135f651a6e3015462ae4d36915', class: Object.assign(Object.assign({}, containerBlock.class()), containerBlock.modifier(`variant-${this.activeVariant}`).class()), ref: containerEl => (this.containerEl = containerEl), style: { minWidth: `${this.minContainerWidth}px` } }, h("div", { key: 'd442c9ae9d377cd18d7853cb850182e5e117a199', class: Object.assign({}, arrowBlock.class()), ref: arrowEl => (this.arrowEl = arrowEl) }), h("bal-stack", { key: '078c31c4580e387b73b455afcc81610ea9ce7c9e', layout: "vertical", px: this.activeVariant === 'popover' ? 'medium' : 'none', py: "medium", class: Object.assign({}, innerBlock.class()) }, this.label ? (h("bal-stack", { space: "auto", class: Object.assign({}, innerHeadBlock.class()) }, h("bal-heading", { "data-test": "bal-popup-label", level: "span", "visual-level": "large", id: `${this.popupId}-heading` }, this.label), this.activeClosable ? (h("bal-close", { "data-test": "bal-popup-close", tabindex: -1, onClick: () => this.onCloseClick() })) : (''))) : (''), h("div", { key: '14cee241ee538a5ff4075b255841deaa0ca06ff6', class: Object.assign({}, innerContentBlock.class()), ref: contentEl => (this.contentEl = contentEl), "data-test": "bal-popup-content" }, h("slot", { key: '834174282762c50461b4a9851c74416804905344' }))))));
     }
     static get is() { return "bal-popup"; }
     static get originalStyleUrls() {

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

@@ -59,7 +59,7 @@ export class ProgressBar {
     render() {
         const block = BEM.block('progress-bar');
         const bemLineEl = block.element('line');
-        return (h(Host, { key: '1df789d0a33beb7a7bdcf2802d41f91312091e84', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: '27f99d214e02805e016e5d082941530b23c1ee22', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
+        return (h(Host, { key: 'd024ab4ad15f9a04b2db9b5923785cc9eecbae74', "aria-hidden": "true", class: Object.assign(Object.assign({}, block.class()), block.modifier(`background-${this.background}-of-${this.color}`).class()) }, h("div", { key: '8ed29c4d19bc1e5e57990b5c91d95134a7fc482d', class: Object.assign(Object.assign(Object.assign({}, bemLineEl.class()), bemLineEl.modifier(`color-${this.color}`).class()), bemLineEl.modifier(`animated`).class(this.animated)), ref: lineEl => (this.lineEl = lineEl) })));
     }
     static get is() { return "bal-progress-bar"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-radio/bal-radio-group/bal-radio-group.css

@@ -0,0 +1 @@
+.bal-radio-group{display:inline-block;position:relative;width:100%}.bal-radio-group__inner{display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;flex-wrap:wrap;gap:var(--bal-space-normal)}.bal-radio-group__inner--button{flex-direction:column;flex-wrap:wrap;flex:1;gap:var(--bal-space-x-small)}@media screen and (min-width: 769px),print{.bal-radio-group__inner--button{flex-direction:row}}.bal-radio-group__inner--expanded{align-items:stretch}.bal-radio-group__inner--expanded .bal-radio{flex:1}@media screen and (max-width: 768px){.bal-radio-group__inner--expanded .bal-radio{width:100%}}.bal-radio-group__inner--button.bal-radio-group__inner--vertical{gap:var(--bal-space-x-small)}.bal-radio-group__inner--vertical{flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}@media screen and (min-width: 769px),print{.bal-radio-group__inner--vertical{align-items:flex-start}}@media screen and (max-width: 768px){.bal-radio-group__inner--vertical-mobile{flex-direction:column;border-radius:var(--bal-radius-normal);gap:0}}

package/dist/collection/components/bal-radio/bal-radio-group/bal-radio-group.js

@@ -1,14 +1,14 @@
 import { __decorate, __metadata } from "tslib";
 import { h, Host, } from "@stencil/core";
+import { ariaBooleanToString } from "../../../utils/aria";
+import { inheritAttributes } from "../../../utils/attributes";
+import { BEM } from "../../../utils/bem";
+import { ListenToFocus } from "../../../utils/focus";
+import { defaultBalAriaForm } from "../../../utils/form";
 import { stopEventBubbling } from "../../../utils/form-input";
 import { hasTagName, isDescendant } from "../../../utils/helpers";
-import { BEM } from "../../../utils/bem";
 import { Logger } from "../../../utils/log";
-import { inheritAttributes } from "../../../utils/attributes";
 import { ListenToMutation } from "../../../utils/mutation";
-import { defaultBalAriaForm } from "../../../utils/form";
-import { ListenToFocus } from "../../../utils/focus";
-import { ariaBooleanToString } from "../../../utils/aria";
 export class RadioGroup {
     constructor() {
         this.inputId = `bal-rg-${radioGroupIds++}`;
@@ -68,17 +68,17 @@ export class RadioGroup {
         };
         this.ariaForm = defaultBalAriaForm;
         this.options = undefined;
+        this.interface = undefined;
         this.allowEmptySelection = false;
         this.name = this.inputId;
-        this.value = undefined;
-        this.interface = undefined;
         this.vertical = false;
         this.verticalOnMobile = false;
         this.expanded = false;
         this.invalid = undefined;
         this.disabled = undefined;
         this.readonly = undefined;
-        this.grid = 1;
+        this.value = undefined;
+        this.columns = 1;
         this.columnsTablet = 1;
         this.columnsMobile = 1;
         this.autoInvalidOff = false;
@@ -90,17 +90,11 @@ export class RadioGroup {
         this.onOptionChange();
         this.mutationObserverActive = this.options === undefined;
     }
-    valueChanged() {
-        this.onOptionChange();
-    }
     invalidChanged(value) {
         if (value !== undefined) {
             this.getRadios().forEach(radio => {
                 radio.invalid = value;
             });
-            this.getRadioButtons().forEach(radio => {
-                radio.invalid = value;
-            });
         }
     }
     disabledChanged(value) {
@@ -108,9 +102,6 @@ export class RadioGroup {
             this.getRadios().forEach(radio => {
                 radio.disabled = value;
             });
-            this.getRadioButtons().forEach(radio => {
-                radio.disabled = value;
-            });
         }
     }
     readonlyChanged(value) {
@@ -118,19 +109,19 @@ export class RadioGroup {
             this.getRadios().forEach(radio => {
                 radio.readonly = value;
             });
-            this.getRadioButtons().forEach(radio => {
-                radio.readonly = value;
-            });
         }
     }
+    valueChanged() {
+        this.onOptionChange();
+    }
     columnsChanged(value) {
-        this.getRadioButtons().forEach(radioButton => (radioButton.colSize = value));
+        this.getRadios().forEach(radio => (radio.colSize = value));
     }
     columnsTabletChanged(value) {
-        this.getRadioButtons().forEach(radioButton => (radioButton.colSizeTablet = value));
+        this.getRadios().forEach(radio => (radio.colSizeTablet = value));
     }
     columnsMobileChanged(value) {
-        this.getRadioButtons().forEach(radioButton => (radioButton.colSizeMobile = value));
+        this.getRadios().forEach(radio => (radio.colSizeMobile = value));
     }
     /**
      * LIFECYCLE
@@ -145,7 +136,7 @@ export class RadioGroup {
         this.disabledChanged(this.disabled);
         this.readonlyChanged(this.readonly);
         this.invalidChanged(this.invalid);
-        this.columnsChanged(this.grid);
+        this.columnsChanged(this.columns);
         this.columnsTabletChanged(this.columnsTablet);
         this.columnsMobileChanged(this.columnsMobile);
         this.onOptionChange();
@@ -162,7 +153,7 @@ export class RadioGroup {
         this.disabledChanged(this.disabled);
         this.readonlyChanged(this.readonly);
         this.invalidChanged(this.invalid);
-        this.columnsChanged(this.grid);
+        this.columnsChanged(this.columns);
         this.columnsTabletChanged(this.columnsTablet);
         this.columnsMobileChanged(this.columnsMobile);
         this.onOptionChange();
@@ -273,15 +264,12 @@ export class RadioGroup {
     getRadios() {
         return Array.from(this.el.querySelectorAll('bal-radio'));
     }
-    getRadioButtons() {
-        return Array.from(this.el.querySelectorAll('bal-radio-button'));
-    }
     /**
      * RENDER
      * ------------------------------------------------------
      */
     render() {
-        const block = BEM.block('radio-checkbox-group');
+        const block = BEM.block('radio-group');
         const innerEl = block.element('inner');
         const rawOptions = this.options || [];
         const options = rawOptions.map(option => {
@@ -290,9 +278,19 @@ export class RadioGroup {
             }
             return option;
         });
-        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('select-button').class(this.interface === 'select-button')) }, h("slot", null), options.map(option => (h("bal-radio", { key: option.value, name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
+        return (h(Host, Object.assign({ class: Object.assign({}, block.class()), role: "radiogroup", "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-disabled": ariaBooleanToString(this.disabled), onClick: this.onClick }, this.inheritedAttributes), h("div", { class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier('vertical-mobile').class(this.verticalOnMobile)), innerEl.modifier('vertical').class(this.vertical)), innerEl.modifier('expanded').class(this.expanded)), innerEl.modifier('button').class(this.interface === 'button')) }, h("slot", null), options.map(option => (h("bal-radio", { key: option.value, name: option.name || this.name, value: option.value, labelHidden: option.labelHidden, flat: option.flat, interface: option.interface, disabled: option.disabled, readonly: option.readonly, required: option.required, nonSubmit: !!option.nonSubmit, invalid: option.invalid, innerHTML: option.html }))))));
     }
     static get is() { return "bal-radio-group"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bal-radio-group.sass"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bal-radio-group.css"]
+        };
+    }
     static get properties() {
         return {
             "options": {
@@ -318,6 +316,31 @@ export class RadioGroup {
                 "getter": false,
                 "setter": false
             },
+            "interface": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "BalProps.BalRadioGroupInterface",
+                    "resolved": "\"button\" | \"radio\" | \"tile\"",
+                    "references": {
+                        "BalProps": {
+                            "location": "global",
+                            "id": "global::BalProps"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Defines the layout of the radio button"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "interface",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
             "allowEmptySelection": {
                 "type": "boolean",
                 "mutable": false,
@@ -358,50 +381,6 @@ export class RadioGroup {
                 "reflect": false,
                 "defaultValue": "this.inputId"
             },
-            "value": {
-                "type": "any",
-                "mutable": true,
-                "complexType": {
-                    "original": "any | null",
-                    "resolved": "any",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "the value of the radio group."
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "value",
-                "reflect": false
-            },
-            "interface": {
-                "type": "string",
-                "mutable": false,
-                "complexType": {
-                    "original": "BalProps.BalRadioGroupInterface",
-                    "resolved": "\"radio\" | \"select-button\"",
-                    "references": {
-                        "BalProps": {
-                            "location": "global",
-                            "id": "global::BalProps"
-                        }
-                    }
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "Defines the layout of the radio button"
-                },
-                "getter": false,
-                "setter": false,
-                "attribute": "interface",
-                "reflect": false,
-                "defaultValue": "undefined"
-            },
             "vertical": {
                 "type": "boolean",
                 "mutable": false,
@@ -522,7 +501,26 @@ export class RadioGroup {
                 "reflect": false,
                 "defaultValue": "undefined"
             },
-            "grid": {
+            "value": {
+                "type": "any",
+                "mutable": true,
+                "complexType": {
+                    "original": "any | null",
+                    "resolved": "any",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "the value of the radio group."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": false
+            },
+            "columns": {
                 "type": "number",
                 "mutable": false,
                 "complexType": {
@@ -543,7 +541,7 @@ export class RadioGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "grid",
+                "attribute": "columns",
                 "reflect": false,
                 "defaultValue": "1"
             },
@@ -775,9 +773,6 @@ export class RadioGroup {
         return [{
                 "propName": "options",
                 "methodName": "optionChanged"
-            }, {
-                "propName": "value",
-                "methodName": "valueChanged"
             }, {
                 "propName": "invalid",
                 "methodName": "invalidChanged"
@@ -788,7 +783,10 @@ export class RadioGroup {
                 "propName": "readonly",
                 "methodName": "readonlyChanged"
             }, {
-                "propName": "grid",
+                "propName": "value",
+                "methodName": "valueChanged"
+            }, {
+                "propName": "columns",
                 "methodName": "columnsChanged"
             }, {
                 "propName": "columnsTablet",