@baloise/ds-core 19.9.4 → 19.9.5

package/components/bal-checkbox-group.js

@@ -8,7 +8,10 @@ import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
 import { i as isDescendant, o as hasTagName } from './helpers.js';
 import { L as Logger } from './log.js';
-import { d as defineCustomElement$2 } from './bal-checkbox2.js';
+import { d as defineCustomElement$5 } from './bal-check2.js';
+import { d as defineCustomElement$4 } from './bal-checkbox2.js';
+import { d as defineCustomElement$3 } from './bal-icon2.js';
+import { d as defineCustomElement$2 } from './bal-switch2.js';
 import { L as ListenToFocus } from './focus.decorator.js';
 import { L as ListenToMutation } from './mutation.decorator.js';
 
@@ -392,14 +395,29 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-checkbox-group", "bal-checkbox"];
+    const components = ["bal-checkbox-group", "bal-check", "bal-checkbox", "bal-icon", "bal-switch"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-checkbox-group":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CheckboxGroup);
             }
             break;
+        case "bal-check":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
         case "bal-checkbox":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-switch":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-checkbox2.js

@@ -8,6 +8,9 @@ import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling, i as inputSetFocus, a as inputSetBlur } from './form-input.js';
 import { i as isDescendant } from './helpers.js';
 import { L as Logger } from './log.js';
+import { d as defineCustomElement$3 } from './bal-check2.js';
+import { d as defineCustomElement$2 } from './bal-icon2.js';
+import { d as defineCustomElement$1 } from './bal-switch2.js';
 import { L as ListenToElementStates } from './element-states.decorator.js';
 import { a as isSpaceKey } from './keyboard.helpers.js';
 
@@ -349,12 +352,11 @@ const Checkbox = /*@__PURE__*/ proxyCustomElement(class Checkbox extends HTMLEle
         const id = this.ariaForm.controlId || this.inputId;
         const labelId = this.ariaForm.labelId || null;
         const LabelTag = hasFormControl ? 'label' : 'span';
-        const Icon = this.interface === 'switch' ? 'bal-switch' : 'bal-check';
-        return (h(Host, { key: 'eaa9cf2ba9de2a203b98515939ff117c89dc16cf', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('button').class(this.interface === 'button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.mergedElementState.hovered)), block.modifier('pressed').class(this.mergedElementState.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
+        return (h(Host, { key: 'e6718d0f01496940fbc03686159599af02e63be2', "aria-checked": `${this.checked}`, "aria-disabled": ariaBooleanToString(this.disabled), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-hidden": ariaBooleanToString(this.disabled || this.nonSubmit), "aria-focused": focused ? 'true' : null, "aria-labelledby": labelId, "aria-describedby": this.ariaForm.messageId, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ 'bal-focused': focused }, block.class()), block.modifier('checkbox').class()), block.modifier('button').class(this.interface === 'button')), block.modifier('switch').class(this.interface === 'switch')), block.modifier('tile').class(this.interface === 'tile')), block.modifier(`tile-color-${this.color}`).class(this.interface === 'tile' && !!this.color)), block.modifier('focused').class(this.focused)), block.modifier('invalid').class(this.invalid)), block.modifier('checked').class(this.checked)), block.modifier('flat').class(this.flat)), block.modifier('disabled').class(this.disabled || this.readonly)), block.modifier('hovered').class(this.mergedElementState.hovered)), block.modifier('pressed').class(this.mergedElementState.pressed)), block.modifier(`column-${this.colSize}`).class(this.interface === 'tile' && this.colSize > 1)), block
                 .modifier(`column-tablet-${this.colSizeTablet}`)
                 .class(this.interface === 'tile' && this.colSizeTablet > 1)), block
                 .modifier(`column-mobile-${this.colSizeMobile}`)
-                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '6fd849f4768bc7155eb5db297713bc82aeab6dfe', class: Object.assign({}, labelEl.class()), "data-testid": "bal-checkbox-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "checkbox", "data-testid": "bal-checkbox-input", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, h(Icon, { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed }))) : (''), h("div", { key: 'ca1ec209d9211082db1d0905e599eea5e6803244', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: 'a2a3c8124d7d47bf300b229fe01e62fa198961c0' })))));
+                .class(this.interface === 'tile' && this.colSizeMobile > 1)), onClick: this.onClick }, h(LabelTag, { key: '3bd8c2c8217d5e958009aeb3465bd7c8446c6960', class: Object.assign({}, labelEl.class()), "data-testid": "bal-checkbox-label" }, hasFormControl ? (h("input", Object.assign({ id: id, type: "checkbox", "data-testid": "bal-checkbox-input", name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled || this.nonSubmit, readonly: this.readonly, class: Object.assign({}, inputEl.class()), "aria-hidden": ariaBooleanToString(this.nonSubmit), "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-describedby": this.ariaForm.messageId, onChange: ev => this.toggleChecked(ev), onFocus: ev => this.onFocus(ev), onBlur: ev => this.onBlur(ev), ref: inputEl => (this.nativeInput = inputEl) }, inputAttributes))) : (''), this.interface !== 'tile' ? (h("div", { class: Object.assign({}, labelIconEl.class()) }, this.interface === 'switch' ? (h("bal-switch", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed })) : (h("bal-check", { checked: this.checked, disabled: this.disabled || this.readonly, invalid: this.invalid, inverted: this.interface === 'button' && this.checked, hovered: this.mergedElementState.hovered, pressed: this.mergedElementState.pressed })))) : (''), h("div", { key: 'c1d1b270f076b748681da1d4fdb36380e8bfaf45', class: Object.assign(Object.assign({}, labelTextEl.class()), labelTextEl.modifier('hidden').class(this.labelHidden)) }, h("slot", { key: '123d7f262307eda399023cdc4ecbe6c83d352336' })))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -415,13 +417,28 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-checkbox"];
+    const components = ["bal-checkbox", "bal-check", "bal-icon", "bal-switch"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-checkbox":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Checkbox);
             }
             break;
+        case "bal-check":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "bal-switch":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
     } });
 }
 

package/components/bal-nav.js

@@ -8,32 +8,34 @@ import { L as Logger } from './log.js';
 import { B as BalScrollHandler } from './scroll.js';
 import { s as sanitizeSvg } from './svg.js';
 import { e as isTabKey } from './keyboard.helpers.js';
-import { d as defineCustomElement$t } from './bal-badge2.js';
-import { d as defineCustomElement$s } from './bal-button2.js';
-import { d as defineCustomElement$r } from './bal-checkbox2.js';
-import { d as defineCustomElement$q } from './bal-close2.js';
-import { d as defineCustomElement$p } from './bal-heading2.js';
-import { d as defineCustomElement$o } from './bal-icon2.js';
-import { d as defineCustomElement$n } from './bal-list2.js';
-import { d as defineCustomElement$m } from './bal-list-item2.js';
-import { d as defineCustomElement$l } from './bal-list-item-accordion-body2.js';
-import { d as defineCustomElement$k } from './bal-list-item-accordion-head2.js';
-import { d as defineCustomElement$j } from './bal-list-item-content2.js';
-import { d as defineCustomElement$i } from './bal-list-item-icon2.js';
-import { d as defineCustomElement$h } from './bal-list-item-title2.js';
-import { d as defineCustomElement$g } from './bal-logo2.js';
-import { d as defineCustomElement$f } from './bal-nav-link2.js';
-import { d as defineCustomElement$e } from './bal-nav-link-grid2.js';
-import { d as defineCustomElement$d } from './bal-nav-link-grid-col2.js';
-import { d as defineCustomElement$c } from './bal-nav-menu-bar2.js';
-import { d as defineCustomElement$b } from './bal-nav-menu-flyout2.js';
-import { d as defineCustomElement$a } from './bal-nav-meta-bar2.js';
-import { d as defineCustomElement$9 } from './bal-popover2.js';
-import { d as defineCustomElement$8 } from './bal-popover-content2.js';
-import { d as defineCustomElement$7 } from './bal-select2.js';
-import { d as defineCustomElement$6 } from './bal-select-option2.js';
-import { d as defineCustomElement$5 } from './bal-spinner2.js';
-import { d as defineCustomElement$4 } from './bal-stack2.js';
+import { d as defineCustomElement$v } from './bal-badge2.js';
+import { d as defineCustomElement$u } from './bal-button2.js';
+import { d as defineCustomElement$t } from './bal-check2.js';
+import { d as defineCustomElement$s } from './bal-checkbox2.js';
+import { d as defineCustomElement$r } from './bal-close2.js';
+import { d as defineCustomElement$q } from './bal-heading2.js';
+import { d as defineCustomElement$p } from './bal-icon2.js';
+import { d as defineCustomElement$o } from './bal-list2.js';
+import { d as defineCustomElement$n } from './bal-list-item2.js';
+import { d as defineCustomElement$m } from './bal-list-item-accordion-body2.js';
+import { d as defineCustomElement$l } from './bal-list-item-accordion-head2.js';
+import { d as defineCustomElement$k } from './bal-list-item-content2.js';
+import { d as defineCustomElement$j } from './bal-list-item-icon2.js';
+import { d as defineCustomElement$i } from './bal-list-item-title2.js';
+import { d as defineCustomElement$h } from './bal-logo2.js';
+import { d as defineCustomElement$g } from './bal-nav-link2.js';
+import { d as defineCustomElement$f } from './bal-nav-link-grid2.js';
+import { d as defineCustomElement$e } from './bal-nav-link-grid-col2.js';
+import { d as defineCustomElement$d } from './bal-nav-menu-bar2.js';
+import { d as defineCustomElement$c } from './bal-nav-menu-flyout2.js';
+import { d as defineCustomElement$b } from './bal-nav-meta-bar2.js';
+import { d as defineCustomElement$a } from './bal-popover2.js';
+import { d as defineCustomElement$9 } from './bal-popover-content2.js';
+import { d as defineCustomElement$8 } from './bal-select2.js';
+import { d as defineCustomElement$7 } from './bal-select-option2.js';
+import { d as defineCustomElement$6 } from './bal-spinner2.js';
+import { d as defineCustomElement$5 } from './bal-stack2.js';
+import { d as defineCustomElement$4 } from './bal-switch2.js';
 import { d as defineCustomElement$3 } from './bal-tabs2.js';
 import { d as defineCustomElement$2 } from './bal-tag2.js';
 import { b as balBreakpoints } from './breakpoints.subject.js';
@@ -885,7 +887,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-nav", "bal-badge", "bal-button", "bal-checkbox", "bal-close", "bal-heading", "bal-icon", "bal-list", "bal-list-item", "bal-list-item-accordion-body", "bal-list-item-accordion-head", "bal-list-item-content", "bal-list-item-icon", "bal-list-item-title", "bal-logo", "bal-nav-link", "bal-nav-link-grid", "bal-nav-link-grid-col", "bal-nav-menu-bar", "bal-nav-menu-flyout", "bal-nav-meta-bar", "bal-popover", "bal-popover-content", "bal-select", "bal-select-option", "bal-spinner", "bal-stack", "bal-tabs", "bal-tag"];
+    const components = ["bal-nav", "bal-badge", "bal-button", "bal-check", "bal-checkbox", "bal-close", "bal-heading", "bal-icon", "bal-list", "bal-list-item", "bal-list-item-accordion-body", "bal-list-item-accordion-head", "bal-list-item-content", "bal-list-item-icon", "bal-list-item-title", "bal-logo", "bal-nav-link", "bal-nav-link-grid", "bal-nav-link-grid-col", "bal-nav-menu-bar", "bal-nav-menu-flyout", "bal-nav-meta-bar", "bal-popover", "bal-popover-content", "bal-select", "bal-select-option", "bal-spinner", "bal-stack", "bal-switch", "bal-tabs", "bal-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-nav":
             if (!customElements.get(tagName)) {
@@ -894,130 +896,140 @@ function defineCustomElement$1() {
             break;
         case "bal-badge":
             if (!customElements.get(tagName)) {
-                defineCustomElement$t();
+                defineCustomElement$v();
             }
             break;
         case "bal-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$s();
+                defineCustomElement$u();
+            }
+            break;
+        case "bal-check":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$t();
             }
             break;
         case "bal-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$r();
+                defineCustomElement$s();
             }
             break;
         case "bal-close":
             if (!customElements.get(tagName)) {
-                defineCustomElement$q();
+                defineCustomElement$r();
             }
             break;
         case "bal-heading":
             if (!customElements.get(tagName)) {
-                defineCustomElement$p();
+                defineCustomElement$q();
             }
             break;
         case "bal-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$o();
+                defineCustomElement$p();
             }
             break;
         case "bal-list":
             if (!customElements.get(tagName)) {
-                defineCustomElement$n();
+                defineCustomElement$o();
             }
             break;
         case "bal-list-item":
             if (!customElements.get(tagName)) {
-                defineCustomElement$m();
+                defineCustomElement$n();
             }
             break;
         case "bal-list-item-accordion-body":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "bal-list-item-accordion-head":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "bal-list-item-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "bal-list-item-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "bal-list-item-title":
             if (!customElements.get(tagName)) {
-                defineCustomElement$h();
+                defineCustomElement$i();
             }
             break;
         case "bal-logo":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "bal-nav-link":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "bal-nav-link-grid":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "bal-nav-link-grid-col":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "bal-nav-menu-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "bal-nav-menu-flyout":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "bal-nav-meta-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "bal-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "bal-popover-content":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "bal-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "bal-select-option":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "bal-spinner":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "bal-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "bal-switch":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/components/bal-select2.js

@@ -10,11 +10,13 @@ import { s as stopEventBubbling } from './form-input.js';
 import { m as rIC, l as debounce, e as waitAfterIdleCallback, d as deepReady, i as isDescendant } from './helpers.js';
 import { L as Logger } from './log.js';
 import { r as removeValue, p as preventDefault, l as length, g as getValues, i as includes, s as startsWith, a as addValue, f as findLabelByValue, b as findOptionByLabel, v as validateAfterBlur } from './utils.js';
-import { d as defineCustomElement$6 } from './bal-checkbox2.js';
-import { d as defineCustomElement$5 } from './bal-close2.js';
-import { d as defineCustomElement$4 } from './bal-icon2.js';
-import { d as defineCustomElement$3 } from './bal-popover2.js';
-import { d as defineCustomElement$2 } from './bal-popover-content2.js';
+import { d as defineCustomElement$8 } from './bal-check2.js';
+import { d as defineCustomElement$7 } from './bal-checkbox2.js';
+import { d as defineCustomElement$6 } from './bal-close2.js';
+import { d as defineCustomElement$5 } from './bal-icon2.js';
+import { d as defineCustomElement$4 } from './bal-popover2.js';
+import { d as defineCustomElement$3 } from './bal-popover-content2.js';
+import { d as defineCustomElement$2 } from './bal-switch2.js';
 import { d as defineCustomElement$1 } from './bal-tag2.js';
 import { a as isSpaceKey, b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, f as isBackspaceKey } from './keyboard.helpers.js';
 
@@ -870,34 +872,44 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["bal-select", "bal-checkbox", "bal-close", "bal-icon", "bal-popover", "bal-popover-content", "bal-tag"];
+    const components = ["bal-select", "bal-check", "bal-checkbox", "bal-close", "bal-icon", "bal-popover", "bal-popover-content", "bal-switch", "bal-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "bal-select":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, Select);
             }
             break;
+        case "bal-check":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
         case "bal-checkbox":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "bal-close":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "bal-icon":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "bal-popover":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "bal-popover-content":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "bal-switch":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/components/bal-switch.js

@@ -1,77 +1,4 @@
-import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { B as BEM } from './bem.js';
-import { d as defineCustomElement$2 } from './bal-icon2.js';
-
-const balSwitchCss = ":root{--bal-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-checkbox-switch-label-background-pressed-after:var(--bal-color-border-primary-pressed);--bal-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-pressed-after:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-checkbox-switch-label-background-invalid-checked-hovered-before:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-checked-pressed-before:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white)}.bal-switch{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.5rem;height:1.5rem;padding:.25rem;border-radius:var(--bal-radius-rounded);overflow:hidden;background:var(--bal-checkbox-switch-label-background-before)}@media (hover: hover)and (pointer: fine){.bal-switch--hovered,.bal-switch:hover{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--hovered .bal-switch__toggle,.bal-switch:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-hover-after)}}.bal-switch--pressed,.bal-switch:active{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--pressed .bal-switch__toggle,.bal-switch:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-pressed-after)}.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-checked-before)}.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}@media (hover: hover)and (pointer: fine){.bal-switch--checked.bal-switch--hovered,.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-checked-hover-before)}.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}}.bal-switch--checked.bal-switch--pressed,.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-checked-active-before)}.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch--invalid{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-after)}@media (hover: hover)and (pointer: fine){.bal-switch--invalid.bal-switch--hovered,.bal-switch--invalid:hover{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-hover-after)}}.bal-switch--invalid.bal-switch--pressed,.bal-switch--invalid:active{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-pressed-after)}.bal-switch--invalid.bal-switch--checked.bal-switch,.bal-switch--invalid.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-invalid-checked-before)}.bal-switch--invalid.bal-switch--checked.bal-switch .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered,.bal-switch--invalid.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-invalid-checked-hovered-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed,.bal-switch--invalid.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-invalid-checked-pressed-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--disabled,.bal-switch--disabled:hover,.bal-switch--disabled:active{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-before)}.bal-switch--disabled .bal-switch__toggle,.bal-switch--disabled:hover .bal-switch__toggle,.bal-switch--disabled:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-after)}.bal-switch--disabled.bal-switch--checked,.bal-switch--disabled.bal-switch--checked:hover,.bal-switch--disabled.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-before)}.bal-switch--disabled.bal-switch--checked .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:hover .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-after)}.bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-after);border-radius:50%;position:absolute;top:.25rem;width:1rem;height:1rem;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.bal-switch__toggle--checked{-webkit-transform:translateX(100%);transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch .bal-icon{position:absolute}.bal-switch .bal-icon .bal-switch__icon--checked{opacity:1}.bal-switch .bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";
-
-const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement {
-    constructor(registerHost) {
-        super();
-        if (registerHost !== false) {
-            this.__registerHost();
-        }
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * If `true`, the checkbox is selected.
-         */
-        this.checked = false;
-        /**
-         * If `true` the component gets a invalid red style.
-         */
-        this.invalid = undefined;
-        /**
-         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
-         */
-        this.disabled = undefined;
-        /**
-         * @internal
-         */
-        this.hovered = false;
-        /**
-         * @internal
-         */
-        this.pressed = false;
-    }
-    /**
-     * RENDER
-     * ------------------------------------------------------
-     */
-    render() {
-        const block = BEM.block('switch');
-        const checked = !!this.checked;
-        const disabled = !!this.disabled;
-        const invalid = !!this.invalid;
-        return (h(Host, { key: '44e17aefdee7df228e92368c3863509a4dcd4bc8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: '1f27c8f3f92467ea80de321666e597c8ea7cde89', name: "check", color: "white", size: "small", "aria-hidden": "true", colorHovered: "white", colorPressed: "white", hovered: this.hovered, pressed: this.pressed, class: Object.assign({}, block.element('icon').modifier('checked').class(checked)) }), h("div", { key: 'd22b87a1a091669422db72acf16d48a4c4e8825f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('toggle').class()), block.element('toggle').modifier('checked').class(checked)), block.element('toggle').modifier('disabled').class(disabled)), block.element('toggle').modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) })));
-    }
-    static get style() { return balSwitchCss; }
-}, [256, "bal-switch", {
-        "checked": [1028],
-        "invalid": [4],
-        "disabled": [4],
-        "hovered": [4],
-        "pressed": [4]
-    }]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["bal-switch", "bal-icon"];
-    components.forEach(tagName => { switch (tagName) {
-        case "bal-switch":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Switch);
-            }
-            break;
-        case "bal-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-    } });
-}
+import { S as Switch, d as defineCustomElement$1 } from './bal-switch2.js';
 
 const BalSwitch = Switch;
 const defineCustomElement = defineCustomElement$1;

package/{dist/esm/bal-switch.entry.js → components/bal-switch2.js}

@@ -1,11 +1,15 @@
-import { r as registerInstance, h, H as Host } from './index-BdVwMG9u.js';
-import { B as BEM } from './bem-ByiN-QjD.js';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { B as BEM } from './bem.js';
+import { d as defineCustomElement$1 } from './bal-icon2.js';
 
 const balSwitchCss = ":root{--bal-checkbox-switch-label-background-before:var(--bal-color-primary-1);--bal-checkbox-switch-label-background-after:var(--bal-color-primary);--bal-checkbox-switch-label-background-hover-after:var(--bal-color-light-blue-5);--bal-checkbox-switch-label-background-active-after:var(--bal-color-primary-6);--bal-checkbox-switch-label-background-pressed-after:var(--bal-color-border-primary-pressed);--bal-checkbox-switch-label-background-checked-before:var(--bal-color-success-4);--bal-checkbox-switch-label-background-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-checked-hover-before:var(--bal-color-success-5);--bal-checkbox-switch-label-background-checked-active-before:var(--bal-color-success-6);--bal-checkbox-switch-label-background-invalid-before:var(--bal-color-danger-1);--bal-checkbox-switch-label-background-invalid-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-hover-after:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-active-after:var(--bal-color-border-danger);--bal-checkbox-switch-label-background-invalid-pressed-after:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-invalid-checked-before:var(--bal-color-danger-4);--bal-checkbox-switch-label-background-invalid-checked-after:var(--bal-color-white);--bal-checkbox-switch-label-background-invalid-checked-hover-before:var(--bal-color-danger-5);--bal-checkbox-switch-label-background-invalid-checked-active-before:var(--bal-color-danger-6);--bal-checkbox-switch-label-background-invalid-checked-hovered-before:var(--bal-color-border-danger-hovered);--bal-checkbox-switch-label-background-invalid-checked-pressed-before:var(--bal-color-border-danger-pressed);--bal-checkbox-switch-label-background-disabled-hover-active-before:var(--bal-color-grey-3);--bal-checkbox-switch-label-background-disabled-hover-active-after:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-before:var(--bal-color-border-grey-dark);--bal-checkbox-switch-label-background-disabled-checked-hover-active-after:var(--bal-color-white)}.bal-switch{display:-ms-inline-flexbox;display:inline-flex;position:relative;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:2.5rem;height:1.5rem;padding:.25rem;border-radius:var(--bal-radius-rounded);overflow:hidden;background:var(--bal-checkbox-switch-label-background-before)}@media (hover: hover)and (pointer: fine){.bal-switch--hovered,.bal-switch:hover{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--hovered .bal-switch__toggle,.bal-switch:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-hover-after)}}.bal-switch--pressed,.bal-switch:active{background:var(--bal-checkbox-switch-label-background-before)}.bal-switch--pressed .bal-switch__toggle,.bal-switch:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-pressed-after)}.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-checked-before)}.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}@media (hover: hover)and (pointer: fine){.bal-switch--checked.bal-switch--hovered,.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-checked-hover-before)}.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}}.bal-switch--checked.bal-switch--pressed,.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-checked-active-before)}.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch--invalid{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-after)}@media (hover: hover)and (pointer: fine){.bal-switch--invalid.bal-switch--hovered,.bal-switch--invalid:hover{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-hover-after)}}.bal-switch--invalid.bal-switch--pressed,.bal-switch--invalid:active{background:var(--bal-checkbox-switch-label-background-invalid-before)}.bal-switch--invalid.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-pressed-after)}.bal-switch--invalid.bal-switch--checked.bal-switch,.bal-switch--invalid.bal-switch--checked{background:var(--bal-checkbox-switch-label-background-invalid-checked-before)}.bal-switch--invalid.bal-switch--checked.bal-switch .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered,.bal-switch--invalid.bal-switch--checked:hover{background:var(--bal-checkbox-switch-label-background-invalid-checked-hovered-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--hovered .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:hover .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed,.bal-switch--invalid.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-invalid-checked-pressed-before)}.bal-switch--invalid.bal-switch--checked.bal-switch--pressed .bal-switch__toggle,.bal-switch--invalid.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-invalid-checked-after)}.bal-switch--disabled,.bal-switch--disabled:hover,.bal-switch--disabled:active{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-before)}.bal-switch--disabled .bal-switch__toggle,.bal-switch--disabled:hover .bal-switch__toggle,.bal-switch--disabled:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-hover-active-after)}.bal-switch--disabled.bal-switch--checked,.bal-switch--disabled.bal-switch--checked:hover,.bal-switch--disabled.bal-switch--checked:active{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-before)}.bal-switch--disabled.bal-switch--checked .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:hover .bal-switch__toggle,.bal-switch--disabled.bal-switch--checked:active .bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-disabled-checked-hover-active-after)}.bal-switch__toggle{background:var(--bal-checkbox-switch-label-background-after);border-radius:50%;position:absolute;top:.25rem;width:1rem;height:1rem;-webkit-transition:-webkit-transform .3s ease-in-out;transition:-webkit-transform .3s ease-in-out;transition:transform .3s ease-in-out;transition:transform .3s ease-in-out, -webkit-transform .3s ease-in-out}.bal-switch__toggle--checked{-webkit-transform:translateX(100%);transform:translateX(100%);background:var(--bal-checkbox-switch-label-background-checked-after)}.bal-switch .bal-icon{position:absolute}.bal-switch .bal-icon .bal-switch__icon--checked{opacity:1}.bal-switch .bal-icon .bal-switch__icon{opacity:0;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out}";
 
-const Switch = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const Switch = /*@__PURE__*/ proxyCustomElement(class Switch extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         /**
          * PUBLIC PROPERTY API
          * ------------------------------------------------------
@@ -42,7 +46,31 @@ const Switch = class {
         const invalid = !!this.invalid;
         return (h(Host, { key: '44e17aefdee7df228e92368c3863509a4dcd4bc8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: '1f27c8f3f92467ea80de321666e597c8ea7cde89', name: "check", color: "white", size: "small", "aria-hidden": "true", colorHovered: "white", colorPressed: "white", hovered: this.hovered, pressed: this.pressed, class: Object.assign({}, block.element('icon').modifier('checked').class(checked)) }), h("div", { key: 'd22b87a1a091669422db72acf16d48a4c4e8825f', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('toggle').class()), block.element('toggle').modifier('checked').class(checked)), block.element('toggle').modifier('disabled').class(disabled)), block.element('toggle').modifier('invalid').class(invalid)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) })));
     }
-};
-Switch.style = balSwitchCss;
+    static get style() { return balSwitchCss; }
+}, [256, "bal-switch", {
+        "checked": [1028],
+        "invalid": [4],
+        "disabled": [4],
+        "hovered": [4],
+        "pressed": [4]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bal-switch", "bal-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bal-switch":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Switch);
+            }
+            break;
+        case "bal-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { Switch as bal_switch };
+export { Switch as S, defineCustomElement as d };