@baloise/ds-core 19.3.0-nightly.20250704 → 19.3.0

package/components/bal-segment.js

@@ -1,21 +1,20 @@
 import { proxyCustomElement, HTMLElement, createEvent, writeTask, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { L as ListenToAnimation } from './animation.decorator.js';
 import { B as BEM } from './bem.js';
-import './breakpoints.subject.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
-import { L as ListenToFocus } from './focus.decorator.js';
 import { F as FOCUS_KEYS } from './focus-visible.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { r as raf } from './helpers.js';
-import { a as isSpaceKey, i as isEnterKey, c as isArrowUpKey, g as isArrowLeftKey, b as isArrowDownKey, h as isArrowRightKey, j as isHomeKey, k as isEndKey } from './keyboard.helpers.js';
+import { n as raf } from './helpers.js';
 import { L as Logger } from './log.js';
-import { L as ListenToWindowResize } from './window-resize.decorator.js';
-import './window-resize.subject.js';
+import { a as isSpaceKey, i as isEnterKey, d as isArrowUpKey, g as isArrowLeftKey, c as isArrowDownKey, h as isArrowRightKey, j as isHomeKey, k as isEndKey } from './keyboard.helpers.js';
+import { L as ListenToFocus } from './focus.decorator.js';
+import { L as ListenToAnimation } from './animation.decorator.js';
 import { L as ListenToVisibility } from './visibility.decorator.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator.js';
+import { L as ListenToWindowResize } from './window-resize.decorator.js';
 
 const balSegmentCss = ":root{--bal-segment-background:var(--bal-color-grey-2);--bal-segment-background-invalid:var(--bal-color-danger-1);--bal-segment-item-focus-border:var(--bal-color-border-primary);--bal-segment-item-text-color:var(--bal-color-text-primary);--bal-segment-item-text-color-checked:var(--bal-color-text-primary);--bal-segment-item-text-color-checked-hovered:var(--bal-color-text-primary-hovered);--bal-segment-item-text-color-checked-pressed:var(--bal-color-text-primary-pressed);--bal-segment-item-text-color-invalid:var(--bal-color-text-danger);--bal-segment-item-text-color-invalid-hovered:var(--bal-color-text-danger-hovered);--bal-segment-item-text-color-invalid-pressed:var(--bal-color-text-danger-pressed);--bal-segment-item-text-color-disabled:var(--bal-color-text-grey);--bal-segment-item-text-color-disabled-checked:var(--bal-color-text-grey-dark);--bal-segment-item-divider-background:var(--bal-color-grey);--bal-segment-item-divider-background-invalid:var(--bal-color-danger-2);--bal-segment-item-indicator-background:var(--bal-color-purple-2);--bal-segment-item-indicator-background-invalid:var(--bal-color-danger-4);--bal-segment-item-indicator-background-disabled:var(--bal-color-grey-3)}.bal-segment{display:-ms-flexbox;display:flex;background:var(--bal-segment-background);border-radius:var(--bal-radius-normal);gap:.125rem;gap:.125rem;padding:.25rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.bal-segment--invalid{background:var(--bal-segment-background-invalid)}.bal-segment--vertical{-ms-flex-direction:column;flex-direction:column;width:100%}.bal-segment--vertical .bal-segment-item__button{width:100%;-ms-flex:1;flex:1}.bal-segment--vertical.bal-segment--scrollable{overflow:auto;max-height:240px}.bal-segment--expanded{width:100%;min-width:100%;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center}.bal-segment--expanded .bal-segment-item,.bal-segment--expanded .bal-segment-item>button{-ms-flex:1;flex:1;width:100%}.bal-segment--expanded .bal-segment-item .bal-content,.bal-segment--expanded .bal-segment-item>button .bal-content{-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}";
+const BalSegmentStyle0 = balSegmentCss;
 
 const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLElement {
     constructor() {
@@ -26,39 +25,6 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         this.balChange = createEvent(this, "balChange", 7);
         this.balSelect = createEvent(this, "balSelect", 7);
         this.balVertical = createEvent(this, "balVertical", 7);
-        this.keyboardMode = true;
-        this.isVertical = false;
-        this.isMobile = false;
-        this.maxWidth = 0;
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * If `true`, the segment is shown red.
-         */
-        this.invalid = false;
-        /**
-         * If `true`, in Angular reactive forms the control will not be set invalid
-         */
-        this.autoInvalidOff = false;
-        /**
-         * If `true`, the user cannot interact with the segment.
-         */
-        this.disabled = false;
-        /**
-         * If `true`, the segment items are presented vertical as a list.
-         */
-        this.vertical = false;
-        /**
-         * If `true`, and is vertical then the list height is limited and scrollable.
-         */
-        this.scrollable = false;
-        /**
-         * If `true`, the element uses the whole width
-         */
-        this.expanded = false;
         /**
          * LISTENERS
          * ------------------------------------------------------
@@ -126,6 +92,19 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
                 this.emitValueChange();
             }
         };
+        this.focusedValue = undefined;
+        this.keyboardMode = true;
+        this.isVertical = false;
+        this.isMobile = false;
+        this.maxWidth = 0;
+        this.ariaForm = defaultBalAriaForm;
+        this.invalid = false;
+        this.autoInvalidOff = false;
+        this.disabled = false;
+        this.vertical = false;
+        this.scrollable = false;
+        this.expanded = false;
+        this.value = undefined;
     }
     createLogger(log) {
         this.log = log;
@@ -353,7 +332,7 @@ const Segment = /*@__PURE__*/ proxyCustomElement(class Segment extends HTMLEleme
         "disabled": ["disabledChanged"],
         "value": ["valueChanged"]
     }; }
-    static get style() { return balSegmentCss; }
+    static get style() { return BalSegmentStyle0; }
 }, [4, "bal-segment", {
         "invalid": [4],
         "autoInvalidOff": [516, "auto-invalid-off"],

package/components/bal-select-option2.js

@@ -6,14 +6,9 @@ const SelectOption = /*@__PURE__*/ proxyCustomElement(class SelectOption extends
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * If `true`, the user cannot interact with the option.
-         */
+        this.label = undefined;
         this.disabled = false;
-        /**
-         * @internal
-         * ID of the option.
-         */
+        this.value = undefined;
         this.for = `bal-selopt-${selectOptionIds++}`;
     }
     createLogger(log) {

package/components/bal-select2.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { _ as __decorate, a as __metadata } from './tslib.es6.js';
-import { i as isNil } from './index2.js';
+import { l as lodash_isnil } from './index3.js';
 import { a as ariaBooleanToString } from './aria.js';
 import { a as areArraysEqual } from './array.js';
 import { B as BEM } from './bem.js';
 import { d as defaultBalAriaForm } from './form.js';
 import { s as stopEventBubbling } from './form-input.js';
-import { n as rIC, q as debounce, b as waitAfterIdleCallback, d as deepReady, i as isDescendant } from './helpers.js';
-import { a as isSpaceKey, b as isArrowDownKey, c as isArrowUpKey, i as isEnterKey, d as isEscapeKey, f as isBackspaceKey } from './keyboard.helpers.js';
+import { p as rIC, e as waitAfterIdleCallback, d as deepReady, i as isDescendant, k as debounce } 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';
@@ -16,6 +15,7 @@ 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$1 } from './bal-tag2.js';
+import { a as isSpaceKey, c as isArrowDownKey, d as isArrowUpKey, i as isEnterKey, e as isEscapeKey, f as isBackspaceKey } from './keyboard.helpers.js';
 
 const watchForOptions = (containerEl, tagName, onChange) => {
     /* tslint:disable-next-line */
@@ -38,6 +38,7 @@ const watchForOptions = (containerEl, tagName, onChange) => {
 };
 
 const balSelectCss = ":root{--bal-select-control-background:var(--bal-color-white);--bal-select-control-background-hover:var(--bal-form-field-control-background-hover);--bal-select-control-background-invalid:var(--bal-form-field-control-danger-background);--bal-select-control-background-disabled:var(--bal-form-field-control-disabled-background);--bal-select-control-input-background:var(--bal-color-grey-1);--bal-select-control-native-input-background:transparent;--bal-select-control-native-input-background-hover:transparent;--bal-select-control-input-inverted-footer-background:transparent;--bal-select-control-input-inverted-footer-background-hover:transparent;--bal-select-control-input-multiple-background:transparent;--bal-select-control-input-multiple-background-read-only-selection:transparent;--bal-select-control-input-option-background:transparent;--bal-select-control-input-option-background-selected:var(--bal-color-primary-1);--bal-select-control-input-option-background-focused:var(--bal-color-grey-3);--bal-select-control-input-option-background-hover:var(--bal-color-grey-3);--bal-select-control-border-radius:var(--bal-form-field-control-radius);--bal-select-popover-border-color:var(--bal-color-grey-2);--bal-select-control-border-color:var(--bal-form-field-control-border-color);--bal-select-control-border-color-focused:var(--bal-color-primary);--bal-select-control-border-color-hover:var(--bal-form-field-control-border-color-hover);--bal-select-control-border-color-invalid:var(--bal-form-field-control-danger-border-color);--bal-select-control-border-color-disabled:var(--bal-form-field-control-disabled-border-color);--bal-select-control-border-color-focus-within:var(--bal-color-primary);--bal-select-option-border-top-color:var(--bal-color-grey-2);--bal-select-popover-empty-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color:var(--bal-form-field-control-color);--bal-select-control-text-color-focused:var(--bal-color-primary);--bal-select-input-text-color-disabled:var(--bal-form-field-label-disabled-color);--bal-select-control-inverted-footer-native-input-text-color:var(--bal-color-text-white);--bal-select-option-content-label-text-color:var(--bal-form-field-control-color)}bal-select-option{display:none !important}.bal-select{display:block;position:relative;width:100%;-ms-flex:1;flex:1;font-family:var(--bal-font-family-text)}.bal-select__popover{border:.125rem solid var(--bal-select-popover-border-color)}.bal-select__popover__empty{padding:.5rem 1rem;font-family:var(--bal-font-family-text);color:var(--bal-select-popover-empty-text-color)}.bal-select__popover__empty--hidden{display:none}.bal-select__native{position:absolute !important;left:0;top:0;margin:0;padding:0;opacity:0;outline:0;border:none;width:1px;height:1px;clip:rect(1px, 1px, 1px, 1px);overflow:hidden}.bal-select__control{display:-ms-flexbox;display:flex;border-width:.125rem;border-style:solid;border-color:var(--bal-select-control-border-color);border-radius:var(--bal-select-control-border-radius);background:var(--bal-select-control-background);font-size:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);color:var(--bal-select-control-text-color);outline:none;-webkit-box-shadow:none;box-shadow:none;padding-right:1rem;min-height:3rem}.bal-select__control--focused{border-color:var(--bal-select-control-border-color-focused)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover{border-color:var(--bal-select-control-border-color-hover);background-color:var(--bal-select-control-background-hover)}.bal-select__control:not(.bal-select__control--disabled):not(.bal-select__control--invalid):not(.bal-select__control--inverted-footer):hover .bal-select__control__input{background-color:var(--bal-select-control-input-background)}.bal-select__control--invalid:not(.bal-select__control--disabled){border-color:var(--bal-select-control-border-color-invalid) !important;background:var(--bal-select-control-background-invalid) !important}.bal-select__control:focus-within{border-color:var(--bal-select-control-border-color-focus-within) !important}.bal-select__control--disabled{background-color:var(--bal-select-control-background-disabled) !important;border-color:var(--bal-select-control-border-color-disabled) !important}.bal-select__control--disabled,.bal-select__control--disabled input{cursor:default !important;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;pointer-events:none !important;color:var(--bal-select-input-text-color-disabled)}.bal-select__control--inverted-footer{border:none;background-color:var(--bal-select-control-input-inverted-footer-background) !important;padding-right:0}.bal-select__control--inverted-footer:hover{background-color:var(--bal-select-control-input-inverted-footer-background-hover) !important}.bal-select__control--inverted-footer .input{color:var(--bal-select-control-inverted-footer-native-input-text-color);background-color:var(--bal-select-control-native-input-background) !important}.bal-select__control--inverted-footer .input:hover{background-color:var(--bal-select-control-native-input-background-hover) !important}.bal-select__control__icon{min-height:100% !important;max-height:100% !important}.bal-select__control__icon--loading{display:none}.bal-select__control__icon--clickable{cursor:pointer}.bal-select__control__selections{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1;-ms-flex-wrap:wrap;flex-wrap:wrap;line-height:1.125rem;max-width:100%;min-width:0;gap:0;padding-left:.375rem}.bal-select__control__selections .bal-tag{margin-left:.25rem;margin-top:.375rem;margin-bottom:.375rem}.bal-select__control__selections .bal-tag+.input{padding-left:.625rem}.bal-select__control__input{border:none !important;outline:none !important;outline-width:0 !important;height:2.75rem !important;-webkit-box-shadow:none !important;box-shadow:none !important;background:var(--bal-select-control-input-multiple-background);-ms-flex:1;flex:1;min-height:2.75rem !important;padding-left:.25rem !important;padding-right:.625rem !important;text-overflow:ellipsis}.bal-select__control__input:-moz-read-only{-moz-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only{-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important;-webkit-tap-highlight-color:rgba(0,0,0,0)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:-moz-read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__control__input:read-only::-moz-selection{background:var(--bal-select-control-input-multiple-background-read-only-selection)}.bal-select__option{visibility:visible;font-family:var(--bal-font-family-text);background:var(--bal-select-control-input-option-background);border:none;cursor:pointer;outline:none;min-height:3rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0;margin:0;border-top:.125rem solid var(--bal-select-option-border-top-color);text-align:inherit;white-space:nowrap;width:100%}.bal-select__option:first-child{border-top:none}.bal-select__option::-moz-focus-inner{border:none}.bal-select__option--selected{background:var(--bal-select-control-input-option-background-selected)}.bal-select__option--selected .bal-select__option__content__label{font-weight:var(--bal-font-weight-bold)}.bal-select__option--focused{background:var(--bal-select-control-input-option-background-focused)}.bal-select__option:hover{background:var(--bal-select-control-input-option-background-hover)}.bal-select__option__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-align:center;align-items:center;min-height:3rem;padding:.75rem 1rem;gap:.75rem}.bal-select__option__content__checkbox{margin:0;padding:0}.bal-select__option__content__label{margin:0;padding:0;font-family:var(--bal-font-family-text);font-weight:var(--bal-font-weight-regular);color:var(--bal-select-option-content-label-text-color);line-height:1.125rem;word-break:break-word;white-space:normal;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}";
+const BalSelectStyle0 = balSelectCss;
 
 const isHuman = true;
 const isNotHuman = false;
@@ -55,94 +56,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.didInit = false;
         this.inputId = `bal-select-${selectIds++}`;
         this.initialValue = [];
-        this.hasFocus = false;
-        this.inputValue = '';
-        this.focusIndex = -1;
-        this.isPopoverOpen = false;
-        this.options = new Map();
-        this.labelToScrollTo = '';
-        this.labelToSelectTo = '';
-        this.ariaForm = defaultBalAriaForm;
-        /**
-         * PUBLIC PROPERTY API
-         * ------------------------------------------------------
-         */
-        /**
-         * The name of the control, which is submitted with the form data.
-         */
-        this.name = this.inputId;
-        /**
-         * If `true` the component gets a invalid style.
-         */
-        this.invalid = false;
-        /**
-         * If `true` the component gets a invalid style.
-         */
-        this.filter = 'includes';
-        /**
-         * The tabindex of the control.
-         */
-        this.balTabindex = 0;
-        /**
-         * If `true` there will be no trigger icon visible, so no UX indicator for a popup
-         */
-        this.freeSolo = false;
-        /**
-         * If `true` multiple option can be selected
-         */
-        this.multiple = false;
-        /**
-         * Indicates whether the value of the control can be automatically completed by the browser.
-         */
-        this.autocomplete = 'off';
-        /**
-         * If `true` the user can search by typing into the input field.
-         */
-        this.typeahead = false;
-        /**
-         * If `true` the options are a proposal and the user can also create his
-         * own value. Can only be used with the typeahead property.
-         */
-        this.selectionOptional = false;
-        /**
-         * 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 = false;
-        /**
-         * If `true` the element can not mutated, meaning the user can not edit the control.
-         */
-        this.readonly = false;
-        /**
-         * If `true`, the user must fill in a value before submitting a form.
-         */
-        this.required = false;
-        /**
-         * @internal
-         * Set this to `true` when the component is placed on a dark background.
-         * Set this to `true` when the component is placed on a dark background.
-         */
-        this.inverted = false;
-        /**
-         * Defines the height of the popover list.
-         */
-        this.scrollable = 250;
-        /**
-         * Defines if the select is in a loading state.
-         */
-        this.loading = false;
-        /**
-         * If `true` the filtering is done outside the component.
-         */
-        this.remote = false;
-        /**
-         * If `true`, in Angular reactive forms the control will not be set invalid
-         */
-        this.autoInvalidOff = false;
-        /**
-         * Selected option values. Could also be passed as a string, which gets transformed.
-         */
-        this.value = [];
-        this.rawValue = [];
         this.removeValue = (value) => {
             if (!this.disabled) {
                 this.updateRawValue(removeValue(this.rawValue, value), isHuman);
@@ -255,6 +168,36 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
         this.handleOptionMouseEnter = (index) => {
             this.focusIndex = index;
         };
+        this.hasFocus = false;
+        this.inputValue = '';
+        this.focusIndex = -1;
+        this.isPopoverOpen = false;
+        this.options = new Map();
+        this.labelToScrollTo = '';
+        this.labelToSelectTo = '';
+        this.ariaForm = defaultBalAriaForm;
+        this.name = this.inputId;
+        this.invalid = false;
+        this.filter = 'includes';
+        this.balTabindex = 0;
+        this.freeSolo = false;
+        this.multiple = false;
+        this.maxLength = undefined;
+        this.noDataLabel = undefined;
+        this.autocomplete = 'off';
+        this.typeahead = false;
+        this.selectionOptional = false;
+        this.disabled = false;
+        this.readonly = false;
+        this.required = false;
+        this.inverted = false;
+        this.placeholder = undefined;
+        this.scrollable = 250;
+        this.loading = false;
+        this.remote = false;
+        this.autoInvalidOff = false;
+        this.value = [];
+        this.rawValue = [];
     }
     createLogger(log) {
         this.log = log;
@@ -268,7 +211,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             this.syncNativeInput(isHuman);
             if (this.didInit && isHuman === true) {
                 if (this.multiple) {
-                    if (isNil(this.rawValue)) {
+                    if (lodash_isnil(this.rawValue)) {
                         this.emitChangeEvent([]);
                     }
                     else {
@@ -276,7 +219,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                     }
                 }
                 else {
-                    if (isNil(this.rawValue) || length(this.rawValue) === 0) {
+                    if (lodash_isnil(this.rawValue) || length(this.rawValue) === 0) {
                         this.emitChangeEvent(undefined);
                     }
                     else {
@@ -304,9 +247,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     componentWillLoad() {
         this.waitForOptionsAndThenUpdateRawValues();
         this.isInsideOfFooter();
-        if (!isNil(this.rawValue) && this.options.size > 0 && length(this.rawValue) === 1) {
+        if (!lodash_isnil(this.rawValue) && this.options.size > 0 && length(this.rawValue) === 1) {
             const firstOption = this.options.get(this.rawValue[0]);
-            if (!isNil(firstOption)) {
+            if (!lodash_isnil(firstOption)) {
                 this.inputValue = firstOption.label;
             }
         }
@@ -423,7 +366,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      * Opens the popover
      */
     async open() {
-        if (!this.disabled && !this.readonly && !isNil(this.popoverElement)) {
+        if (!this.disabled && !this.readonly && !lodash_isnil(this.popoverElement)) {
             await this.popoverElement.present();
         }
     }
@@ -431,7 +374,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      * Closes the popover
      */
     async close() {
-        if (!this.disabled && !this.readonly && !isNil(this.popoverElement)) {
+        if (!this.disabled && !this.readonly && !lodash_isnil(this.popoverElement)) {
             this.blurSelect();
         }
     }
@@ -449,7 +392,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      */
     async select(value) {
         const option = this.options.get(value);
-        if (!isNil(option)) {
+        if (!lodash_isnil(option)) {
             this.optionSelected(option);
         }
     }
@@ -525,7 +468,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
             return undefined;
         }
         else {
-            if (!isNil(this.rawValue) && length(this.rawValue) > 0) {
+            if (!lodash_isnil(this.rawValue) && length(this.rawValue) > 0) {
                 return undefined;
             }
         }
@@ -623,9 +566,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     async selectLabel(label) {
         if (label !== ' ') {
             const option = this.optionArray.find(o => startsWith(o.label || '', label));
-            if (!isNil(option) && option.id) {
+            if (!lodash_isnil(option) && option.id) {
                 const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!isNil(optionElement)) {
+                if (!lodash_isnil(optionElement)) {
                     const index = this.optionArray.indexOf(option);
                     this.focusIndex = index;
                     this.select(option.value);
@@ -637,9 +580,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     async scrollToLabel(label) {
         if (label !== ' ') {
             const option = this.optionArray.find(o => startsWith(o.label || '', label));
-            if (!isNil(option) && option.id) {
+            if (!lodash_isnil(option) && option.id) {
                 const optionElement = this.el.querySelector(`button#${option.id}`);
-                if (!isNil(optionElement)) {
+                if (!lodash_isnil(optionElement)) {
                     const index = this.optionArray.indexOf(option);
                     this.focusIndex = index;
                     this.scrollTo(optionElement.offsetTop);
@@ -653,9 +596,9 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
      ********************************************************/
     syncRawValue(isHuman = true) {
         let newValue = [];
-        if (!isNil(this.value) && this.value !== '') {
+        if (!lodash_isnil(this.value) && this.value !== '') {
             if (Array.isArray(this.value)) {
-                newValue = [...this.value.filter(v => !isNil(v))];
+                newValue = [...this.value.filter(v => !lodash_isnil(v))];
             }
             else {
                 if (this.value.split('').includes(',')) {
@@ -746,7 +689,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
                 clearTimeout(this.updateInputValueTimer);
             }
             this.updateInputValueTimer = setTimeout(() => {
-                if (!isNil(this.inputElement)) {
+                if (!lodash_isnil(this.inputElement)) {
                     this.inputElement.value = value;
                     this.inputValue = value;
                     resolve();
@@ -811,7 +754,7 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends HTMLElement
     static get watchers() { return {
         "value": ["valueWatcher"]
     }; }
-    static get style() { return balSelectCss; }
+    static get style() { return BalSelectStyle0; }
 }, [0, "bal-select", {
         "name": [1],
         "invalid": [4],

package/components/bal-shape2.js

@@ -3,23 +3,12 @@ import { B as BEM } from './bem.js';
 import { f as balColorGrey4, g as balColorYellow3, h as balColorYellow5, i as balColorPurple3, j as balColorPurple6, k as balColorRed3, l as balColorRed5, m as balColorGreen3, n as balColorGreen6 } from './tokens.esm.js';
 
 const balShapeCss = ".bal-shape{display:block;overflow:hidden;border-radius:var(--bal-radius-normal);width:66px;height:66px}@media screen and (min-width: 769px),print{.bal-shape{width:120px;height:120px}}@media screen and (min-width: 1024px){.bal-shape{width:198px;height:198px;border-radius:unset}}.bal-shape--is-rotation-0{-webkit-transform:rotate(0deg);transform:rotate(0deg)}.bal-shape--is-rotation-90{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.bal-shape--is-rotation-180{-webkit-transform:rotate(180deg);transform:rotate(180deg)}.bal-shape--is-rotation-270{-webkit-transform:rotate(270deg);transform:rotate(270deg)}";
+const BalShapeStyle0 = balShapeCss;
 
 const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * The shape variation
-         */
-        this.variation = '1';
-        /**
-         * The shape color
-         */
-        this.color = 'green';
-        /**
-         * The shape rotation
-         */
-        this.rotation = '0';
         this.getHex = () => {
             let color;
             switch (this.color) {
@@ -52,6 +41,9 @@ const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
             }
             return color;
         };
+        this.variation = '1';
+        this.color = 'green';
+        this.rotation = '0';
     }
     render() {
         const block = BEM.block('shape');
@@ -63,7 +55,7 @@ const Shape = /*@__PURE__*/ proxyCustomElement(class Shape extends HTMLElement {
         return (h(Host, { key: '5aa4927f8682c07a13ab2fa9b56f1248141d7cd7', class: Object.assign(Object.assign({}, block.class()), block.modifier(`is-rotation-${this.rotation}`).class()) }, h("svg", { key: '99ee4d77c26e1cc4b84052907ef6d628f94b3937', version: "1.1", x: "0px", y: "0px", viewBox: "0 0 198 198", focusable: "false", "aria-hidden": "true", fill: this.getHex() }, shapes[parseInt(this.variation) - 1])));
     }
     get el() { return this; }
-    static get style() { return balShapeCss; }
+    static get style() { return BalShapeStyle0; }
 }, [0, "bal-shape", {
         "variation": [1],
         "color": [1],

package/components/bal-sheet.js

@@ -2,14 +2,12 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { B as BEM } from './bem.js';
 
 const balSheetCss = ":root{--bal-sheet-radius:var(--bal-radius-large);--bal-sheet-background:var(--bal-color-white);--bal-sheet-shadow:var(--bal-shadow-normal);--bal-sheet-position-bottom:.5rem}.bal-sheet{display:block;position:fixed;bottom:var(--bal-sheet-position-bottom);left:0;right:0;width:100%;z-index:var(--bal-z-index-sticky);font-weight:var(--bal-font-weight-regular);font-family:var(--bal-font-family-text);font-size:var(--bal-text-size-normal)}.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{border-radius:var(--bal-sheet-radius);background:var(--bal-sheet-background);-webkit-box-shadow:var(--bal-sheet-shadow);box-shadow:var(--bal-sheet-shadow);padding:1rem}@media screen and (min-width: 769px),print{.bal-sheet__container .bal-sheet__container__inner,.bal-sheet__container.container .bal-sheet__container__inner{padding:1rem 1.5rem}}";
+const BalSheetStyle0 = balSheetCss;
 
 const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        /**
-         * Defines content width of the stage
-         */
         this.containerSize = '';
     }
     render() {
@@ -19,7 +17,7 @@ const Sheet = /*@__PURE__*/ proxyCustomElement(class Sheet extends HTMLElement {
         const containerModifier = this.containerSize !== '' ? `is-${this.containerSize}` : '';
         return (h(Host, { key: 'e38d3e613314a1502b6b1a6eb77e212de467af3c', class: Object.assign({}, block.class()) }, h("div", { key: '7d71e2959eb213f6cc243d9b8e91d1c69a5f9e1a', class: Object.assign(Object.assign({}, container.class()), { container: true, [containerModifier]: true }) }, h("div", { key: '7712cfd94666fc628912db7b7f786bab530030e3', class: Object.assign({}, containerInner.class()) }, h("slot", { key: '0eebab4aa2bc379b4c7dd4fa0cd5a9f0ad2b76eb' })))));
     }
-    static get style() { return balSheetCss; }
+    static get style() { return BalSheetStyle0; }
 }, [4, "bal-sheet", {
         "containerSize": [1, "container-size"]
     }]);

package/components/bal-snackbar.js

@@ -6,6 +6,7 @@ import { d as defineCustomElement$3 } from './bal-icon2.js';
 import { d as defineCustomElement$2 } from './bal-spinner2.js';
 
 const balSnackbarCss = ":root{--bal-snackbar-font-size:var(--bal-text-size-small);--bal-snackbar-font-family:var(--bal-font-family-text);--bal-snackbar-title-font-size:var(--bal-text-size-medium);--bal-snackbar-title-font-family:var(--bal-font-family-title);--bal-snackbar-background:var(--bal-color-white);--bal-snackbar-background-primary:var(--bal-color-white);--bal-snackbar-background-info:var(--bal-color-info-2);--bal-snackbar-background-success:var(--bal-color-success-2);--bal-snackbar-background-warning:var(--bal-color-warning-2);--bal-snackbar-background-danger:var(--bal-color-danger-2);--bal-snackbar-radius:var(--bal-radius-large);--bal-snackbar-color:var(--bal-color-text-primary);--bal-snackbar-color-primary:var(--bal-color-text-primary);--bal-snackbar-color-info:var(--bal-color-text-primary);--bal-snackbar-color-success:var(--bal-color-text-primary);--bal-snackbar-color-warning:var(--bal-color-text-primary);--bal-snackbar-color-danger:var(--bal-color-text-primary)}.bal-snackbar{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-positive:0 !important;flex-grow:0 !important;gap:.5rem;padding:var(--bal-space-medium) var(--bal-space-normal);border-radius:var(--bal-snackbar-radius);background:var(--bal-snackbar-background);color:var(--bal-snackbar-color);-webkit-box-shadow:var(--bal-shadow-normal);box-shadow:var(--bal-shadow-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;min-height:3.5rem;width:18rem}@media screen and (min-width: 769px),print{.bal-snackbar{width:18rem}}@media screen and (min-width: 1024px){.bal-snackbar{width:27.5rem}}.bal-snackbar--color-primary{background:var(--bal-snackbar-background-primary);color:var(--bal-snackbar-color-primary)}.bal-snackbar--color-info{background:var(--bal-snackbar-background-info);color:var(--bal-snackbar-color-info)}.bal-snackbar--color-danger{background:var(--bal-snackbar-background-danger);color:var(--bal-snackbar-color-danger)}.bal-snackbar--color-warning{background:var(--bal-snackbar-background-warning);color:var(--bal-snackbar-color-warning)}.bal-snackbar--color-success{background:var(--bal-snackbar-background-success);color:var(--bal-snackbar-color-success)}.bal-snackbar__details{display:-ms-flexbox;display:flex;gap:1rem}.bal-snackbar__details__icon{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;width:1.5rem}.bal-snackbar__details__icon--masked{background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain}.bal-snackbar__details__icon--masked,.bal-snackbar__details__icon--color-primary{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M5.52 3.448C6.452 2.521 7.716 2 9.033 2s2.562 0.521 3.493 1.448C13.478 4.374 14.001 5.632 14.001 6.942v4.413c0 0.31 0.124 0.605 0.344 0.824 0.249 0.248 0.445 0.342 0.719 0.342 0.278 0 0.503 0.224 0.503 0.501 0 0.277-0.225 0.501-0.503 0.501H3.003c-0.278 0-0.503-0.224-0.503-0.501 0-0.277 0.225-0.501 0.503-0.501 0.275 0 0.47-0.094 0.719-0.342 0.219-0.219 0.344-0.514 0.344-0.824V6.942c0-1.311 0.523-2.569 1.456-3.494zM7.274 15.25c0-0.414 0.338-0.75 0.754-0.75h2.01c0.416 0 0.754 0.336 0.754 0.75s-0.338 0.75-0.754 0.75h-2.01c-0.416 0-0.754-0.336-0.754-0.75z\" fill=\"black\"/></svg>')}.bal-snackbar__details__icon--color-info{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M6.176 13.705c-0.65 0-1.176 0.514-1.176 1.147 0 0.635 0.526 1.149 1.176 1.149h2.824h2.824c0.65 0 1.176-0.514 1.176-1.149 0-0.633-0.526-1.147-1.176-1.147h-1.647V8.426c0-0.634-0.526-1.147-1.176-1.147H7.118C6.468 7.279 5.941 7.792 5.941 8.426c0 0.633 0.526 1.147 1.176 1.147h0.706v4.132H6.176zM10.882 3.836c0 1.014-0.843 1.836-1.882 1.836S7.118 4.85 7.118 3.836C7.118 2.822 7.96 2 9 2s1.882 0.822 1.882 1.836z\" fill=\"black\"/></svg>')}.bal-snackbar__details__icon--color-success{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M15.637 3.247c0.426 0.379 0.486 1.059 0.134 1.518L7.73 15.251l-0.002 0.003c-0.183 0.237-0.413 0.426-0.672 0.555-0.26 0.13-0.543 0.195-0.829 0.191-0.291-0.004-0.577-0.08-0.837-0.219-0.259-0.14-0.485-0.341-0.662-0.588l-2.517-3.488c-0.339-0.47-0.261-1.147 0.175-1.512 0.436-0.365 1.064-0.28 1.403 0.19l2.463 3.414 7.976-10.403c0.352-0.459 0.982-0.524 1.408-0.144z\" fill=\"black\"/></svg>')}.bal-snackbar__details__icon--color-warning{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>')}.bal-snackbar__details__icon--color-danger{mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>');-webkit-mask-image:url('data:image/svg+xml;charset=UTF-8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 18 18\"><path d=\"M9.333 2c0.805 0 1.458 0.514 1.458 1.148v5.508c0 0.634-0.653 1.148-1.458 1.148s-1.458-0.514-1.458-1.148V3.148C7.875 2.514 8.528 2 9.333 2zM9.333 16c1.289 0 2.334-0.822 2.334-1.836s-1.045-1.836-2.334-1.836S7 13.15 7 14.164 8.044 16 9.333 16z\" fill=\"black\"/></svg>')}.bal-snackbar__details__close{display:-ms-flexbox;display:flex;-ms-flex-pack:end;justify-content:flex-end;width:2rem}.bal-snackbar__details__content{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;gap:.125rem}.bal-snackbar__details__content h2{font-family:var(--bal-snackbar-title-font-family);font-size:var(--bal-snackbar-title-font-size);font-weight:var(--bal-font-weight-bold);line-height:var(--bal-text-line-height-title)}@media screen and (min-width: 769px),print{.bal-snackbar__details__content h2{font-size:var(--bal-text-size-medium-tablet)}}@media screen and (min-width: 1024px){.bal-snackbar__details__content h2{font-size:var(--bal-text-size-medium-desktop)}}.bal-snackbar__details__content span{font-family:var(--bal-snackbar-font-family);font-size:var(--bal-snackbar-font-size);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text)}.bal-snackbar__button-wrapper{display:-ms-flexbox;display:flex}.bal-snackbar__button-wrapper .bal-button{-webkit-margin-start:2.5rem;margin-inline-start:2.5rem;-webkit-margin-before:.5rem;margin-block-start:.5rem}";
+const BalSnackbarStyle0 = balSnackbarCss;
 
 const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLElement {
     constructor() {
@@ -14,47 +15,20 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
         this.balClose = createEvent(this, "balClose", 7);
         this.balAction = createEvent(this, "balAction", 7);
         this.snackbarId = `bal-snackbar-${snackbarIds++}`;
-        /**
-         * The theme type of the snackbar.
-         */
+        this.onActionHandler = () => {
+            this.balAction.emit(this.snackbarId);
+            this.actionHandler();
+        };
         this.color = '';
-        /**
-         * The duration of the snackbar
-         */
         this.duration = 0;
-        /**
-         * The subject of the snackbar header
-         */
         this.subject = '';
-        /**
-         * The message of the snackbar as html content
-         */
         this.message = '';
-        /**
-         * The icon of the snackbar header
-         */
         this.icon = '';
-        /**
-         * Label text for the action button
-         */
         this.action = '';
-        /**
-         * @internal Handler for on close event
-         */
         this.closeHandler = () => void 0;
-        /**
-         * @internal Handler for on action button click event
-         */
         this.actionHandler = () => void 0;
-        /**
-         * Specifies where to display the linked URL.
-         * Only applies when an `href` is provided.
-         */
+        this.href = undefined;
         this.target = '_self';
-        this.onActionHandler = () => {
-            this.balAction.emit(this.snackbarId);
-            this.actionHandler();
-        };
     }
     async componentWillLoad() {
         if (this.duration > 0) {
@@ -109,7 +83,7 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
         return (h(Host, { key: '4a1920c0a2bd21295fd3c8b6f14204f2cffd24fc', id: this.snackbarId, role: "alertdialog", class: Object.assign(Object.assign({}, block.class()), block.modifier(`color-${this.color}`).class(!!this.color)), "aria-labelledby": subjectId }, h("div", { key: '07e829354ae42deae93d2514e8a1705ed2324333', class: Object.assign({}, detailsEl.class()) }, h("div", { key: '33ea4a6d4c6571f5584a13b32dd0814ee532a4e0', "aria-hidden": "true", class: Object.assign(Object.assign(Object.assign({}, detailsEl.element('icon').class()), detailsEl.element('icon').modifier('masked').class(!isIconDefined)), detailsEl.element('icon').modifier(`color-${this.color}`).class(!isIconDefined)) }, isIconDefined ? h("bal-icon", { name: icon, color: 'primary', size: "medium" }) : ''), h("div", { key: 'b5f9973bc16038dd0b1911758072c001cfa5dcea', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: '015bed1adb93c84e224b85d95247a1706554e73f', id: subjectId }, this.subject), h("span", Object.assign({ key: 'c7bf53d336633441bd4ed3abbdf978a4c1587b9d' }, messageAttributes), h("slot", { key: 'd197c12700d991181e17efb90fafa3569fab1dcc' }), h("span", { key: 'a913b6adc15cad8ecfd76905e6047e3e51cecbc4', class: "hidden" }))), h("div", { key: '6eaea877dafb35eb0bb5a4d9c29540be35ca23e6', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '0e2aaef462aba47274903b304ddf340ec9a40032', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }))), this.action ? (h("div", { class: Object.assign({}, buttonWrapperEl.class()) }, h("bal-button", { color: "info", size: "small", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : ('')));
     }
     get element() { return this; }
-    static get style() { return balSnackbarCss; }
+    static get style() { return BalSnackbarStyle0; }
 }, [4, "bal-snackbar", {
         "color": [1],
         "duration": [2],
@@ -117,8 +91,8 @@ const Snackbar = /*@__PURE__*/ proxyCustomElement(class Snackbar extends HTMLEle
         "message": [1],
         "icon": [1],
         "action": [1],
-        "closeHandler": [16, "close-handler"],
-        "actionHandler": [16, "action-handler"],
+        "closeHandler": [16],
+        "actionHandler": [16],
         "href": [1],
         "target": [1],
         "closeIn": [64],