bromcom-ui 2.9.0-rc.2 → 2.9.0-rc.20

package/dist/components/bcm-textarea.js

@@ -2,220 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { I as IsLoad } from './is-load-decorator.js';
-import { G as Generate } from './generate.js';
-import { B as Bcm } from './bcm.js';
-import { C as CaptionTemplate } from './caption-template.js';
-import { I as InputTemplate } from './input-template.js';
-import { d as delay } from './utils.js';
-import { d as defineCustomElement$4 } from './icon.js';
-import { d as defineCustomElement$3 } from './label.js';
-import { d as defineCustomElement$2 } from './tooltip.js';
-
-var ResizeType;
-(function (ResizeType) {
-  ResizeType["none"] = "none";
-  ResizeType["both"] = "both";
-  ResizeType["horizontal"] = "horizontal";
-  ResizeType["vertical"] = "vertical";
-  ResizeType["initial"] = "initial";
-  ResizeType["inherit"] = "inherit";
-})(ResizeType || (ResizeType = {}));
-
-const textareaCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-caption-area{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);color:var(--bcm-new-ds-color-slate-400);display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;flex-wrap:nowrap;margin-top:2px}.bcm-caption-area__text{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.default{color:var(--bcm-new-ds-color-slate-400)}.bcm-caption-area__text.info{color:var(--bcm-new-ds-color-blue-500)}.bcm-caption-area__text.success{color:var(--bcm-new-ds-color-emerald-500)}.bcm-caption-area__text.warning{color:var(--bcm-new-ds-color-amber-500)}.bcm-caption-area__text.error{color:var(--bcm-new-ds-color-red-500)}.bcm-caption-area__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-caption-area__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-caption-area__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}*{box-sizing:border-box}.bcm-label{display:inline-flex;align-items:flex-start;grid-gap:2px}.bcm-label__text{margin-bottom:2px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-block;color:var(--bcm-new-ds-color-slate-600)}.bcm-label__size-small{font-size:10px;line-height:calc(10px + 8px);min-height:calc(10px + 8px)}.bcm-label__size-medium{font-size:12px;line-height:calc(12px + 8px);min-height:calc(12px + 8px)}.bcm-label__size-large{font-size:14px;line-height:calc(14px + 8px);min-height:calc(14px + 8px)}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-input{display:inline-flex;flex-direction:column;width:100%;max-width:256px;margin-bottom:8px}.bcm-input.full-width{max-width:100%}.bcm-input.hidden{display:none}.bcm-input__container{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;align-items:stretch;flex-direction:row;background-color:var(--bcm-new-ds-color-white);border:1px solid var(--bcm-new-ds-color-slate-300);border-radius:4px;box-sizing:border-box;cursor:text;padding:0 0 0 4px;position:relative;width:100%}.bcm-input__container.disabled{background-color:var(--bcm-new-ds-color-slate-50);cursor:not-allowed}.bcm-input__container.disabled .bcm-input-element{color:var(--bcm-new-ds-color-slate-500)}.bcm-input__container.readonly{background-color:var(--bcm-new-ds-color-slate-50);cursor:default}.bcm-input__container.readonly .bcm-input-element{color:var(--bcm-new-ds-color-slate-600)}.bcm-input__container:not(.disabled):hover .caret-container,.bcm-input__container:not(.disabled).focused .caret-container{opacity:1}.bcm-input__container:not(.disabled):hover .input-clear-button,.bcm-input__container:not(.disabled).focused .input-clear-button{opacity:1}.bcm-input__container:not(.disabled).focused{background-color:var(--bcm-new-ds-color-slate-50)}.bcm-input__container:not(.disabled):hover{border-color:var(--bcm-color-prime-blue-6)}.bcm-input__container.empty .input-clear-button{display:none}.bcm-input__container.invalid,.bcm-input__container.error{border-color:var(--bcm-new-ds-color-red-500)}.bcm-input__container .bcm-input-element{width:100%;color:var(--bcm-new-ds-color-slate-600);flex:1;border:none;background:transparent;box-shadow:unset;padding:0 4px;font-family:\"Inter\", sans-serif;cursor:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;overflow:hidden;text-overflow:ellipsis}.bcm-input__container .bcm-input-element::placeholder{font-family:\"Inter\", sans-serif;color:var(--bcm-new-ds-color-slate-300);user-select:none}.bcm-input__container .bcm-input-element::-webkit-search-decoration,.bcm-input__container .bcm-input-element::-webkit-search-cancel-button,.bcm-input__container .bcm-input-element::-webkit-search-results-button,.bcm-input__container .bcm-input-element::-webkit-search-results-decoration,.bcm-input__container .bcm-input-element::-webkit-calendar-picker-indicator,.bcm-input__container .bcm-input-element::-webkit-inner-spin-button,.bcm-input__container .bcm-input-element::-webkit-outer-spin-button{-webkit-appearance:none}.bcm-input__container .caret-container{width:30px;display:flex;flex-direction:column;justify-content:center;align-items:stretch;border-left:1px solid #D9D9D9;transition:0.2s opacity;user-select:none;box-sizing:border-box}.bcm-input__container .caret-container .bcm-input-caret{display:flex;align-items:center;justify-content:center;color:var(--bcm-color-grey-7);cursor:pointer;flex:1}.bcm-input__container .caret-container .bcm-input-caret bcm-icon{line-height:1}.bcm-input__container .caret-container .bcm-input-caret:hover{color:var(--bcm-color-prime-blue-6)}.bcm-input__container .caret-container .bcm-input-caret:active{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container .bcm-input-caret:last-child{border-top:1px solid #D9D9D9}.bcm-input__container .caret-container.disabled{background-color:var(--bcm-color-grey-3)}.bcm-input__container .caret-container.disabled .bcm-input-caret{cursor:not-allowed}.bcm-input__container .input-suffix-content{display:flex;align-items:center;justify-content:center}.bcm-input__container .input-prefix:not(:empty){padding-left:4px}.bcm-input__container .input-suffix:not(:empty){min-width:24px;padding-right:4px}.bcm-input__container .input-prefix:not(:empty),.bcm-input__container .input-suffix:not(:empty){display:flex;align-items:center;justify-content:center;cursor:default;color:#64748a}.bcm-input__container .input-prefix:not(:empty) .unit-prefix,.bcm-input__container .input-suffix:not(:empty) .unit-prefix{color:#64748a}.bcm-input__container .input-prefix-button:not(:empty),.bcm-input__container .input-suffix-button:not(:empty){cursor:pointer}.bcm-input__container .caret-container,.bcm-input__container .input-clear-button{opacity:0}.bcm-input__container--small{font-size:12px}.bcm-input__container--medium{font-size:14px}.bcm-input__container--large{font-size:16px}.bcm-input__textarea.clearable .bcm-input-element{padding-right:24px}.bcm-input__textarea .input-clear-button{position:absolute;top:4px;right:0}";
-
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
-    r = Reflect.decorate(decorators, target, key, desc);
-  else
-    for (var i = decorators.length - 1; i >= 0; i--)
-      if (d = decorators[i])
-        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-const BcmTextarea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.focus = createEvent(this, "bcm-focus", 7);
-    this.blur = createEvent(this, "bcm-blur", 7);
-    this.clear = createEvent(this, "bcm-clear", 7);
-    this.change = createEvent(this, "bcm-change", 7);
-    this.input = createEvent(this, "bcm-input", 7);
-    this._id = Generate.UID();
-    this._internal_id = Generate.UID();
-    this.hidden = false;
-    this.value = undefined;
-    this.placeholder = undefined;
-    this.label = undefined;
-    this.name = undefined;
-    this.required = false;
-    this.caption = undefined;
-    this.noCaption = false;
-    this.captionError = undefined;
-    this.captionType = Bcm.Status.default;
-    this.rows = 3;
-    this.size = Bcm.Size.medium;
-    this.disabled = undefined;
-    this.readonly = false;
-    this.clearable = undefined;
-    this.resize = ResizeType.vertical;
-    this.fullWidth = false;
-    this.maxLength = undefined;
-    this.focused = false;
-    this.captionCache = undefined;
-    this.captionTypeCache = undefined;
-  }
-  connectedCallback() {
-    this.captionCache = this.caption;
-    this.captionTypeCache = this.captionType;
-  }
-  async onBcmFocus() {
-    this.textarea.focus();
-  }
-  async onBcmBlur() {
-    this.textarea.blur();
-  }
-  async onBcmSelect() {
-    this.textarea.select();
-  }
-  async set(data) {
-    await this.setValue(data);
-  }
-  async get() {
-    return this.value || null;
-  }
-  async setValue(value) {
-    this.textarea.value = value;
-    this.value = value;
-    this.handleChange();
-    return value;
-  }
-  async setClear() {
-    this.textarea.value = '';
-    this.value = '';
-    await delay(10);
-    return Promise.resolve();
-  }
-  async resetCaption() {
-    await delay(10);
-    this.caption = this.captionCache;
-    this.captionType = this.captionTypeCache;
-    this.captionError = null;
-    await delay(10);
-    return Promise.resolve();
-  }
-  async getValue() {
-    return this.value;
-  }
-  watchValue(newValue) {
-    this.textarea.value = newValue;
-    this.handleChange();
-  }
-  handleFocus() {
-    this.focused = true;
-    this.focus.emit();
-  }
-  handleBlur() {
-    this.focused = false;
-    this.blur.emit();
-  }
-  handleChange() {
-    this.value = this.textarea.value;
-    this.change.emit(this.value);
-  }
-  handleInput() {
-    this.value = this.textarea.value;
-    this.input.emit(this.value);
-  }
-  handleClear(e) {
-    this.textarea.value = '';
-    this.value = '';
-    this.clear.emit();
-    this.textarea.focus();
-    e.stopPropagation();
-  }
-  render() {
-    const { _id, hidden, readonly, fullWidth, size, rows, disabled, clearable, label, focused, noCaption, caption, captionError, captionType, value, resize, maxLength, placeholder, required } = this;
-    const hostClasses = classnames('bcm-input', {
-      hidden,
-      'full-width': fullWidth,
-    });
-    return (h(Host, { class: hostClasses }, label && h("bcm-label", { type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { elementType: Bcm.HtmlElementType.textarea, id: _id, value: value, rows: rows, disabled: disabled, maxLength: maxLength, placeholder: placeholder, clearable: clearable, resize: resize, readonly: readonly, size: size, focused: focused, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), handleClear: (e) => this.handleClear(e), ref: (el) => this.textarea = el, captionType: captionType }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, value: value, maxLength: maxLength })));
-  }
-  get el() { return this; }
-  static get watchers() { return {
-    "value": ["watchValue"]
-  }; }
-  static get style() { return textareaCss; }
-}, [4, "bcm-textarea", {
-    "_id": [1537, "id"],
-    "_internal_id": [1025],
-    "hidden": [1028],
-    "value": [1025],
-    "placeholder": [1025],
-    "label": [1025],
-    "name": [1025],
-    "required": [1028],
-    "caption": [1025],
-    "noCaption": [1028, "no-caption"],
-    "captionError": [1025, "caption-error"],
-    "captionType": [1025, "caption-type"],
-    "rows": [1026],
-    "size": [1025],
-    "disabled": [1028],
-    "readonly": [1028],
-    "clearable": [1028],
-    "resize": [1032],
-    "fullWidth": [1028, "full-width"],
-    "maxLength": [1026, "max-length"],
-    "focused": [32],
-    "captionCache": [32],
-    "captionTypeCache": [32],
-    "onBcmFocus": [64],
-    "onBcmBlur": [64],
-    "onBcmSelect": [64],
-    "set": [64],
-    "get": [64],
-    "setValue": [64],
-    "setClear": [64],
-    "resetCaption": [64],
-    "getValue": [64]
-  }]);
-__decorate([
-  IsLoad()
-], BcmTextarea$1.prototype, "el", void 0);
-function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["bcm-textarea", "bcm-icon", "bcm-label", "bcm-tooltip"];
-  components.forEach(tagName => { switch (tagName) {
-    case "bcm-textarea":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, BcmTextarea$1);
-      }
-      break;
-    case "bcm-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "bcm-label":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "bcm-tooltip":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
-}
+import { B as BcmTextarea$1, d as defineCustomElement$1 } from './textarea.js';
 
 const BcmTextarea = BcmTextarea$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/bcm-time-picker.js

@@ -14,7 +14,7 @@ import { d as defineCustomElement$4 } from './label.js';
 import { d as defineCustomElement$3 } from './old-input.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const timePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-block;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
+const timePickerCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:inline-flex;width:100%;max-width:256px}:host(.full-width){max-width:100%}:host(.hidden){display:none}:host(.linked-component){display:none}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -41,6 +41,7 @@ const BcmTimePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.label = undefined;
     this.placeholder = undefined;
     this.disabled = false;
+    this.noMargin = false;
     this.noCaption = false;
     this.caption = '';
     this.captionError = undefined;
@@ -137,7 +138,7 @@ const BcmTimePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     const hostClasses = classnames(this.hidden ? 'hidden' : null, {
       'full-width': this.fullWidth
     });
-    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, fullWidth: this.fullWidth, required: this.required, label: this.label, name: this.name, placeholder: this.placeholder, type: "time", clearable: this.clearable, date: this.time, ref: el => (this.picker = el), disabled: this.disabled, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType, alignment: this.alignment, placement: this.placement })));
+    return (h(Host, { class: hostClasses }, h("bcm-datetime-picker", { "linked-component": this.linkedComponent, id: this._id, fullWidth: this.fullWidth, required: this.required, label: this.label, name: this.name, placeholder: this.placeholder, type: "time", clearable: this.clearable, date: this.time, ref: el => (this.picker = el), disabled: this.disabled, "on-bcm-load": () => this.handlePickerLoad(), "on-bcm-change": (e) => this.handlePickerChange(e), noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType, alignment: this.alignment, placement: this.placement, noMargin: this.noMargin })));
   }
   get el() { return this; }
   static get style() { return timePickerCss; }
@@ -152,6 +153,7 @@ const BcmTimePicker$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "label": [1025],
     "placeholder": [1025],
     "disabled": [1028],
+    "noMargin": [1028, "no-margin"],
     "noCaption": [1028, "no-caption"],
     "caption": [1025],
     "captionError": [1025, "caption-error"],

package/dist/components/bcm-toast.js

@@ -25,13 +25,15 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.messageIcon = undefined;
     this.viewButton = false;
     this.closeButton = true;
+    this.removeAfterClose = true;
     this.visible = false;
     this.visibleContainer = false;
   }
   async show() {
-    const container = document.getElementById(this._id + "-container");
-    if (container) {
-      document.body.appendChild(container);
+    const toast = document.getElementById(this._id + "-container");
+    if (toast) {
+      const container = this.createContainer(this.position);
+      container.appendChild(toast);
     }
     this.visible = true;
     await delay(50);
@@ -49,6 +51,10 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.bcmToastClose.emit();
     await delay(100);
     this.visible = false;
+    if (this.removeAfterClose) {
+      await delay(100);
+      this.el.remove();
+    }
   }
   handleMouseEnter() {
     clearTimeout(this.timer);
@@ -58,17 +64,30 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.timer = setTimeout(() => this.hide(), 1000);
     }
   }
+  createContainer(position) {
+    const containerId = "bcm-toast-container-" + position;
+    let container = document.getElementById(containerId);
+    if (!container) {
+      container = document.createElement("div");
+      container.id = containerId;
+      const classlist = classnames("tw-pointer-events-none tw-overflow-hidden tw-z-50", "tw-fixed tw-flex", "tw-p-4 tw-gap-4", {
+        "tw-flex-col-reverse tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
+        "tw-flex-col tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
+        "tw-flex-col-reverse tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
+        "tw-flex-col-reverse tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
+        "tw-flex-col tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
+        "tw-flex-col tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
+      });
+      container.classList.add(...classlist.split(" "));
+      document.body.appendChild(container);
+    }
+    return container;
+  }
   render() {
     return (h(Host, { class: "tw-hidden" }, h("div", { class: classnames({ "tw-hidden": !this.visible }), id: this._id + "-container", onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { class: classnames("tw-pointer-events-auto tw-transform tw-transition tw-duration-300 tw-ease-in-out", "tw-flex tw-min-w-[256px] tw-max-w-[420px] tw-flex-col tw-gap-2 tw-rounded-lg tw-border tw-font-sans tw-font-normal tw-shadow-2", "tw-border-gray-300 tw-bg-white tw-text-slate-600", {
         "tw-p-4": !this.description,
         "tw-p-6": this.description,
-      }, "tw-fixed tw-z-50", "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
-        "tw-inset-x-0 tw-top-4 tw-mx-auto": this.position === Bcm.Placement.top,
-        "tw-inset-x-0 tw-bottom-4 tw-mx-auto": this.position === Bcm.Placement.bottom,
-        "tw-top-4 tw-left-4": this.position === Bcm.Placement["top-start"],
-        "tw-top-4 tw-right-4": this.position === Bcm.Placement["top-end"],
-        "tw-bottom-4 tw-left-4": this.position === Bcm.Placement["bottom-start"],
-        "tw-bottom-4 tw-right-4": this.position === Bcm.Placement["bottom-end"],
+      }, "tw-transform tw-transition tw-duration-300 tw-ease-in-out ", {
         "tw-translate-y-0 tw-opacity-100 ": this.visibleContainer,
         "tw-opacity-0": !this.visibleContainer,
         "tw-translate-y-[-100%]": !this.visibleContainer && this.position.split("-")[0] === "top",
@@ -101,6 +120,7 @@ const BcmToast$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "messageIcon": [8, "message-icon"],
     "viewButton": [4, "view-button"],
     "closeButton": [4, "close-button"],
+    "removeAfterClose": [4, "remove-after-close"],
     "visible": [32],
     "visibleContainer": [32],
     "show": [64],

package/dist/components/bcm.js

@@ -73,6 +73,7 @@ var Bcm;
     Kind["solid"] = "solid";
     Kind["ghost"] = "ghost";
     Kind["link"] = "link";
+    Kind["ghost-link"] = "ghost-link";
   })(Bcm.Kind || (Bcm.Kind = {}));
   (function (ButtonType) {
     ButtonType["button"] = "button";
@@ -378,33 +379,33 @@ var Bcm;
     KeyCode[KeyCode["a"] = 65] = "a";
   })(Bcm.KeyCode || (Bcm.KeyCode = {}));
   Bcm.FormErrorMessages = {
-    'email': 'Please enter a valid email address',
-    'password': 'Please enter a valid password',
-    'url': 'Please enter a valid URL',
-    'phone': 'Please enter a valid phone number',
-    'search': 'Please enter a valid search term',
-    'number': 'Please enter a valid number',
-    'text': 'Please enter a valid text',
-    'required': 'This field is required',
-    'minlength': 'This field must be at least {0} characters long',
-    'maxlength': 'This field must be at most {0} characters long',
-    'min': 'This field must be at least {0}',
-    'max': 'This field must be at most {0}',
-    'between': 'This field must be between {0} and {1}',
-    'pattern': 'Please use a valid format',
-    'date': 'Please enter a valid date',
-    'time': 'Please enter a valid time',
-    'datetime': 'Please enter a valid date and time',
-    'datetime-local': 'Please enter a valid date and time',
-    'month': 'Please enter a valid month',
-    'week': 'Please enter a valid week',
-    'color': 'Please enter a valid color',
-    'file': 'Please enter a valid file',
-    'range': 'Please enter a valid range',
-    'radio': 'Please select a valid option',
-    'checkbox': 'Please select a valid option',
-    'select': 'Please select a valid option',
-    'multiple': 'Please select a valid option',
+    "email": "Please enter a valid email address",
+    "password": "Please enter a valid password",
+    "url": "Please enter a valid URL",
+    "phone": "Please enter a valid phone number",
+    "search": "Please enter a valid search term",
+    "number": "Please enter a valid number",
+    "text": "Please enter a valid text",
+    "required": "This field is required",
+    "minlength": "This field must be at least {0} characters long",
+    "maxlength": "This field must be at most {0} characters long",
+    "min": "This field must be at least {0}",
+    "max": "This field must be at most {0}",
+    "between": "This field must be between {0} and {1}",
+    "pattern": "Please use a valid format",
+    "date": "Please enter a valid date",
+    "time": "Please enter a valid time",
+    "datetime": "Please enter a valid date and time",
+    "datetime-local": "Please enter a valid date and time",
+    "month": "Please enter a valid month",
+    "week": "Please enter a valid week",
+    "color": "Please enter a valid color",
+    "file": "Please enter a valid file",
+    "range": "Please enter a valid range",
+    "radio": "Please select a valid option",
+    "checkbox": "Please select a valid option",
+    "select": "Please select a valid option",
+    "multiple": "Please select a valid option",
   };
   (function (IndeterminateType) {
     IndeterminateType["uncheck"] = "uncheck";
@@ -435,6 +436,7 @@ var Bcm;
     TriggerType["hover"] = "hover";
     TriggerType["click"] = "click";
     TriggerType["focus"] = "focus";
+    TriggerType["custom"] = "custom";
   })(Bcm.TriggerType || (Bcm.TriggerType = {}));
   (function (ListType) {
     ListType["listbox"] = "listbox";

package/dist/components/button.js

@@ -217,7 +217,7 @@ const ButtonTemplate = ({ value, type, componentClass, disabled, href, target, l
     h("slot", { name: "suffix" })));
 };
 
-const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
+const buttonCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button{display:inline-flex;width:fit-content;height:fit-content;--bcm-button-solid-color-default:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-border-default:var(--bcm-new-ds-color-blue-500);--bcm-button-solid-color-hover:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-border-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-solid-color-focus-visible:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-border-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-solid-color-active:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-border-active:var(--bcm-new-ds-color-blue-700);--bcm-button-solid-color-disabled:var(--bcm-new-ds-color-white);--bcm-button-solid-background-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-solid-border-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-default:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-default:var(--bcm-new-ds-color-slate-100);--bcm-button-ghost-border-default:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-color-hover:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-border-hover:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-color-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-focus-visible:var(--bcm-new-ds-color-slate-400);--bcm-button-ghost-border-focus-visible:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-color-active:var(--bcm-new-ds-color-slate-600);--bcm-button-ghost-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-border-active:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-color-disabled:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-background-color-disabled:var(--bcm-new-ds-color-slate-50);--bcm-button-ghost-border-disabled:var(--bcm-new-ds-color-slate-200);--bcm-button-link-color-default:var(--bcm-new-ds-color-blue-500);--bcm-button-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-hover:var(--bcm-new-ds-color-blue-600);--bcm-button-link-background-color-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-link-color-focus-visible:var(--bcm-new-ds-color-blue-800);--bcm-button-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-focus-visible:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-active:var(--bcm-new-ds-color-blue-700);--bcm-button-link-background-color-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-border-active:var(--bcm-new-ds-color-slate-50);--bcm-button-link-color-disabled:var(--bcm-new-ds-color-slate-400);--bcm-button-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-link-border-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-default:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-default:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-hover:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-hover:var(--bcm-new-ds-color-slate-200);--bcm-button-ghost-link-border-hover:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-focus-visible:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-focus-visible:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-focus-visible:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-active:var(--bcm-new-ds-color-slate-700);--bcm-button-ghost-link-background-color-active:var(--bcm-new-ds-color-slate-300);--bcm-button-ghost-link-border-active:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-color-disabled:var(--bcm-new-ds-color-slate-500);--bcm-button-ghost-link-background-color-disabled:var(--bcm-new-ds-color-transparent);--bcm-button-ghost-link-border-disabled:var(--bcm-new-ds-color-transparent)}.bcm-button.full-width{width:100%}.bcm-button.full-width .bcm-button__container{width:100%}.bcm-button:after,.bcm-button:before{content:\"\";clear:both}.bcm-button__container{border:none;color:inherit;background-color:inherit;padding:0;margin:0;font:inherit;cursor:pointer;outline:none;text-decoration:none;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:4px 12px;outline:none;border-radius:4px;transition:background-color 0.1s ease-in-out;position:relative;min-width:40px;border-width:1px;border-style:solid;border-color:initial}.bcm-button__container:hover,.bcm-button__container:focus,.bcm-button__container:active{outline:none;text-decoration:none}.bcm-button__container-loading{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:4px;display:flex;align-items:center;justify-content:center}.bcm-button__container-kind-solid{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-solid:hover{color:var(--bcm-button-solid-color-hover);background-color:var(--bcm-button-solid-background-color-hover);border-color:var(--bcm-button-solid-border-hover)}.bcm-button__container-kind-solid:focus-visible{color:var(--bcm-button-solid-color-focus-visible);background-color:var(--bcm-button-solid-background-color-focus-visible);border-color:var(--bcm-button-solid-border-focus-visible)}.bcm-button__container-kind-solid:active{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid:disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid.checked{color:var(--bcm-button-solid-color-active);background-color:var(--bcm-button-solid-background-color-active);border-color:var(--bcm-button-solid-border-active)}.bcm-button__container-kind-solid.disabled{color:var(--bcm-button-solid-color-disabled);background-color:var(--bcm-button-solid-background-color-disabled);border-color:var(--bcm-button-solid-border-disabled)}.bcm-button__container-kind-solid .bcm-button__container-loading{color:var(--bcm-button-solid-color-default);background-color:var(--bcm-button-solid-background-color-default);border-color:var(--bcm-button-solid-border-default)}.bcm-button__container-kind-ghost{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-ghost:not([disabled]) .bcm-icon{color:var(--bcm-new-ds-color-slate-500)}.bcm-button__container-kind-ghost:hover{color:var(--bcm-button-ghost-color-hover);background-color:var(--bcm-button-ghost-background-color-hover);border-color:var(--bcm-button-ghost-border-hover)}.bcm-button__container-kind-ghost:focus-visible{color:var(--bcm-button-ghost-color-focus-visible);background-color:var(--bcm-button-ghost-background-color-focus-visible);border-color:var(--bcm-button-ghost-border-focus-visible)}.bcm-button__container-kind-ghost:active{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost:disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost.checked{color:var(--bcm-button-ghost-color-active);background-color:var(--bcm-button-ghost-background-color-active);border-color:var(--bcm-button-ghost-border-active)}.bcm-button__container-kind-ghost.disabled{color:var(--bcm-button-ghost-color-disabled);background-color:var(--bcm-button-ghost-background-color-disabled);border-color:var(--bcm-button-ghost-border-disabled)}.bcm-button__container-kind-ghost .bcm-button__container-loading{color:var(--bcm-button-ghost-color-default);background-color:var(--bcm-button-ghost-background-color-default);border-color:var(--bcm-button-ghost-border-default)}.bcm-button__container-kind-link{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-link:hover{color:var(--bcm-button-link-color-hover);background-color:var(--bcm-button-link-background-color-hover);border-color:var(--bcm-button-link-border-hover)}.bcm-button__container-kind-link:focus-visible{color:var(--bcm-button-link-color-focus-visible);background-color:var(--bcm-button-link-background-color-focus-visible);border-color:var(--bcm-button-link-border-focus-visible)}.bcm-button__container-kind-link:active{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link:disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link.checked{color:var(--bcm-button-link-color-active);background-color:var(--bcm-button-link-background-color-active);border-color:var(--bcm-button-link-border-active)}.bcm-button__container-kind-link.disabled{color:var(--bcm-button-link-color-disabled);background-color:var(--bcm-button-link-background-color-disabled);border-color:var(--bcm-button-link-border-disabled)}.bcm-button__container-kind-link .bcm-button__container-loading{color:var(--bcm-button-link-color-default);background-color:var(--bcm-button-link-background-color-default);border-color:var(--bcm-button-link-border-default)}.bcm-button__container-kind-ghost-link{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container-kind-ghost-link:hover{color:var(--bcm-button-ghost-link-color-hover);background-color:var(--bcm-button-ghost-link-background-color-hover);border-color:var(--bcm-button-ghost-link-border-hover)}.bcm-button__container-kind-ghost-link:focus-visible{color:var(--bcm-button-ghost-link-color-focus-visible);background-color:var(--bcm-button-ghost-link-background-color-focus-visible);border-color:var(--bcm-button-ghost-link-border-focus-visible)}.bcm-button__container-kind-ghost-link:active{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link:disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link.checked{color:var(--bcm-button-ghost-link-color-active);background-color:var(--bcm-button-ghost-link-background-color-active);border-color:var(--bcm-button-ghost-link-border-active)}.bcm-button__container-kind-ghost-link.disabled{color:var(--bcm-button-ghost-link-color-disabled);background-color:var(--bcm-button-ghost-link-background-color-disabled);border-color:var(--bcm-button-ghost-link-border-disabled)}.bcm-button__container-kind-ghost-link .bcm-button__container-loading{color:var(--bcm-button-ghost-link-color-default);background-color:var(--bcm-button-ghost-link-background-color-default);border-color:var(--bcm-button-ghost-link-border-default)}.bcm-button__container[disabled]{cursor:not-allowed}.bcm-button__container-text{order:3;display:flex;align-items:center;gap:8px;white-space:nowrap}.bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-icon.prefix{order:2}.bcm-button__container-icon.suffix{order:4}.bcm-button__container-size-small{font-size:12px;line-height:calc(12px + 8px);padding:calc(4px - 3px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px - 2px)) * 2)}.bcm-button__container-size-small .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-medium{font-size:calc(12px + 1px);line-height:calc(12px + 8px);padding:calc(4px + 1px) 12px;min-height:calc(calc(12px + 8px) + calc(calc(4px + 2px)) * 2)}.bcm-button__container-size-medium .bcm-button__container-icon{min-height:calc(12px + 8px)}.bcm-button__container-size-large{font-size:16px;line-height:calc(16px + 8px);padding:calc(8px - 1px) 12px;min-height:calc(calc(16px + 8px) + (calc(8px) * 2))}.bcm-button__container-size-large .bcm-button__container-icon{min-height:calc(16px + 8px)}";
 
 const BcmButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/chip.js

@@ -6,9 +6,10 @@ import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/
 import { c as classnames } from './index2.js';
 import { C as ColorHelper } from './color-helper.js';
 import { G as Generate } from './generate.js';
-import { d as defineCustomElement$7 } from './avatar.js';
-import { d as defineCustomElement$6 } from './badge.js';
-import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$8 } from './avatar.js';
+import { d as defineCustomElement$7 } from './badge.js';
+import { d as defineCustomElement$6 } from './icon.js';
+import { d as defineCustomElement$5 } from './label.js';
 import { d as defineCustomElement$4 } from './list.js';
 import { d as defineCustomElement$3 } from './rc-overflow.js';
 import { d as defineCustomElement$2 } from './search.js';
@@ -101,7 +102,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-chip", "bcm-avatar", "bcm-badge", "bcm-icon", "bcm-list", "bcm-rc-overflow", "bcm-search", "bcm-tooltip"];
+  const components = ["bcm-chip", "bcm-avatar", "bcm-badge", "bcm-icon", "bcm-label", "bcm-list", "bcm-rc-overflow", "bcm-search", "bcm-tooltip"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-chip":
       if (!customElements.get(tagName)) {
@@ -110,15 +111,20 @@ function defineCustomElement() {
       break;
     case "bcm-avatar":
       if (!customElements.get(tagName)) {
-        defineCustomElement$7();
+        defineCustomElement$8();
       }
       break;
     case "bcm-badge":
       if (!customElements.get(tagName)) {
-        defineCustomElement$6();
+        defineCustomElement$7();
       }
       break;
     case "bcm-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$6();
+      }
+      break;
+    case "bcm-label":
       if (!customElements.get(tagName)) {
         defineCustomElement$5();
       }

package/dist/components/color-helper.js

@@ -7,6 +7,26 @@ import { e as extractColor } from './utils.js';
 import { c as colors } from './colors2.js';
 
 class ColorHelper {
+  /**
+   * @param color - color string in format of `colorName-tone` or `colorName` (default tone is 600)
+   * @return `{ tone: number, colorName: string }`
+   * @description
+   * Parse color string to get color name and tone
+   * @example
+   * parseColor("red-500") // { tone: 500, colorName: "red" }
+   * parseColor("red") // { tone: 600, colorName: "red" }
+   * parseColor(null) // { tone: null, colorName: null }
+   */
+  static parseColor(color, defaultTone = 600) {
+    if (!color)
+      return { tone: null, colorName: null };
+    const [colorName, tone] = color.split("-");
+    const parsedTone = tone ? parseInt(tone) : defaultTone;
+    return {
+      tone: parsedTone,
+      colorName,
+    };
+  }
 }
 ColorHelper.isHex = (str) => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str);
 ColorHelper.isRgb = (str) => /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(str);
@@ -43,7 +63,7 @@ ColorHelper.reverseColor = (color) => {
     const g = parseInt(hexColor.substring(3, 5), 16);
     const b = parseInt(hexColor.substring(5, 7), 16);
     const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 200 ? '#475569' : '#f8fafc';
+    return yiq >= 200 ? '#334155' : '#fff';
   }
 };
 ColorHelper.dsColor = (color) => 'var(--bcm-new-ds-color-' + color + ')';
@@ -80,5 +100,11 @@ ColorHelper.twColor = (colorName, tone = '500') => {
   return 'blue-500';
 };
 ColorHelper.twColorReverse = (color) => ColorHelper.reverseColor(ColorHelper.getTwColorToHex(color));
+/**
+ * @param object
+ * @return string
+ * @description Convert style object to string
+ */
+ColorHelper.generateStyleString = (obj) => Object.keys(obj).reduce((acc, key) => { return `${acc}${key}:${obj[key]};`; }, "");
 
 export { ColorHelper as C };

package/dist/components/colors2.js

@@ -2,7 +2,7 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { c as createCommonjsModule, g as getDefaultExportFromCjs } from './_commonjsHelpers.js';
+import { c as createCommonjsModule, b as getDefaultExportFromCjs } from './_commonjsHelpers.js';
 
 var x=String;
 var create=function() {return {isColorSupported:false,reset:x,bold:x,dim:x,italic:x,underline:x,inverse:x,hidden:x,strikethrough:x,black:x,red:x,green:x,yellow:x,blue:x,magenta:x,cyan:x,white:x,gray:x,bgBlack:x,bgRed:x,bgGreen:x,bgYellow:x,bgBlue:x,bgMagenta:x,bgCyan:x,bgWhite:x}};