@baloise/ds-core 17.2.5 → 17.3.0

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

@@ -1 +1 @@
-:root{--bal-dropdown-control-background: var(--bal-color-white);--bal-dropdown-control-background-hover: var(--bal-form-field-control-background-hover);--bal-dropdown-control-background-invalid: var(--bal-form-field-control-danger-background);--bal-dropdown-control-background-disabled: var(--bal-form-field-control-disabled-background);--bal-dropdown-control-input-background: var(--bal-color-grey-1);--bal-dropdown-control-native-input-background: transparent;--bal-dropdown-control-native-input-background-hover: transparent;--bal-dropdown-control-input-inverted-footer-background: transparent;--bal-dropdown-control-input-inverted-footer-background-hover: transparent;--bal-dropdown-control-input-multiple-background: transparent;--bal-dropdown-control-input-multiple-background-read-only-selection: transparent;--bal-dropdown-control-input-option-background: transparent;--bal-dropdown-control-input-option-background-selected: var(--bal-color-primary-1);--bal-dropdown-control-input-option-background-focused: var(--bal-color-grey-2);--bal-dropdown-control-input-option-background-hover: var(--bal-color-grey-2);--bal-dropdown-control-border-radius: var(--bal-form-field-control-radius);--bal-dropdown-popover-border-color: var(--bal-color-grey-2);--bal-dropdown-control-border-color: var(--bal-form-field-control-border-color);--bal-dropdown-control-border-color-focused: var(--bal-color-primary);--bal-dropdown-control-border-color-hover: var(--bal-form-field-control-border-color-hover);--bal-dropdown-control-border-color-invalid: var(--bal-form-field-control-danger-border-color);--bal-dropdown-control-border-color-disabled: var(--bal-form-field-control-disabled-border-color);--bal-dropdown-control-border-color-focus-within: var(--bal-color-primary);--bal-dropdown-option-border-top-color: var(--bal-color-grey-2);--bal-dropdown-popover-empty-text-color: var(--bal-form-field-control-color);--bal-dropdown-control-text-color: var(--bal-form-field-control-color);--bal-dropdown-control-text-color-focused: var(--bal-color-primary);--bal-dropdown-input-text-color-disabled: var(--bal-form-field-label-disabled-color);--bal-dropdown-control-inverted-footer-native-input-text-color: var(--bal-color-text-white);--bal-dropdown-option-content-label-text-color: var(--bal-form-field-control-color)}.bal-dropdown{display:block;position:relative;flex:1;width:100%}.bal-dropdown__root{border-width:.125rem;border-style:solid;border-color:var(--bal-dropdown-control-border-color);border-radius:var(--bal-dropdown-control-border-radius);background:var(--bal-dropdown-control-background);font-weight:var(--bal-font-weight-regular);font-size:var(--bal-text-size-normal);font-family:var(--bal-font-family-text);color:var(--bal-dropdown-control-text-color);outline:none;box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;width:100%;text-align:left;gap:.5rem;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));justify-content:center;align-items:center}.bal-dropdown__root--autofill{background:#faffbd !important;background:light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important}.bal-dropdown__root>span{flex:1;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bal-dropdown__root--focused{border-color:var(--bal-dropdown-control-border-color-focused)}.bal-dropdown__root--invalid{border-color:var(--bal-dropdown-control-border-color-invalid);background:var(--bal-dropdown-control-background-invalid)}.bal-dropdown__root--disabled{border-color:var(--bal-dropdown-control-border-color-disabled);background:var(--bal-dropdown-control-background-disabled)}.bal-dropdown__root__content--placeholder{color:var(--bal-form-field-control-placeholder-color)}.bal-dropdown__root__content--disabled{color:var(--bal-dropdown-input-text-color-disabled)}@media(hover: hover)and (pointer: fine){.bal-dropdown__root:not(.bal-dropdown__root--disabled):not(.bal-dropdown__root--invalid):not(.bal-dropdown__root--theme-purple):not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-dropdown-control-background-hover)}}.bal-dropdown__root__content__chips{--bal-tag-size-small-font-size: var(--bal-text-size-normal);display:flex;flex-wrap:wrap;gap:var(--bal-space-xx-small);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}.bal-dropdown__root__content__chips>bal-tag{z-index:1}.bal-dropdown__root__input{appearance:none;border:none;background:rgba(0,0,0,0);position:absolute;right:var(--bal-border-width-normal);left:var(--bal-border-width-normal);top:var(--bal-border-width-normal);bottom:var(--bal-border-width-normal);opacity:0;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));cursor:pointer}.bal-dropdown__root__input:disabled{cursor:default}.bal-dropdown__root__input:autofill{opacity:1}.bal-dropdown__root__input:-internal-autofill-selected{opacity:0}.bal-dropdown__root__select{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-dropdown__root--autofill .bal-dropdown__root__input{opacity:0}.bal-dropdown__list{display:block;visibility:hidden;opacity:0;min-width:100%;width:100%;position:absolute;top:0;left:0;will-change:left,top,opacity;background:var(--bal-color-white);border-radius:var(--bal-radius-normal);box-shadow:var(--bal-shadow-normal);z-index:var(--bal-z-index-popup)}.bal-dropdown__list--expanded{visibility:visible;opacity:1}.bal-dropdown__native{bottom:0;left:0;position:absolute;opacity:0;pointer-events:none;width:100%}.bal-dropdown__clear{background:rgba(0,0,0,0);border:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center;cursor:pointer}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:"";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}.bal-dropdown__rear{z-index:1}.bal-dropdown__root--size-small{min-height:2rem}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-background-grey-light)}@media(hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-purple-2)}@media(hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded,.bal-dropdown__root--theme-purple-expanded:hover,.bal-dropdown__root--theme-purple-expanded:active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--focused.bal-dropdown__root--theme-purple:before{content:"";border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-focus-shadow);position:absolute;background:rgba(0,0,0,0);border-radius:var(--bal-radius-normal);top:-0.25rem;bottom:-0.25rem;left:-0.25rem;right:-0.25rem}.bal-dropdown__root__content--size-small{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:"";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}
+:root{--bal-dropdown-control-background: var(--bal-color-white);--bal-dropdown-control-background-hover: var(--bal-form-field-control-background-hover);--bal-dropdown-control-background-invalid: var(--bal-form-field-control-danger-background);--bal-dropdown-control-background-disabled: var(--bal-form-field-control-disabled-background);--bal-dropdown-control-input-background: var(--bal-color-grey-1);--bal-dropdown-control-native-input-background: transparent;--bal-dropdown-control-native-input-background-hover: transparent;--bal-dropdown-control-input-inverted-footer-background: transparent;--bal-dropdown-control-input-inverted-footer-background-hover: transparent;--bal-dropdown-control-input-multiple-background: transparent;--bal-dropdown-control-input-multiple-background-read-only-selection: transparent;--bal-dropdown-control-input-option-background: transparent;--bal-dropdown-control-input-option-background-selected: var(--bal-color-primary-1);--bal-dropdown-control-input-option-background-focused: var(--bal-color-grey-2);--bal-dropdown-control-input-option-background-hover: var(--bal-color-grey-2);--bal-dropdown-control-border-radius: var(--bal-form-field-control-radius);--bal-dropdown-popover-border-color: var(--bal-color-grey-2);--bal-dropdown-control-border-color: var(--bal-form-field-control-border-color);--bal-dropdown-control-border-color-focused: var(--bal-color-primary);--bal-dropdown-control-border-color-hover: var(--bal-form-field-control-border-color-hover);--bal-dropdown-control-border-color-invalid: var(--bal-form-field-control-danger-border-color);--bal-dropdown-control-border-color-disabled: var(--bal-form-field-control-disabled-border-color);--bal-dropdown-control-border-color-focus-within: var(--bal-color-primary);--bal-dropdown-option-border-top-color: var(--bal-color-grey-2);--bal-dropdown-popover-empty-text-color: var(--bal-form-field-control-color);--bal-dropdown-control-text-color: var(--bal-form-field-control-color);--bal-dropdown-control-text-color-focused: var(--bal-color-primary);--bal-dropdown-input-text-color-disabled: var(--bal-form-field-label-disabled-color);--bal-dropdown-control-inverted-footer-native-input-text-color: var(--bal-color-text-white);--bal-dropdown-option-content-label-text-color: var(--bal-form-field-control-color)}.bal-dropdown{display:block;position:relative;flex:1;width:100%}.bal-dropdown__root{border-width:.125rem;border-style:solid;border-color:var(--bal-dropdown-control-border-color);border-radius:var(--bal-dropdown-control-border-radius);background:var(--bal-dropdown-control-background);font-weight:var(--bal-font-weight-regular);font-size:var(--bal-text-size-normal);font-family:var(--bal-font-family-text);color:var(--bal-dropdown-control-text-color);outline:none;box-shadow:var(--bal-shadow-none);padding-right:1rem;height:auto;min-height:3rem;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;display:flex;width:100%;text-align:left;gap:.5rem;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));justify-content:center;align-items:center}.bal-dropdown__root--autofill{background:#faffbd !important;background:light-dark(rgb(232, 240, 254), rgba(70, 90, 126, 0.4)) !important}.bal-dropdown__root>span{flex:1;hyphens:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bal-dropdown__root--focused{border-color:var(--bal-dropdown-control-border-color-focused)}.bal-dropdown__root--invalid{border-color:var(--bal-dropdown-control-border-color-invalid);background:var(--bal-dropdown-control-background-invalid)}.bal-dropdown__root--disabled{border-color:var(--bal-dropdown-control-border-color-disabled);background:var(--bal-dropdown-control-background-disabled)}.bal-dropdown__root__content--placeholder{color:var(--bal-form-field-control-placeholder-color)}.bal-dropdown__root__content--disabled{color:var(--bal-dropdown-input-text-color-disabled)}@media(hover: hover)and (pointer: fine){.bal-dropdown__root:not(.bal-dropdown__root--disabled):not(.bal-dropdown__root--invalid):not(.bal-dropdown__root--theme-purple):not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-dropdown-control-background-hover)}}.bal-dropdown__root__content__chips{--bal-tag-size-small-font-size: var(--bal-text-size-normal);display:flex;flex-wrap:wrap;gap:var(--bal-space-xx-small);padding-top:var(--bal-space-x-small);padding-bottom:var(--bal-space-x-small)}.bal-dropdown__root__content__chips>bal-tag{z-index:1}.bal-dropdown__root__input{appearance:none;border:none;background:rgba(0,0,0,0);position:absolute;right:var(--bal-border-width-normal);left:var(--bal-border-width-normal);top:var(--bal-border-width-normal);bottom:var(--bal-border-width-normal);opacity:0;padding-left:calc(.75em - var(--bal-border-width-normal));padding-right:calc(.75em - var(--bal-border-width-normal));cursor:pointer}.bal-dropdown__root__input:disabled{cursor:default}.bal-dropdown__root__input:autofill{opacity:1}.bal-dropdown__root__input:-internal-autofill-selected{opacity:0}.bal-dropdown__root__select{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-dropdown__root--autofill .bal-dropdown__root__input{opacity:0}.bal-dropdown__list{display:none;visibility:hidden;opacity:0;min-width:100%;width:100%;position:absolute;top:0;left:0;will-change:left,top,opacity;background:var(--bal-color-white);border-radius:var(--bal-radius-normal);box-shadow:var(--bal-shadow-normal);z-index:var(--bal-z-index-popup)}.bal-dropdown__list--expanded{display:block;visibility:visible;opacity:1}.bal-dropdown__native{bottom:0;left:0;position:absolute;opacity:0;pointer-events:none;width:100%}.bal-dropdown__clear{background:rgba(0,0,0,0);border:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center;cursor:pointer}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:"";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}.bal-dropdown__rear{z-index:1}.bal-dropdown__root--size-small{min-height:2rem}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-background-grey-light)}@media(hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-color-purple-1)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active{background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded){border:none;background:var(--bal-color-purple-2)}@media(hover: hover)and (pointer: fine){.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-dropdown__root__content{color:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):hover .bal-icon__inner circle{fill:var(--bal-color-text-primary-pressed)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active{background:var(--bal-color-purple-3)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner g,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner path,.bal-dropdown__root--theme-purple-filled:not(.bal-dropdown__root--theme-purple-expanded):active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}}.bal-dropdown__root--theme-purple-expanded,.bal-dropdown__root--theme-purple-expanded:hover,.bal-dropdown__root--theme-purple-expanded:active{border:none;background:var(--bal-color-purple-2)}.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:hover .bal-dropdown__root__content,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__input,.bal-dropdown__root--theme-purple-expanded:active .bal-dropdown__root__content{color:var(--bal-color-text-primary)}.bal-dropdown__root--theme-purple-expanded .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:hover .bal-icon__inner circle,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner svg,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner g,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner path,.bal-dropdown__root--theme-purple-expanded:active .bal-icon__inner circle{fill:var(--bal-color-text-primary)}.bal-dropdown__root--focused.bal-dropdown__root--theme-purple:before{content:"";border-width:var(--bal-border-width-normal);border-style:solid;border-color:var(--bal-focus-shadow);position:absolute;background:rgba(0,0,0,0);border-radius:var(--bal-radius-normal);top:-0.25rem;bottom:-0.25rem;left:-0.25rem;right:-0.25rem}.bal-dropdown__root__content--size-small{font-size:var(--bal-text-size-small);font-weight:var(--bal-font-weight-bold)}.bal-dropdown__clear--theme-purple{height:2rem;width:2rem;border-top-right-radius:2px;border-bottom-right-radius:2px;margin-right:-10px}.bal-dropdown__clear--theme-purple::before{content:"";position:absolute;right:32px;background:var(--bal-color-white);width:2px;height:100%}

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

@@ -1 +1 @@
-.bal-notices{position:fixed !important;display:flex !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;padding:1rem !important;margin:0 !important;overflow:hidden !important;z-index:var(--bal-z-index-toast) !important;pointer-events:none !important;flex-direction:column !important}.bal-notices .container{width:100% !important}.bal-notices.has-snackbar{justify-content:flex-end;align-items:flex-end;flex-direction:column-reverse;margin:.5em}.bal-notices.has-snackbar .bal-snackbar{justify-content:flex-end;align-self:flex-end;pointer-events:auto !important}.bal-notices.has-toast{justify-content:flex-start;align-items:center;margin:.5em}.bal-notices.has-toast .bal-toast{justify-content:center;align-self:center}
+.bal-notices{position:fixed !important;display:flex !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;padding-top:1rem !important;padding-bottom:1rem !important;margin:0 !important;overflow:hidden !important;z-index:var(--bal-z-index-toast) !important;pointer-events:none !important;flex-direction:column !important}.bal-notices:not(.bal-notices--container){padding-left:1rem !important;padding-right:1rem !important}.bal-notices__inner{display:flex;gap:.5rem}.bal-notices__inner--snackbar{height:100vh;justify-content:flex-end;align-items:flex-end;flex-direction:column;margin:.5em}.bal-notices__inner--snackbar .bal-snackbar{justify-content:flex-end;align-self:flex-end;pointer-events:auto !important}.bal-notices__inner--toast{flex-direction:column;justify-content:flex-start;align-items:center;margin:.5em}.bal-notices__inner--toast .bal-toast{justify-content:center;align-self:center}.bal-notices__inner.container{--bal-toast-width: 100%;--bal-toast-width-tablet: 100%;--bal-toast-width-desktop: 100%}.bal-notices--animated .bal-toast{animation-duration:.3s;animation-fill-mode:both;animation-name:slideInDown}.bal-notices--animated .bal-snackbar{animation-duration:.3s;animation-fill-mode:both;animation-name:slideInUp}@keyframes slideInDown{from{transform:translate3d(0, -100%, 0);visibility:visible}to{transform:translate3d(0, 0, 0)}}@keyframes slideInUp{from{transform:translate3d(0, 100%, 0);visibility:visible}to{transform:translate3d(0, 0, 0)}}

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

@@ -1,14 +1,16 @@
 import { Host, h } from "@stencil/core";
+import { BEM } from "../../utils/bem";
 export class Notices {
     constructor() {
+        this.animated = true;
         this.interface = 'toast';
+        this.container = undefined;
     }
     render() {
-        return (h(Host, { key: '2f40e609d0b26b17d7b46c55fb5d509ad02920b6', class: {
-                'bal-app': true,
-                'bal-notices': true,
-                [`has-${this.interface}`]: true,
-            } }, h("slot", { key: 'f761cd73d1cfc480e0992c9b32cc6fd30eeca51e' })));
+        const block = BEM.block('notices');
+        const innerEl = block.element('inner');
+        const hasContainer = this.interface === 'toast' && this.container !== undefined;
+        return (h(Host, { key: '053b822408de6ad62883b8a901648d7c4bece50a', class: Object.assign(Object.assign(Object.assign({ 'bal-app': true }, block.class()), block.modifier('container').class(hasContainer)), block.modifier('animated').class(this.animated)) }, h("div", { key: '0a46d87a51d6b6501d55484b03dc20b19892d03c', class: Object.assign(Object.assign(Object.assign({}, innerEl.class()), innerEl.modifier(this.interface).class()), { container: hasContainer, [`is-${this.container}`]: hasContainer && this.container !== '' }) }, h("slot", { key: '157c6c9f6e0ea1a31022716502c2f6faa443f688' }))));
     }
     static get is() { return "bal-notices"; }
     static get originalStyleUrls() {
@@ -23,6 +25,29 @@ export class Notices {
     }
     static get properties() {
         return {
+            "animated": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Tells if the notice is animated"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "animated",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "interface": {
                 "type": "string",
                 "mutable": false,
@@ -45,6 +70,29 @@ export class Notices {
                 "attribute": "interface",
                 "reflect": false,
                 "defaultValue": "'toast'"
+            },
+            "container": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'fluid' | 'detail-page' | 'compact' | 'blog-page' | 'wide' | '' | undefined",
+                    "resolved": "\"\" | \"blog-page\" | \"compact\" | \"detail-page\" | \"fluid\" | \"wide\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "internal",
+                            "text": "Sets the content content width with the regular container classes"
+                        }],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "container",
+                "reflect": false,
+                "defaultValue": "undefined"
             }
         };
     }

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

@@ -1 +1 @@
-:root{--bal-notification-font-size: var(--bal-text-size-normal);--bal-notification-font-family: var(--bal-font-family-text);--bal-notification-background: var(--bal-color-grey-2);--bal-notification-background-primary: var(--bal-color-grey-2);--bal-notification-background-info: var(--bal-color-info-2);--bal-notification-background-success: var(--bal-color-success-2);--bal-notification-background-warning: var(--bal-color-warning-2);--bal-notification-background-danger: var(--bal-color-danger-2);--bal-notification-radius: var(--bal-radius-large);--bal-notification-color: var(--bal-color-text-primary);--bal-notification-color-primary: var(--bal-color-text-primary);--bal-notification-color-info: var(--bal-color-text-primary);--bal-notification-color-success: var(--bal-color-text-primary);--bal-notification-color-warning: var(--bal-color-text-primary);--bal-notification-color-danger: var(--bal-color-text-primary)}.bal-notification{display:block;position:static}.bal-notification__inner{min-height:3.5rem;border-radius:var(--bal-notification-radius);font-size:var(--bal-notification-font-size);font-family:var(--bal-notification-font-family);background:var(--bal-notification-background);color:var(--bal-notification-color);hyphens:auto;padding:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-notification__inner{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-notification__inner{padding:var(--bal-space-medium-desktop)}}.bal-notification__inner--color-primary{background:var(--bal-notification-background-primary);color:var(--bal-notification-color-primary)}.bal-notification__inner--color-info{background:var(--bal-notification-background-info);color:var(--bal-notification-color-info)}.bal-notification__inner--color-danger{background:var(--bal-notification-background-danger);color:var(--bal-notification-color-danger)}.bal-notification__inner--color-warning{background:var(--bal-notification-background-warning);color:var(--bal-notification-color-warning)}.bal-notification__inner--color-success{background:var(--bal-notification-background-success);color:var(--bal-notification-color-success)}
+:root{--bal-notification-font-size: var(--bal-text-size-normal);--bal-notification-font-family: var(--bal-font-family-text);--bal-notification-title-font-family: var(--bal-font-family-title);--bal-notification-title-font-size: var(--bal-text-size-medium);--bal-notification-title-font-size-tablet: var(--bal-text-size-medium-tablet);--bal-notification-title-font-size-desktop: var(--bal-text-size-medium-desktop);--bal-notification-background: var(--bal-color-grey-2);--bal-notification-background-primary: var(--bal-color-grey-2);--bal-notification-background-info: var(--bal-color-info-2);--bal-notification-background-success: var(--bal-color-success-2);--bal-notification-background-warning: var(--bal-color-warning-2);--bal-notification-background-danger: var(--bal-color-danger-2);--bal-notification-background-light: var(--bal-color-grey-1);--bal-notification-background-light-primary: var(--bal-color-purple-1);--bal-notification-background-light-info: var(--bal-color-info-1);--bal-notification-background-light-success: var(--bal-color-green-1);--bal-notification-background-light-warning: var(--bal-color-yellow-1);--bal-notification-background-light-danger: var(--bal-color-red-1);--bal-notification-border: var(--bal-color-grey-4);--bal-notification-border-primary: var(--bal-color-purple-3);--bal-notification-border-info: var(--bal-color-info-3);--bal-notification-border-success: var(--bal-color-green-5);--bal-notification-border-warning: var(--bal-color-yellow-4);--bal-notification-border-danger: var(--bal-color-red-4);--bal-notification-radius: var(--bal-radius-large);--bal-notification-light-radius: var(--bal-radius-normal);--bal-notification-color: var(--bal-color-text-primary);--bal-notification-color-primary: var(--bal-color-text-primary);--bal-notification-color-info: var(--bal-color-text-primary);--bal-notification-color-success: var(--bal-color-text-primary);--bal-notification-color-warning: var(--bal-color-text-primary);--bal-notification-color-danger: var(--bal-color-text-primary)}.bal-notification{display:flex;flex:1;flex-direction:column;gap:.125rem;position:relative;min-height:3.5rem;border-radius:var(--bal-notification-radius);font-family:var(--bal-notification-font-family);font-size:var(--bal-notification-font-size);font-weight:var(--bal-font-weight-regular);background:var(--bal-notification-background);color:var(--bal-notification-color);hyphens:auto;padding:var(--bal-space-medium)}@media screen and (min-width: 769px),print{.bal-notification{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-notification{padding:var(--bal-space-medium-desktop)}}.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-family:var(--bal-notification-title-font-family);font-weight:var(--bal-font-weight-bold);font-size:var(--bal-notification-title-font-size);line-height:var(--bal-text-line-height-title)}@media screen and (min-width: 769px),print{.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-size:var(--bal-notification-title-font-size-tablet)}}@media screen and (min-width: 1024px){.bal-notification>strong,.bal-notification>b,.bal-notification>h2{font-size:var(--bal-notification-title-font-size-desktop)}}.bal-notification>span,.bal-notification>p{font-family:var(--bal-notification-font-family);font-size:var(--bal-notification-font-size);font-weight:var(--bal-font-weight-regular);line-height:var(--bal-text-line-height-text)}.bal-notification--color-light{border:2px solid var(--bal-notification-border-primary);background:var(--bal-notification-background-light-primary);color:var(--bal-notification-color-primary);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-primary{background:var(--bal-notification-background-primary);color:var(--bal-notification-color-primary)}.bal-notification--color-primary-light{border:2px solid var(--bal-notification-border-primary);background:var(--bal-notification-background-light-primary);color:var(--bal-notification-color-primary);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-info{background:var(--bal-notification-background-info);color:var(--bal-notification-color-info)}.bal-notification--color-info-light{border:2px solid var(--bal-notification-border-info);background:var(--bal-notification-background-light-info);color:var(--bal-notification-color-info);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-danger{background:var(--bal-notification-background-danger);color:var(--bal-notification-color-danger)}.bal-notification--color-danger-light{border:2px solid var(--bal-notification-border-danger);background:var(--bal-notification-background-light-danger);color:var(--bal-notification-color-danger);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-warning{background:var(--bal-notification-background-warning);color:var(--bal-notification-color-warning)}.bal-notification--color-warning-light{border:2px solid var(--bal-notification-border-warning);background:var(--bal-notification-background-light-warning);color:var(--bal-notification-color-warning);border-radius:var(--bal-notification-light-radius)}.bal-notification--color-success{background:var(--bal-notification-background-success);color:var(--bal-notification-color-success)}.bal-notification--color-success-light{border:2px solid var(--bal-notification-border-success);background:var(--bal-notification-background-light-success);color:var(--bal-notification-color-success);border-radius:var(--bal-notification-light-radius)}.bal-notification:not(.bal-notification--no-icon){padding-left:3rem}.bal-notification:not(.bal-notification--no-icon):before{background-color:currentColor;color:currentColor;forced-color-adjust:preserve-parent-color;position:absolute;height:1.5rem;width:1.5rem;left:.825rem;top:1.5rem;content:"";display:block;background-color:var(--bal-color-primary);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:contain;mask-size:contain;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-notification--color-primary:not(.bal-notification--no-icon):before,.bal-notification--color-primary-light:not(.bal-notification--no-icon):before{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-notification--color-info:not(.bal-notification--no-icon):before,.bal-notification--color-info-light:not(.bal-notification--no-icon):before{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-notification--color-success:not(.bal-notification--no-icon):before,.bal-notification--color-success-light:not(.bal-notification--no-icon):before{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-notification--color-warning:not(.bal-notification--no-icon):before,.bal-notification--color-warning-light:not(.bal-notification--no-icon):before{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-notification--color-danger:not(.bal-notification--no-icon):before,.bal-notification--color-danger-light:not(.bal-notification--no-icon):before{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>')}

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

@@ -1,10 +1,15 @@
 import { Host, h } from "@stencil/core";
+import { BEM } from "../../utils/bem";
 export class Notification {
     constructor() {
         this.color = '';
+        this.light = false;
+        this.noIcon = false;
     }
     render() {
-        return (h(Host, { key: '7afb73a04a3bc6174ad6945bb2e9cfd362acf360', class: "bal-notification" }, h("div", { key: '7707822b7569a46d1b35a76fd4be41f0ed366495', class: `bal-notification__inner bal-notification__inner--color-${this.color}`, "data-testid": "bal-notification-content" }, h("slot", { key: 'e04c72f6f0b97f5df99ad9c8ce7aeacb9bf088b9' }))));
+        const block = BEM.block('notification');
+        const innerEl = block.element('inner');
+        return (h(Host, { key: 'beffd9044572b99e98721aed8bffe8b4321d771e', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`no-icon`).class(this.noIcon)), block.modifier(`color-${this.color}${this.light ? '-light' : ''}`).class(!!this.color)), block.modifier(`color-light`).class(!this.color && this.light)), "data-testid": "bal-notification-content" }, h("slot", { key: '784ad1c80494175528ebb82fd64904a3fb4fd874' })));
     }
     static get is() { return "bal-notification"; }
     static get originalStyleUrls() {
@@ -43,6 +48,46 @@ export class Notification {
                 "attribute": "color",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "light": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` the notifications are presented in a light variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "light",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "noIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true` there will be no icon provided"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "no-icon",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-:root{--bal-snackbar-font-size: var(--bal-text-size-normal);--bal-snackbar-font-family: var(--bal-font-family-text);--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;display:inline-flex;position:relative;flex-grow:0 !important;width:100%;justify-content:flex-end}@media screen and (max-width: 768px){.bal-snackbar{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__inner{min-height:3.5rem;border-radius:var(--bal-snackbar-radius);font-size:var(--bal-snackbar-font-size);font-family:var(--bal-snackbar-font-family);background:var(--bal-snackbar-background);color:var(--bal-snackbar-color);hyphens:auto;position:relative;display:inline-flex;flex-grow:1;margin:.5rem 0 0 0;box-shadow:var(--bal-shadow-normal);align-self:flex-end;flex-direction:column !important;row-gap:1rem;padding:var(--bal-space-medium)}.bal-snackbar__inner--is-primary{background:var(--bal-snackbar-background-primary);color:var(--bal-snackbar-color-primary)}.bal-snackbar__inner--is-info{background:var(--bal-snackbar-background-info);color:var(--bal-snackbar-color-info)}.bal-snackbar__inner--is-danger{background:var(--bal-snackbar-background-danger);color:var(--bal-snackbar-color-danger)}.bal-snackbar__inner--is-warning{background:var(--bal-snackbar-background-warning);color:var(--bal-snackbar-color-warning)}.bal-snackbar__inner--is-success{background:var(--bal-snackbar-background-success);color:var(--bal-snackbar-color-success)}@media screen and (min-width: 769px),print{.bal-snackbar__inner{padding:var(--bal-space-medium-tablet)}}@media screen and (min-width: 1024px){.bal-snackbar__inner{padding:var(--bal-space-medium-desktop)}}.bal-snackbar__header{display:flex;align-items:center;column-gap:.5rem}.bal-snackbar__header>span{font-size:var(--bal-text-size-small);line-height:var(--bal-line-height-small)}@media screen and (min-width: 769px),print{.bal-snackbar__header>span{font-size:var(--bal-text-size-small-tablet);line-height:var(--bal-line-height-tablet-small)}}@media screen and (min-width: 1024px){.bal-snackbar__header>span{font-size:var(--bal-text-size-small-desktop);line-height:var(--bal-line-height-desktop-small)}}.bal-snackbar__footer{display:inline-flex;justify-content:flex-start;margin-top:.5rem}.bal-snackbar__close.bal-close{position:absolute;right:1.5rem;top:1.5rem}
+: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:inline-flex;flex-direction:column;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);box-shadow:var(--bal-shadow-normal);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:flex;gap:1rem}.bal-snackbar__details__icon{display:flex;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:flex;justify-content:flex-end;width:2rem}.bal-snackbar__details__content{display:flex;flex:1;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:flex}.bal-snackbar__button-wrapper .bal-button{margin-inline-start:2.5rem;margin-block-start:.5rem}

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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { BEM } from "../../utils/bem";
 export class Snackbar {
     constructor() {
         this.snackbarId = `bal-snackbar-${snackbarIds++}`;
@@ -6,7 +7,6 @@ export class Snackbar {
             this.balAction.emit(this.snackbarId);
             this.actionHandler();
         };
-        this.animationClass = 'fadeInDown';
         this.color = '';
         this.duration = 0;
         this.subject = '';
@@ -38,24 +38,37 @@ export class Snackbar {
         this.element.remove();
         this.closeHandler();
     }
-    get colorType() {
-        if (this.color === '') {
-            return '';
-        }
-        return `bal-snackbar__inner--is-${this.color}`;
-    }
-    get buttonType() {
-        if (this.color === '') {
-            return 'info';
-        }
-        return this.color;
-    }
+    // get colorType() {
+    //   if (this.color === '') {
+    //     return ''
+    //   }
+    //   return `bal-snackbar__inner--is-${this.color}`
+    // }
+    // get buttonType(): BalProps.BalButtonColor {
+    //   if (this.color === '') {
+    //     return 'info'
+    //   }
+    //   return this.color
+    // }
     render() {
-        const labelAttributes = {};
+        const block = BEM.block('snackbar');
+        const detailsEl = block.element('details');
+        const buttonWrapperEl = block.element('button-wrapper');
+        const subjectId = this.snackbarId + '-subject';
+        const messageAttributes = {};
         if (this.message !== undefined && this.message !== '') {
-            labelAttributes.innerHTML = this.message;
+            messageAttributes.innerHTML = this.message;
         }
-        return (h(Host, { key: '302d36cf1491bdb34cc87139c604c605b873dea8', id: this.snackbarId, class: "bal-snackbar" }, h("div", { key: '2d7d2e2c2fc3509d52d0079ba0e2dd024fafa27f', role: "alert", class: `bal-snackbar__inner ${this.animationClass} ${this.colorType}` }, h("div", { key: '80c1136fe846cc3393b36b20cd8b483ba5cdde2c', class: "bal-snackbar__header" }, h("span", { key: '43c09569ff714e596dc925532a6a23c62ad1480c', class: "icon-text" }, h("span", { key: '8d2631bfb6a6323a9b89279d428d04fa858ae222', class: "icon", style: { display: this.icon ? '' : 'none' } }, h("bal-icon", { key: 'e95d781626faf9691da3e26ea8cb02d036cd7783', name: this.icon, color: 'primary' })), h("bal-heading", { key: 'd07fa9dea7ab0008be54e971416e1df9e06043d1', level: "h5", space: "none", "data-testid": "bal-snackbar-heading" }, this.subject))), h("span", Object.assign({ key: '5596bf1d718f4609835316a9521522c8fcbd3f59', class: "bal-snackbar__label", "data-testid": "bal-snackbar-label" }, labelAttributes), h("slot", { key: 'c46f14807eaf146bde235c3bd121d401df670ed1' }), h("span", { key: '7a33a791aec0799c4650dfd1ba91c297d6e6156d', class: "hidden" })), h("bal-close", { key: 'b3565119bae15c11394786e0b0e9413f03417d88', class: "bal-snackbar__close", "data-testid": "bal-snackbar-close", onClick: () => this.close() }), this.action ? (h("div", { class: "bal-snackbar__footer" }, h("bal-button", { color: "info", href: this.href, target: this.target, onClick: () => this.onActionHandler(), "data-testid": "bal-snackbar-action" }, this.action))) : (''))));
+        const isIconDefined = this.icon !== undefined && this.icon !== null && this.icon !== '';
+        const colorIcons = {
+            info: 'info-circle',
+            primary: 'info-circle',
+            warning: 'alert-triangle',
+            danger: 'alert-triangle',
+            success: 'check-circle',
+        };
+        const icon = isIconDefined ? this.icon : colorIcons[this.color || 'info'];
+        return (h(Host, { key: 'f7c2af83a4cdb00cf64ecc41c249bbc96eb99a56', 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: 'de20fea5880d141637e63eaab0cec93e44673745', class: Object.assign({}, detailsEl.class()) }, h("div", { key: '4bceb9b4680715d501e7e0fad200e225feca29d4', "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: '2bf5d7f9b68260dac90dcfd1a1da5d9d2ca9b2a4', class: Object.assign({}, detailsEl.element('content').class()) }, h("h2", { key: 'a7ac3ab5fc847a8242f34947af57fe849b2d843d', id: subjectId }, this.subject), h("span", Object.assign({ key: 'd77eb9352cb5c8df426c77892b6aab7e506fbe73' }, messageAttributes), h("slot", { key: '88a32633220e164154bf2ef4fb68dacd5c1ab973' }), h("span", { key: '73329ef3def8c43252dcbd85fc72aa3a3291799e', class: "hidden" }))), h("div", { key: 'ce1ad2520d6667e264fd279448050db0300ee3d4', class: Object.assign({}, detailsEl.element('close').class()) }, h("bal-close", { key: '2a70da54ed0988c3b04dd4c1cd071758a5dfce8a', 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))) : ('')));
     }
     static get is() { return "bal-snackbar"; }
     static get originalStyleUrls() {
@@ -283,11 +296,6 @@ export class Snackbar {
             }
         };
     }
-    static get states() {
-        return {
-            "animationClass": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "balClose",

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

@@ -1 +1 @@
-bal-spinner,.bal-spinner{text-align:center;display:flex;justify-content:center;align-content:center;width:4rem}bal-spinner svg,.bal-spinner svg{transform:unset !important}.bal-spinner--small{width:2rem}.bal-spinner--circle{margin:auto;border-width:.25rem;border-style:solid;border-color:var(--bal-color-grey);border-radius:50%;border-top-color:var(--bal-color-primary);width:1.5rem;height:1.5rem}.bal-spinner--circle.bal-spinner--small{width:1.125rem;height:1.125rem;border-width:.2rem}.bal-spinner--circle.bal-spinner--animated{animation:spinner 1.6s linear infinite}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
+bal-spinner,.bal-spinner{text-align:center;display:flex;justify-content:center;align-content:center;width:4rem}bal-spinner svg,.bal-spinner svg{transform:unset !important}.bal-spinner--small{width:2rem}.bal-spinner--circle{margin:auto;border-width:.25rem;border-style:solid;border-color:var(--bal-color-grey);border-radius:50%;border-top-color:var(--bal-color-primary);width:1.5rem;height:1.5rem}.bal-spinner--circle.bal-spinner--small{width:1.125rem;height:1.125rem;border-width:.2rem}.bal-spinner--circle.bal-spinner--animated{animation:spinner 1.6s linear infinite}.bal-spinner--circle.bal-spinner--color-white{border-color:var(--bal-color-white);border-top-color:var(--bal-color-primary)}@keyframes spinner{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

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

@@ -134,7 +134,7 @@ export class Spinner {
      */
     render() {
         const block = BEM.block('spinner');
-        return (h(Host, { key: '4aaf8217ef26f408e1cab309a966cc9ec52f7044', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), role: "progressbar", "aria-hidden": "true" }));
+        return (h(Host, { key: '6c3756c1b6cc6684bfc61906748ce66c3ba67890', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('circle').class(this.variation === 'circle')), block.modifier('small').class(this.small)), block.modifier('animated').class(this.animated)), block.modifier(`color-${this.color}`).class(this.variation === 'circle')), role: "progressbar", "aria-hidden": "true" }));
     }
     static get is() { return "bal-spinner"; }
     static get originalStyleUrls() {

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

@@ -44,7 +44,7 @@ export class Stack {
         if (alignment) {
             alignValue = this.alignment.split(' ').join('-');
         }
-        return (h(Host, { key: 'ae7ee9d0fde5a1324d87d8a6549a1afc10647cff', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, h("slot", { key: '364013576169de63cc540f287cd5b59e21dd7a7b' })));
+        return (h(Host, { key: '536a3cf3f4979288a0035ef0cdc966c4d390ff60', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`use-wrap`).class(useWrap)), block.modifier(`layout-${layoutValue}`).class(layout || direction)), block.modifier(`align-${alignValue}`).class(align || alignment)), block.modifier(`space-${this.space}`).class(space)), block.modifier(`space-row-${this.spaceRow}`).class(spaceRow)), block.modifier(`space-row-${this.spaceColumn}`).class(spaceColumn)), block.modifier(`px-${this.px}`).class(px)), block.modifier(`py-${this.py}`).class(py)), block.modifier(`fit-content`).class(fitContent)) }, h("slot", { key: 'd1101bb18f49fb392e3ef7b1949f5ce5d797a204' })));
     }
     static get is() { return "bal-stack"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-stage/bal-stage-back-link/bal-stage-back-link.js

@@ -8,10 +8,10 @@ export class StageBackLink {
     }
     render() {
         const block = BEM.block('stage-back-link');
-        return (h(Host, { key: 'b759ddecb2f96b0a7c9b82935257270022c61221', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: '4e39e44fddadc8ddbee24642205ef827aa67bb46', class: {
+        return (h(Host, { key: 'bc5906c288b5be99aba87a5c8b24773f8e980fe5', class: Object.assign(Object.assign({}, block.class()), block.modifier('shadow').class(this.shadow)) }, h("a", { key: 'd3ee0d9c434e58bcfbf6b70355dfd5b96b5a0d4d', class: {
                 'link': true,
                 'is-inverted': this.inverted,
-            }, href: this.href }, h("bal-icon", { key: '4f0f6b430046d3509c8c82c559aa01af3ff92340', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '7d689bca25898c187a5bbb507a1cecd18e17c46f' }))));
+            }, href: this.href }, h("bal-icon", { key: '9ea9ce3b98138878573dd43f43e174da381a5cf2', class: "mr-x-small", name: "caret-left", size: "x-small", inverted: this.inverted, shadow: this.shadow }), h("slot", { key: '95ad39a717f47a0d02940a6b6f609ae90226cd76' }))));
     }
     static get is() { return "bal-stage-back-link"; }
     static get properties() {

package/dist/collection/components/bal-stage/bal-stage-body/bal-stage-body.js

@@ -3,7 +3,7 @@ import { BEM } from "../../../utils/bem";
 export class StageBody {
     render() {
         const block = BEM.block('stage-body');
-        return (h(Host, { key: 'ea116cb3554072981fe5ea1773ee1df1178c08a6', class: Object.assign({}, block.class()) }, h("slot", { key: '4b24bbf7b1503fd29d710722fbe697ae3a14f0ba' })));
+        return (h(Host, { key: '8d78c9777215c84373e246ae0495512137620d0c', class: Object.assign({}, block.class()) }, h("slot", { key: 'e866a1e129ad6c87567018a3538e526cc432bdcc' })));
     }
     static get is() { return "bal-stage-body"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-foot/bal-stage-foot.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class StageFoot {
     render() {
-        return (h(Host, { key: '9217b4fe523082782e8c56466811e1ee452b2763', class: "hero-foot" }, h("slot", { key: '5ad55c58d8d833afee7889a2032891cb58631a1b' })));
+        return (h(Host, { key: '77f405fb5a84be341f5709ea9451fd5b01eae1a5', class: "hero-foot" }, h("slot", { key: '7b93751fe0fd796422cdf0d669404bf22f1312c8' })));
     }
     static get is() { return "bal-stage-foot"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-head/bal-stage-head.js

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class StageHead {
     render() {
-        return (h(Host, { key: 'f42eb0dbf4d7459ecff34e7ef9d3669140f55da4', class: "hero-head" }, h("slot", { key: 'baf5b283e24d1d135686e32a9c2f8c7ead74bc52' })));
+        return (h(Host, { key: '1d3ba006d2d6aafe5795cdb2f59d9cb02822c927', class: "hero-head" }, h("slot", { key: '2c24fa40d9505b5b7b673d99d7b831161372e35b' })));
     }
     static get is() { return "bal-stage-head"; }
     static get elementRef() { return "el"; }

package/dist/collection/components/bal-stage/bal-stage-image/bal-stage-image.js

@@ -20,7 +20,7 @@ export class StageImage {
     render() {
         const block = BEM.block('stage-image');
         const imageSrc = this.fallback ? this.fallback : this.srcSet.split(',')[0];
-        return (h(Host, { key: '9fd029b0b8b95896c661566bdef677b4e8bddd78', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
+        return (h(Host, { key: '403567b2d7e9052448bfabeee037dddbd29ddfc5', class: Object.assign({}, block.class()) }, this.isOnLoadEventDone ? (h("img", Object.assign({ src: imageSrc, srcset: this.srcSet, sizes: "100vw" }, this.imageInheritAttributes))) : ('')));
     }
     static get is() { return "bal-stage-image"; }
     static get properties() {

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

@@ -41,7 +41,7 @@ export class Stage {
     render() {
         const block = BEM.block('stage');
         const element = BEM.block('stage-content');
-        return (h(Host, { key: 'cebb6bb53e0d96094c6ddbd8e8cf1ce94ac3e24f', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: '17310e9c145cd19b947c21a2ef10691eba42298d', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: '749e4985a3756ca02f309bf15a20c08854a873f7' }), this.shape && (h("div", { key: '0e9c6c1742114a042b4320048fca983b123029d6', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: '59810aca102e9beff8db9344d774cc29ac8aab3d', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
+        return (h(Host, { key: 'e24550c75ccbc228367fcfec8a24f1cc55101fc8', class: Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`is-${this.size === '' ? 'medium' : this.size}`).class()), block.modifier(`is-${this.color}`).class(!!this.color)), block.modifier('has-shape').class(!!this.shape)), style: { '--bal-stage-container-width': this.getContainerWidth() } }, h("section", { key: 'd925080116d60d4891ac4e141e3d6fa68338aaa8', class: Object.assign(Object.assign({}, element.class()), { container: true, [`${this.containerClass}`]: this.containerSize !== '' }) }, h("slot", { key: 'f4d2eb4d16600695f336b076c07518d553a93cdf' }), this.shape && (h("div", { key: 'cf059b309141555194945d62124437a3d90145f0', class: { container: true, [`${this.containerClass}`]: this.containerSize !== '' } }, h("bal-shape", { key: '99b25f746ad8858c885b6bf15df6246492b26b84', color: this.color, variation: this.shapeVariation, rotation: this.shapeRotation }))))));
     }
     static get is() { return "bal-stage"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-steps/bal-step-item/bal-step-item.js

@@ -48,10 +48,10 @@ export class StepItem {
         };
     }
     render() {
-        return (h(Host, { key: '9b9322c92f3e7182359bd81ddead34efe7731b0c', role: "tabpanel", class: {
+        return (h(Host, { key: '8ee5cc145653a031dd60e10cd8e15a5cea413ded', role: "tabpanel", class: {
                 'bal-step-item': true,
                 'bal-step-item--active': this.isActive,
-            } }, h("slot", { key: 'bde852be10cae07db611abc2ed292eca77a48ad4' })));
+            } }, h("slot", { key: 'e424db22122910323793ae2b93c4dd8dcf9f2c31' })));
     }
     static get is() { return "bal-step-item"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class Table {
         const block = BEM.block('table');
         const fullwidthClass = 'is-fullwidth';
         const hasFullwidth = this.expanded;
-        return (h(Host, { key: '44262d7f133d1124da1ceb878840039cbf2c7ff6', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: 'ecbc47dc22edf2bfd54a4d72e9813b7e425a5a00' })));
+        return (h(Host, { key: '1059612d6670d6a8c333a6903dfa1ffff7150964', class: Object.assign(Object.assign(Object.assign({}, block.class()), { 'ag-theme-alpine': true }), block.modifier(fullwidthClass).class(hasFullwidth)) }, h("slot", { key: '22d1e47908682547a1d22d17348bfb66dfd81e7a' })));
     }
     static get is() { return "bal-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/bal-tabs/bal-tab-item/bal-tab-item.js

@@ -60,10 +60,10 @@ export class TabItem {
     render() {
         const hasPanel = !this.noPanel;
         const noPanelOrInactive = !this.isActive || this.noPanel;
-        return (h(Host, { key: '9c52bfb73f94ac8b9482fbd7d5d0e72462ea7073', id: this.tabPanelID, class: {
+        return (h(Host, { key: '73cd7faf737780486e58b71b4c51508e0311e277', id: this.tabPanelID, class: {
                 'bal-tab-item': true,
                 'bal-tab-item--active': this.isActive,
-            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'fc17bf76c24c61134bd35341fc61859ab99fb798' })));
+            }, role: hasPanel ? 'tabpanel' : undefined, "aria-label": hasPanel ? this.label : undefined, "aria-hidden": noPanelOrInactive ? 'true' : 'false', tabindex: noPanelOrInactive ? '-1' : undefined, hidden: noPanelOrInactive ? true : undefined }, h("slot", { key: 'd533d087306ee17ba5b78c9b756db6cf923ef1a5' })));
     }
     static get is() { return "bal-tab-item"; }
     static get properties() {

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

@@ -603,9 +603,9 @@ export class Tabs {
             .filter(t => this.isTabActive(t))
             .map(t => t.label)
             .join(',');
-        return (h(Host, { key: '8d867bd044fecb683137fd045a25a4d00977d715', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: 'a8082250c734922919296b24c9467199b9a23930', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
+        return (h(Host, { key: 'a1d8a76b19bfde81e59e6c59277d6445aa085cc8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('navbar').class(this.inNavbar)), block.modifier('vertical').class(isVertical)), block.modifier('fullwidth').class(this.expanded || this.fullwidth)), block.modifier('accordion').class(this.accordion)), block.modifier('animated').class(this.animated)), block.modifier('expanding').class(this.accordionState === 8 /* AccordionState.Expanding */)), block.modifier('expanded').class(this.accordionState === 4 /* AccordionState.Expanded */)), block.modifier('collapsing').class(this.accordionState === 2 /* AccordionState.Collapsing */)), block.modifier('collapsed').class(this.accordionState === 1 /* AccordionState.Collapsed */)), "data-value": dataValue, "data-label": dataLabel }, isSelect ? (h(TabSelect, { value: this.value, items: tabs, onSelectTab: this.onSelectTab })) : (h(TabNav, { swiper: this.swiper, items: tabs, isLinkList: isLinkList, tabsId: this.tabsId, clickable: this.clickable, accordion: this.accordion, isAccordionOpen: this.isAccordionOpen, lineActive: valueExists, lineHidden: !this.enableLineRender, inverted: isInverted, animated: this.animated, context: this.context, border: hasBorder, spaceless: this.spaceless, expanded: this.expanded, isMobile: isMobile, isTouch: isTouch, isVertical: isVertical, inNavbar: this.inNavbar, iconPosition: this.iconPosition, showSwiperControls: !this.isVertical(), verticalColSize: this.verticalColSize, onSelectTab: this.onSelectTab, dimInactiveElements: this.dimInactiveElements })), h("div", { key: '1a460259f8231a6f669e423343ab32f7b718fa06', part: contentPart, class: Object.assign(Object.assign(Object.assign({}, contentEl.class()), contentEl.modifier('vertical').class(this.isVertical())), contentEl
                 .modifier('hidden')
-                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: 'ab8af83ca427a58fdbd1fc5474798879cec06ef3', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: '50ed58aacd364ec3fe3b57d1775490d4335d1729' })))));
+                .class(this.context === 'meta' || this.context === 'navbar' || this.context === 'navigation')) }, h("div", { key: '40d55adc3c7bdb32ab8e26eb80a6a4766079c54a', id: this.tabsId, class: Object.assign({}, contentEl.element('wrapper').class()) }, h("slot", { key: 'ad35eebf2cb6c481217f8539f4932096406df50d' })))));
     }
     static get is() { return "bal-tabs"; }
     static get originalStyleUrls() {

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

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class TagGroup {
     render() {
-        return (h(Host, { key: '524a094b4adf71e481268ff8a88eabdfe8323b38', class: "bal-tag-group" }, h("slot", { key: 'b03a1908eec3f767f9547f01f44b26c75e7cb198' })));
+        return (h(Host, { key: 'd1f82919080730fd2555d25e4e5adda071f0c6a2', class: "bal-tag-group" }, h("slot", { key: '2f0ce67b5870beb486f86341214f5f32f234ae47' })));
     }
     static get is() { return "bal-tag-group"; }
 }

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

@@ -29,7 +29,7 @@ export class Tag {
         const hasDisabled = this.disabled;
         const positionClass = `is-${this.position}`;
         const hasPosition = this.position !== undefined;
-        return (h(Host, Object.assign({ key: 'f7e55913d45b3043066cd32973bfe22ea9cb2e19', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'a70a1395177d1717117555d406311161c62a87f1', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '9678f086ef39473f3a7a78720b59abba8eeaa0c8' })), h("bal-close", Object.assign({ key: '03f425bbe857348736170c5c75093ed11c8f95d9', class: Object.assign({}, block.element('close').class()), style: {
+        return (h(Host, Object.assign({ key: 'fcb28709fa01ca31a2ae98d59bacfb356e28fd0c', "aria-disabled": this.disabled ? 'true' : null, class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(sizeClass).class(hasSize)), block.modifier(colorClass).class(hasColor)), block.modifier(disabledClass).class(hasDisabled)), block.modifier(positionClass).class(hasPosition)), block.modifier('is-invalid').class(this.invalid)) }, this.inheritedAttributes), h("span", { key: 'e82b7f7b34add1277872fc105a327f50b305b2f8', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, elLabel.class()), elLabel.modifier(sizeClass).class(hasSize)), elLabel.modifier(colorClass).class(hasColor)), elLabel.modifier(disabledClass).class(hasDisabled)), elLabel.modifier('is-invalid').class(this.invalid)), "data-testid": "bal-tag-label" }, h("slot", { key: '9a29590870327840f6bbf0c9bedebbcb1be51ba8' })), h("bal-close", Object.assign({ key: 'a236adc61866d6ba1080780813b75806c93ec657', class: Object.assign({}, block.element('close').class()), style: {
                 display: this.closable && !this.disabled ? 'flex' : 'none',
             }, size: this.size === 'small' ? 'small' : '', inverted: (['blue', 'primary', 'info', 'success', 'warning', 'danger', 'red', 'purple', 'yellow', 'green'].includes(this.color) &&
                 !this.light) ||

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

@@ -50,10 +50,10 @@ export class Text {
         const Text = this.inline ? 'span' : 'p';
         const color = this.parseColor();
         const block = BEM.block('text');
-        return (h(Host, { key: '410f0e92f74f64df3047a4c2ae64f2ff4dfa1740', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'beef074e67dc900f2580e03f2d8944a5257b517a', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
+        return (h(Host, { key: '54ea51b4d2db0793307072aa6dd3bd5969f4e1d0', class: Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier(`space-${this.space}`).class(this.space !== '')), block.modifier(`inline`).class(this.inline)) }, h(Text, { key: 'c894a460f369a284910f224b430dd7fc4b9b5123', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.element('text').class()), block.element('text').modifier(`color-${color}`).class(!!color)), block.element('text').modifier(`bold`).class(this.bold)), block.element('text').modifier(`heading`).class(this.heading)), block.element('text').modifier(`shadow`).class(this.shadow)), block.element('text').modifier(`no-wrap`).class(this.noWrap)), block
                 .element('text')
                 .modifier(`size-${this.size}`)
-                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '3845390717b94d779233d0f02702231d8144a54e' }))));
+                .class(this.size !== '')), "data-testid": "bal-text" }, h("slot", { key: '94c09c5d469712da76d9ca0c4a80222c3e76f8a3' }))));
     }
     static get is() { return "bal-text"; }
     static get originalStyleUrls() {

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

@@ -106,7 +106,7 @@ export class Textarea {
         const value = this.getValue();
         const block = BEM.block('textarea');
         const elNative = block.element('native');
-        return (h(Host, { key: '149d29f8d5914cf4b32beb3fe6e1e7e62a85db08', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: '52709d8de1e3b4e02f500d6bcec497156f06fc1d', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '48a083ac55240858d9cbf656631739cc349b6cf1' }))));
+        return (h(Host, { key: 'c480f893ab85bf7c3aebacd7cae0f9cac2f45729', onClick: this.handleClick, "aria-disabled": this.disabled ? 'true' : null, class: Object.assign({}, block.class()) }, h("textarea", Object.assign({ key: 'e24dc8d2deb3e9a700f1b34177bb953ea5d48f84', class: Object.assign(Object.assign({}, elNative.class()), { 'textarea': true, 'is-disabled': this.disabled || this.readonly, 'is-danger': this.invalid, 'clickable': this.clickable }), "data-testid": "bal-textarea-input", ref: inputEl => (this.nativeInput = inputEl), name: this.name, id: this.ariaForm.controlId || this.inputId, "aria-labelledby": this.ariaForm.labelId, "aria-describedby": this.ariaForm.messageId, "aria-invalid": this.invalid === true ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : null, disabled: this.disabled, readonly: this.readonly, required: this.required, autoCapitalize: this.autocapitalize, autocomplete: this.autocomplete, autoFocus: this.autofocus, minLength: this.minLength, maxLength: this.maxLength, placeholder: this.placeholder, inputMode: this.inputmode, value: this.value, cols: this.cols, rows: this.rows, wrap: this.wrap, onFocus: this.onFocus, onInput: ev => this.onInput(ev), onBlur: this.onBlur, onClick: this.onClick, onKeyPress: e => this.balKeyPress.emit(e) }, this.inheritedAttributes), value, h("slot", { key: '8951528c192b5cfaff238fc6b4371f0005f788d4' }))));
     }
     static get is() { return "bal-textarea"; }
     static get originalStyleUrls() {