bromcom-ui 2.8.1-rc.3 → 2.8.1-rc.5

package/dist/collection/components/molecules/stepper/stepper.css

@@ -150,6 +150,7 @@
   align-items: center;
   justify-content: center;
   position: relative;
+  min-width: 150px;
 }
 .bcm-stepper__header-item--container {
   display: flex;
@@ -162,12 +163,14 @@
   position: relative;
   width: 32px;
   height: 32px;
+  min-width: 32px;
+  min-height: 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   border-radius: 50%;
-  background-color: var(--bcm-color-prime-blue-6);
-  color: var(--bcm-color-grey-1);
+  background-color: var(--bcm-new-ds-color-blue-600);
+  color: var(--bcm-new-ds-color-slate-700);
   line-height: 1;
   margin-bottom: 16px;
   user-select: none;
@@ -176,7 +179,7 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  border: 2px solid var(--bcm-color-prime-blue-6);
+  border: 2px solid var(--bcm-new-ds-color-blue-600);
   border-color: transparent;
   position: absolute;
   z-index: 0;
@@ -185,7 +188,16 @@
   left: -6px;
 }
 .bcm-stepper__header-item-title {
-  color: var(--bcm-color-grey-8);
+  color: var(--bcm-new-ds-color-slate-700);
+}
+.bcm-stepper__header-item-description {
+  color: var(--bcm-new-ds-color-slate-600);
+}
+.bcm-stepper__header-item--disabled .bcm-stepper__header-item-title {
+  color: var(--bcm-new-ds-color-slate-500);
+}
+.bcm-stepper__header-item--disabled .bcm-stepper__header-item-description {
+  color: var(--bcm-new-ds-color-slate-500);
 }
 .bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
@@ -198,15 +210,17 @@
   position: absolute;
   width: calc(50% - 24px);
   height: 2px;
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
   top: 16px;
   box-sizing: content-box;
 }
 .bcm-stepper__header-item::after {
   right: 0;
+  border-radius: 3px 0 0 3px;
 }
 .bcm-stepper__header-item::before {
   left: 0;
+  border-radius: 0 3px 3px 0;
 }
 .bcm-stepper__header-item:first-of-type::before {
   display: none;
@@ -216,7 +230,7 @@
 }
 .bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before {
   content: "";
-  border: 2px solid var(--bcm-color-prime-blue-6);
+  border: 2px solid var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--active .bcm-stepper__header-item-title {
   font-weight: 500;
@@ -225,134 +239,152 @@
   width: 100%;
   flex: 1;
   height: 2px;
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
   margin-top: 16px;
 }
 .bcm-stepper__header-line--warning {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-line--warning + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-item--warning::after {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-item--warning .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-warmyellow-6);
+  background-color: var(--bcm-new-ds-color-amber-600);
 }
 .bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-warmyellow-6);
+  border-color: var(--bcm-new-ds-color-amber-600);
+}
+.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-warmyellow-5);
+  background-color: var(--bcm-new-ds-color-amber-700);
 }
 .bcm-stepper__header-line--success {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-line--success + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-item--success::after {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-item--success .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-green-6);
+  background-color: var(--bcm-new-ds-color-emerald-600);
 }
 .bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-green-6);
+  border-color: var(--bcm-new-ds-color-emerald-600);
+}
+.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-green-5);
+  background-color: var(--bcm-new-ds-color-emerald-700);
 }
 .bcm-stepper__header-line--error {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-line--error + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--error::after {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--error .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-red-6);
+  background-color: var(--bcm-new-ds-color-red-600);
 }
 .bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-red-6);
+  border-color: var(--bcm-new-ds-color-red-600);
+}
+.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-red-5);
+  background-color: var(--bcm-new-ds-color-red-700);
 }
 .bcm-stepper__header-line--default {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-line--default + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--default::after {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--default .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-prime-blue-6);
+  border-color: var(--bcm-new-ds-color-blue-600);
+}
+.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-5);
+  background-color: var(--bcm-new-ds-color-blue-700);
 }
 .bcm-stepper__header-line--loading {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-line--loading + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--loading::after {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--loading .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-6);
+  background-color: var(--bcm-new-ds-color-blue-600);
 }
 .bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-prime-blue-6);
+  border-color: var(--bcm-new-ds-color-blue-600);
+}
+.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-prime-blue-5);
+  background-color: var(--bcm-new-ds-color-blue-700);
 }
 .bcm-stepper__header-line--disabled {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-line--disabled + .bcm-stepper__header-item::before {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--disabled::after {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-grey-6);
+  background-color: var(--bcm-new-ds-color-slate-300);
 }
 .bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before {
-  border-color: var(--bcm-color-grey-6);
+  border-color: var(--bcm-new-ds-color-slate-300);
+}
+.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon {
+  color: white;
 }
 .bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover {
   cursor: pointer;
 }
 .bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon {
-  background-color: var(--bcm-color-grey-5);
+  background-color: var(--bcm-new-ds-color-slate-400);
 }
 .bcm-stepper__header-item--disabled {
   cursor: not-allowed;

package/dist/collection/components/molecules/stepper/stepper.js

@@ -156,16 +156,31 @@ export class BcmStepper {
   getItems() {
     return snq(() => { var _a; return (_a = stepperStates.getValue(this.stepperId).steps) === null || _a === void 0 ? void 0 : _a.filter(item => !item.headerHidden); }, []);
   }
+  headerClick(index) {
+    this.bcmStepperBeforeChange.emit({
+      current: this.getActiveIndex() - 1,
+      next: index,
+    });
+  }
+  async handleBcmStepBeforeChange(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.target === this.el) {
+      const { next } = e.detail;
+      this.next(next);
+    }
+  }
   render() {
     const { hidden, direction, linear, size } = this;
-    const hostClasses = cs("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
+    const hostClasses = cs("bcm-ui-element tw-font-sans tw-antialiased", "bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
       "bcm-stepper__linear": linear,
       hidden,
     });
     const lineClasses = item => cs("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
     const items = this.getItems();
     return (h(Host, { class: hostClasses }, h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, h("slot", null)), h("main", null, h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
-      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.next(step - 1) })),
+      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.headerClick(step - 1) })),
       items.length > index + 1 && h("div", { class: lineClasses(item) }),
     ])), h("section", { class: "bcm-stepper__body" }, this.data && this.data.length > 0 ? items === null || items === void 0 ? void 0 : items.map(item => h("bcm-step", Object.assign({}, item))) : h("slot", null)))));
   }
@@ -386,6 +401,21 @@ export class BcmStepper {
           "resolved": "any",
           "references": {}
         }
+      }, {
+        "method": "bcmStepperBeforeChange",
+        "name": "bcm-step-before-change",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
       }];
   }
   static get methods() {
@@ -508,6 +538,12 @@ export class BcmStepper {
         "target": undefined,
         "capture": false,
         "passive": false
+      }, {
+        "name": "bcm-step-before-change",
+        "method": "handleBcmStepBeforeChange",
+        "target": "document",
+        "capture": false,
+        "passive": false
       }];
   }
 }

package/dist/collection/components/organism/datetime-picker/datetime-picker.js

@@ -795,7 +795,7 @@ export class BcmDatetimePicker {
           if (text) {
             this.setError(true, (this.type === Types.datetime && 'invalid date or time') ||
               (this.type === Types.range && 'invalid date range') ||
-              (this.type === Types.date && 'invalid date') ||
+              (this.type === Types.date && 'The selected date is not allowed.') ||
               (this.type === Types.time && 'invalid time'));
           }
           this.setValue(true);
@@ -1355,14 +1355,11 @@ export class BcmDatetimePicker {
     });
     const clockIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>`;
     const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
+    const errorIcon = `<svg style="fill: #ef4444; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
     const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
     return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
       // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
-      noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("bcm-tooltip", { placement: "top", message: this.errorText, trigger: "hover" }, h("bcm-icon", {
-      // slot="suffix"
-      // title={this.errorText}
-      icon: "far fa-exclamation-circle"
-    })))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
+      noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
         'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
         'not-this-month': !day.thisMonth,
         'is-weekend': day.isWeekend,

package/dist/components/bcm-dropdown.js

@@ -57,6 +57,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.minHeight = '50px';
     this.stopDeepClean = false;
     this.selectable = true;
+    this.gap = '4px';
     this.color = undefined;
     this.activeItem = null;
     this.data = [];
@@ -105,7 +106,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       'bcm-dropdown__icon--open': isOpen,
     });
     const dropdownIcon = (h("span", { class: iconClasses }, h("bcm-icon", { icon: this.dropdownIcon })));
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e) }))));
+    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), this.noStyle && h("slot", null), !this.noStyle && (h("bcm-button", Object.assign({ class: "main-button", id: `${this._id}-button` }, attributes, (icon && { icon }), (href && type === 'split' && { href }), (target && type === 'split' && { target }), (fullWidth && { fullWidth })), h("slot", null), type === 'dropdown' && dropdownIcon)), !this.noStyle && type === 'split' && (h("bcm-button", Object.assign({ id: `${this._id}-button-split`, class: "split-button" }, attributes), dropdownIcon)), h("bcm-linked", { id: `${this.menuId}`, "target-id": `${this._id}-button${type === 'split' ? '-split' : ''}`, placement: this.placement || (type === 'dropdown' ? 'bottom-start' : 'bottom-end'), "max-height": this.maxHeight, "min-height": this.minHeight, height: this.height, "on-bcm-open": e => { var _a; return ((_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.id) == this.menuId && (this.isOpen = e.detail); } }, this.data && this.data.length > 0 && h("bcm-menu", { data: this.data, selectable: this.selectable, "on-bcm-click": e => this.bcmClick.emit(e.detail), "onBcm-menu-change": e => this.setActiveAttribute(e), gap: this.gap, dropdown: true }))));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -139,6 +140,7 @@ const BcmDropdown$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "minHeight": [1, "min-height"],
     "stopDeepClean": [4, "stop-deep-clean"],
     "selectable": [4],
+    "gap": [1],
     "color": [8],
     "data": [1032],
     "activeItem": [32],

package/dist/components/bcm-stepper.js

@@ -37,13 +37,14 @@ const StepperHeaderTemplate = ({ _title, description, status, valid, index, load
       h("div", { class: "bcm-stepper__header-item-description size-1" }, description))));
 };
 
-const stepperCss = "@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-stepper{display:block;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-color-prime-blue-6);color:var(--bcm-color-grey-1);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-color-prime-blue-6);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-color-grey-8)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-7)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-color-prime-blue-6);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0}.bcm-stepper__header-item::before{left:0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-color-prime-blue-6);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-warmyellow-6)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-warmyellow-5)}.bcm-stepper__header-line--success{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-green-6)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-green-5)}.bcm-stepper__header-line--error{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-color-red-6)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-red-6)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-red-5)}.bcm-stepper__header-line--default{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-5)}.bcm-stepper__header-line--loading{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-prime-blue-6)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-5)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-color-grey-6)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-grey-5)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
+const stepperCss = "@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-stepper{display:block;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400}.bcm-stepper__header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;padding:16px}.bcm-stepper__header *,.bcm-stepper__header ::after,.bcm-stepper__header ::before{box-sizing:content-box}.bcm-stepper__header-item{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;min-width:150px}.bcm-stepper__header-item--container{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.bcm-stepper__header-item-icon{position:relative;width:32px;height:32px;min-width:32px;min-height:32px;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:var(--bcm-new-ds-color-blue-600);color:var(--bcm-new-ds-color-slate-700);line-height:1;margin-bottom:16px;user-select:none}.bcm-stepper__header-item-icon::before{width:40px;height:40px;border-radius:50%;border:2px solid var(--bcm-new-ds-color-blue-600);border-color:transparent;position:absolute;z-index:0;user-select:none;top:-6px;left:-6px}.bcm-stepper__header-item-title{color:var(--bcm-new-ds-color-slate-700)}.bcm-stepper__header-item-description{color:var(--bcm-new-ds-color-slate-600)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-title{color:var(--bcm-new-ds-color-slate-500)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-description{color:var(--bcm-new-ds-color-slate-500)}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-color-prime-blue-7)}.bcm-stepper__header-item::before,.bcm-stepper__header-item::after{content:\"\";position:absolute;width:calc(50% - 24px);height:2px;background-color:var(--bcm-new-ds-color-blue-600);top:16px;box-sizing:content-box}.bcm-stepper__header-item::after{right:0;border-radius:3px 0 0 3px}.bcm-stepper__header-item::before{left:0;border-radius:0 3px 3px 0}.bcm-stepper__header-item:first-of-type::before{display:none}.bcm-stepper__header-item:last-of-type::after{display:none}.bcm-stepper__header-item--active .bcm-stepper__header-item-icon::before{content:\"\";border:2px solid var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--active .bcm-stepper__header-item-title{font-weight:500}.bcm-stepper__header-line{width:100%;flex:1;height:2px;background-color:var(--bcm-new-ds-color-blue-600);margin-top:16px}.bcm-stepper__header-line--warning{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-line--warning+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning::after{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-amber-600)}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--warning:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-amber-700)}.bcm-stepper__header-line--success{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-line--success+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success::after{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-emerald-600)}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--success:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-emerald-700)}.bcm-stepper__header-line--error{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--error+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-red-600)}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--error:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-red-700)}.bcm-stepper__header-line--default{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--default+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--default::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--default .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--default:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--loading{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-line--loading+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading::after{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-blue-600)}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--loading:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-blue-700)}.bcm-stepper__header-line--disabled{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-line--disabled+.bcm-stepper__header-item::before{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled::after{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled .bcm-stepper__header-item-icon::before{border-color:var(--bcm-new-ds-color-slate-300)}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled) .bcm-stepper__header-item-icon{color:white}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover{cursor:pointer}.bcm-stepper__header-item--disabled:not(.bcm-stepper__header-item--disabled):hover .bcm-stepper__header-item-icon{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-stepper__header-item--disabled{cursor:not-allowed}.bcm-stepper__header-item--disabled.bcm-stepper__header-item--container{pointer-events:none}.bcm-stepper__step{display:none}.bcm-stepper__step-active{display:block}";
 
 const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this.bcmStepChange = createEvent(this, "bcm-step-change", 7);
+    this.bcmStepperBeforeChange = createEvent(this, "bcm-step-before-change", 7);
     this.hidden = false;
     this._id = Generate.UID();
     this.direction = Bcm.Direction.horizontal;
@@ -192,16 +193,31 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
   getItems() {
     return snq(() => { var _a; return (_a = stepperStates.getValue(this.stepperId).steps) === null || _a === void 0 ? void 0 : _a.filter(item => !item.headerHidden); }, []);
   }
+  headerClick(index) {
+    this.bcmStepperBeforeChange.emit({
+      current: this.getActiveIndex() - 1,
+      next: index,
+    });
+  }
+  async handleBcmStepBeforeChange(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
+    if (e.target === this.el) {
+      const { next } = e.detail;
+      this.next(next);
+    }
+  }
   render() {
     const { hidden, direction, linear, size } = this;
-    const hostClasses = classnames("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
+    const hostClasses = classnames("bcm-ui-element tw-font-sans tw-antialiased", "bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
       "bcm-stepper__linear": linear,
       hidden,
     });
     const lineClasses = item => classnames("bcm-stepper__header-line", `bcm-stepper__header-line--${(item === null || item === void 0 ? void 0 : item.disabled) ? "disabled" : (item === null || item === void 0 ? void 0 : item.status) === "error" ? "default" : item === null || item === void 0 ? void 0 : item.status}`);
     const items = this.getItems();
     return (h(Host, { class: hostClasses }, h("span", { hidden: true, id: `bcm-stepper__steps-${this._id}` }, h("slot", null)), h("main", null, h("header", { class: "bcm-stepper__header" }, items === null || items === void 0 ? void 0 : items.map((item, index) => [
-      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.next(step - 1) })),
+      h(StepperHeaderTemplate, Object.assign({}, item, { stepChange: step => this.headerClick(step - 1) })),
       items.length > index + 1 && h("div", { class: lineClasses(item) }),
     ])), h("section", { class: "bcm-stepper__body" }, this.data && this.data.length > 0 ? items === null || items === void 0 ? void 0 : items.map(item => h("bcm-step", Object.assign({}, item))) : h("slot", null)))));
   }
@@ -227,7 +243,7 @@ const BcmStepper$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     "reset": [64],
     "getCurrentStep": [64],
     "getSteps": [64]
-  }, [[0, "bcm-change-hidden", "handleChangeBcmHidden"]]]);
+  }, [[0, "bcm-change-hidden", "handleChangeBcmHidden"], [4, "bcm-step-before-change", "handleBcmStepBeforeChange"]]]);
 function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;

package/dist/components/datetime-picker.js

@@ -843,7 +843,7 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
           if (text) {
             this.setError(true, (this.type === Types.datetime && 'invalid date or time') ||
               (this.type === Types.range && 'invalid date range') ||
-              (this.type === Types.date && 'invalid date') ||
+              (this.type === Types.date && 'The selected date is not allowed.') ||
               (this.type === Types.time && 'invalid time'));
           }
           this.setValue(true);
@@ -1401,14 +1401,11 @@ const BcmDatetimePicker = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     });
     const clockIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z"/></svg>`;
     const calendarIcon = `<svg style="fill: #595959; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>`;
+    const errorIcon = `<svg style="fill: #ef4444; width: 14px; height: 14px;"  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm42-104c0 23.2-18.8 42-42 42s-42-18.8-42-42 18.8-42 42-42 42 18.8 42 42zm-81.4-211.4l6.8 136c.3 6.4 5.6 11.4 12 11.4h41.2c6.4 0 11.7-5.1 12-11.4l6.8-136c.3-6.9-5.1-12.6-12-12.6h-54.8c-6.9 0-12.4 5.7-12 12.6z"/></svg>`;
     const inputIcon = this.type == "time" ? clockIcon : calendarIcon;
     return (h(Host, { class: hostClasses, "bcm-internal-id": this.inputId }, this.label && (h("div", { class: "picker-label", onClick: () => this.openToggle() }, h(LabelTemplate, { size: "medium", type: this.captionType, value: this.label, required: this.required, htmlFor: this._id }))), h("bcm-old-input", { ref: el => (this.inputElement = el), placeholder: this.placeholder || 'Select ' + (this.type === Types.datetime ? 'date and time' : '') + (this.type === Types.date ? 'date' : '') + (this.type === Types.time ? 'time' : '') + (this.type === Types.range ? 'date range' : ''), value: this.valueText, required: this.required, fullWidth: this.fullWidth, disabled: this.disabled, name: this.name, id: this.inputId, clearable: this.clearable, onClick: () => this.openPicker(), disableWatchValue: true, "on-bcm-clear": () => this.handleInputClear(), "on-bcm-change": (e) => this.handleInputChange(e),
       // on-bcm-input={(e: CustomEvent) => this.handleInputInput(e.detail)}
-      noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("bcm-tooltip", { placement: "top", message: this.errorText, trigger: "hover" }, h("bcm-icon", {
-      // slot="suffix"
-      // title={this.errorText}
-      icon: "far fa-exclamation-circle"
-    })))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
+      noCaption: this.noCaption, captionError: this.captionError, caption: this.caption, captionType: this.captionType }, this.error && (h("span", { slot: "suffix" }, h("span", { id: "error-icon", class: toggleClasses, innerHTML: errorIcon, title: this.errorText }))), h("span", { slot: "suffix", onClick: () => this.openPicker() }, h("span", { id: "calender-icon", class: toggleClasses, innerHTML: inputIcon }))), h("div", { id: "picker-vp-" + this._id, class: datetimePickerClasses, onWheel: (e) => this.handleWheel(e) }, h("div", { class: "modules" }, this.hasDateModule && (h("div", { class: "date-container" }, h("div", { class: "bcm-datetime-picker__header" }, h("span", null), h("div", { class: "month-year" }, h("button", { onClick: () => this.getPrevMonth() }, h("bcm-icon", { icon: "far fa-chevron-left" })), h("div", { class: "month-year-wrapper" }, h("span", { class: "month" }, this.getMonthText()), ",", h("span", { class: "year" }, this.date.getFullYear())), h("button", { onClick: () => this.getNextMonth() }, h("bcm-icon", { icon: "far fa-chevron-right" }))), h("span", { class: "today", onClick: () => this.setDateToday() }, "Today")), h("div", { class: "bcm-datetime-picker__content" }, h("div", { class: "years", ref: el => (this.yearsWrapperElement = el) }, h("div", { class: "items", ref: el => (this.yearsElement = el) }, this.years.map((year, idx) => h("span", { onClick: () => this.yearClick(idx) }, year))), h("div", { class: "select-strip", ref: el => (this.yearsStripElement = el) })), h("div", { class: "days" }, h("div", { class: "day-labels" }, h("span", null, "Mo"), h("span", null, "Tu"), h("span", null, "We"), h("span", null, "Th"), h("span", null, "Fr"), h("span", null, "Sa"), h("span", null, "Su")), h("div", { class: dayNumbersClasses }, this.dayNumbers.map(day => (h("span", { class: {
         'is-disabled-date': (this.type === Types.date || this.type === Types.datetime) && this.isDisabledDate(day.date),
         'not-this-month': !day.thisMonth,
         'is-weekend': day.isWeekend,

package/dist/components/generate.js

@@ -25,7 +25,7 @@ var TypeProps;
   TypeProps["basic"] = "basic";
 })(TypeProps || (TypeProps = {}));
 
-const version = "2.8.1-rc.3";
+const version = "2.8.1-rc.5";
 
 function snq(callback, defaultValue) {
     try {