bromcom-ui 2.7.38-rc.1 → 2.7.38-rc.10

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

@@ -125,7 +125,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -428,7 +430,9 @@
   min-height: calc(14px + 8px);
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -776,7 +780,9 @@
   margin: 0;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -1065,7 +1071,7 @@
   cursor: not-allowed;
 }
 .bcm-input__container.disabled .bcm-input-element {
-  color: var(--bcm-new-ds-color-slate-300);
+  color: var(--bcm-new-ds-color-slate-500);
 }
 .bcm-input__container.readonly {
   background-color: var(--bcm-new-ds-color-slate-50);
@@ -1165,6 +1171,7 @@
 }
 .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) {
@@ -1172,11 +1179,11 @@
   align-items: center;
   justify-content: center;
   cursor: default;
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix:not(:empty) .unit-prefix,
 .bcm-input__container .input-suffix:not(:empty) .unit-prefix {
-  color: var(--bcm-color-grey-8);
+  color: #64748a;
 }
 .bcm-input__container .input-prefix-button:not(:empty),
 .bcm-input__container .input-suffix-button:not(:empty) {

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

@@ -48,7 +48,7 @@ export class BcmSearch {
   }
   async initState() {
     await searchState.setValue({
-      id: this._id,
+      id: this._id + "-input",
       dataSource: this.data,
       searchIsOnlyChilds: this.searchIsOnlyChilds,
     });

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

@@ -12,9 +12,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         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;
 };
-import { h } from '@stencil/core';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import { Generate } from '../../../helper/generate';
+import { h } from "@stencil/core";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { Generate } from "../../../helper/generate";
 export class BcmSkeleton {
   constructor() {
     this._id = Generate.UID();
@@ -24,9 +24,9 @@ export class BcmSkeleton {
     var _a;
     const parentElement = (_a = this.el) === null || _a === void 0 ? void 0 : _a.parentElement;
     if (parentElement) {
-      const hidden = document.createElement('span');
-      hidden.setAttribute('id', `${this._id}-span`);
-      hidden.classList.add('tw-hidden');
+      const hidden = document.createElement("span");
+      hidden.setAttribute("id", `${this._id}-span`);
+      hidden.classList.add("tw-hidden");
       hidden.innerHTML = `<slot />`;
       parentElement.appendChild(hidden);
       if (parentElement.isConnected) {
@@ -37,9 +37,9 @@ export class BcmSkeleton {
   }
   render() {
     const SkeletonAnimate = () => {
-      return (h("div", { class: "tw-border tw-border-blue-300 tw-shadow tw-rounded-md tw-p-4 tw-max-w-sm tw-w-full tw-mx-auto" }, h("span", { class: "tw-hidden" }, h("slot", null)), h("div", { class: "tw-animate-pulse tw-flex tw-space-x-4" }, h("div", { class: "tw-rounded-full tw-bg-slate-200 tw-h-10 tw-w-10" }), h("div", { class: "tw-flex-1 tw-space-y-6 tw-py-1" }, h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded" }), h("div", { class: "tw-space-y-3" }, h("div", { class: "tw-grid tw-grid-cols-3 tw-gap-4" }, h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded tw-col-span-2" }), h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded tw-col-span-1" })), h("div", { class: "tw-h-2 tw-bg-slate-200 tw-rounded" }))))));
+      return (h("div", { class: "tw-mx-auto tw-w-full tw-max-w-sm tw-rounded-md tw-border tw-border-blue-300 tw-p-4 tw-shadow" }, h("span", { class: "tw-hidden" }, h("slot", null)), h("div", { class: "tw-flex tw-animate-pulse tw-space-x-4" }, h("div", { class: "tw-h-10 tw-w-10 tw-rounded-full tw-bg-slate-200" }), h("div", { class: "tw-flex-1 tw-space-y-6 tw-py-1" }, h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-space-y-3" }, h("div", { class: "tw-grid tw-grid-cols-3 tw-gap-4" }, h("div", { class: "tw-col-span-2 tw-h-2 tw-rounded tw-bg-slate-200" }), h("div", { class: "tw-col-span-1 tw-h-2 tw-rounded tw-bg-slate-200" })), h("div", { class: "tw-h-2 tw-rounded tw-bg-slate-200" }))))));
     };
-    return (this.loading ? h(SkeletonAnimate, null) : h("slot", null));
+    return this.loading ? h(SkeletonAnimate, null) : h("slot", null);
   }
   static get is() { return "bcm-skeleton"; }
   static get properties() {

package/dist/collection/components/molecules/states/search.states.js

@@ -2,10 +2,10 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { createStore } from '@stencil/store';
-import snq from 'snq';
-import { Generate } from '../../../helper/generate';
-import { StringHelper } from '../../../helper/string-helper';
+import { createStore } from "@stencil/store";
+import snq from "snq";
+import { Generate } from "../../../helper/generate";
+import { StringHelper } from "../../../helper/string-helper";
 const { state } = createStore({
   value: new Map(),
 });
@@ -83,7 +83,12 @@ const searchData = (id, searchText, items) => {
     //     }
     // })
   }
-  return { result: Generate.flatArray(results[0].result), matching: results[0].matching, parentIndex: results[0].parentIndex, nestedResult: results[0].nestedResult };
+  return {
+    result: snq(() => Generate.flatArray(results[0].result), []),
+    matching: snq(() => results[0].matching, []),
+    parentIndex: snq(() => results[0].parentIndex, []),
+    nestedResult: snq(() => results[0].nestedResult, []),
+  };
 };
 const nestedSearch = (id, items, searchText) => {
   let matching = [];
@@ -94,8 +99,8 @@ const nestedSearch = (id, items, searchText) => {
   if (items && items.length > 0) {
     items.forEach(child => {
       let isChild = searchIsOnlyChilds && child.parentId !== null;
-      let isMatching = StringHelper.slugify(child.text).indexOf(StringHelper.slugify(searchText)) > -1
-        || (child.keywords && StringHelper.slugify(child.keywords).indexOf(StringHelper.slugify(searchText)) > -1);
+      let isMatching = StringHelper.slugify(child.text).indexOf(StringHelper.slugify(searchText)) > -1 ||
+        (child.keywords && StringHelper.slugify(child.keywords).indexOf(StringHelper.slugify(searchText)) > -1);
       if (isMatching && (!searchIsOnlyChilds || (searchIsOnlyChilds && isChild))) {
         result.push(child.id);
         matching.push(child.id);

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

@@ -5,6 +5,7 @@
 import { createStore } from '@stencil/store';
 import snq from 'snq';
 import { Generate } from '../../../helper/generate';
+import { forceUpdate } from '@stencil/core';
 const { state } = createStore({
   value: new Map(),
   setData: {},
@@ -16,7 +17,8 @@ const setValue = val => {
         .filter(data => !data.hidden)
         .map((item, index) => ({
         id: item.id || Generate.UID(),
-        title: item.title || item._title || 'Step ' + (index + 1),
+        title: item.title || item._title,
+        _title: item.title || item._title || 'Step ' + (index + 1),
         description: item.description || '',
         status: item.status || 'default',
         disabled: val.linear ? (index == 0 ? false : true) : item.disabled || false,
@@ -46,14 +48,14 @@ const changeStepStatus = (id, stepId, status) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { status: step.id === stepId ? status : step.status })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const changeStepDisabled = (id, stepId, disabled) => {
   const value = state.value.get(id);
   if (value && value.steps) {
     value.steps = value.steps.map(step => (Object.assign(Object.assign({}, step), { disabled: step.id === stepId ? disabled : step.disabled })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const setActiveIndex = (id, index) => state.value.get(id).active = index;
@@ -62,7 +64,7 @@ const stepperReset = id => {
   if (value) {
     value.active = 1;
     value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === 0, status: 'default', disabled: i !== 0, loading: false })));
-    value.el.tick = Generate.UID();
+    forceUpdate(value.el);
   }
 };
 const getValue = id => snq(() => state.value.get(id), {});

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

@@ -46,14 +46,14 @@ export class BcmStep {
     if (this.active) {
       const stepper = this.getStepper();
       if (stepper) {
-        stepperStates.changeStepDisabled(stepper.id, this._id, false);
+        stepperStates.changeStepDisabled(stepper.stepperId, this._id, false);
       }
     }
   }
   statusChange() {
     const stepper = this.getStepper();
     if (stepper) {
-      stepperStates.changeStepStatus(stepper.id, this._id, this.status);
+      stepperStates.changeStepStatus(stepper.stepperId, this._id, this.status);
     }
   }
   hiddenChange(newValue, oldValue) {
@@ -65,7 +65,7 @@ export class BcmStep {
   disabledChange(newValue, _) {
     const stepper = this.getStepper();
     if (stepper) {
-      stepperStates.changeStepDisabled(stepper.id, this._id, newValue);
+      stepperStates.changeStepDisabled(stepper.stepperId, this._id, newValue);
     }
   }
   render() {

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

@@ -123,7 +123,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -429,7 +431,8 @@
   border: 2px solid var(--bcm-color-prime-blue-6);
   border-color: transparent;
   position: absolute;
-  z-index: -1;
+  z-index: 0;
+  user-select: none;
   top: -6px;
   left: -6px;
 }

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

@@ -12,7 +12,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         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;
 };
-import { h, Host } from '@stencil/core';
+import { forceUpdate, h, Host } from '@stencil/core';
 import cs from 'classnames';
 import snq from 'snq';
 import { IsLoad } from '../../../decorators/is-load-decorator';
@@ -30,6 +30,7 @@ export class BcmStepper {
     this.size = Bcm.Size.medium;
     this.icon = false;
     this.active = 1;
+    this.stepperId = Generate.UID();
     this.data = [];
     this.tick = {};
   }
@@ -40,13 +41,14 @@ export class BcmStepper {
     this.initState();
   }
   disconnectedCallback() {
-    stepperStates.removeState(this._id);
+    // stepperStates.removeState(this.stepperId);
+    this.reset();
   }
   async initState() {
-    const { _id, data, direction, linear, size, icon, active, el } = this;
+    const { stepperId, data, direction, linear, size, icon, active, el } = this;
     const steps = data.length > 0 ? data : this.getSlotElements();
     await stepperStates.setValue({
-      id: _id,
+      id: stepperId,
       el,
       direction,
       linear,
@@ -66,7 +68,7 @@ export class BcmStepper {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          Generate.setAttributes(item, Object.assign({ title: '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
+          Generate.setAttributes(item, Object.assign({ title: '', _title: step.title || step._title || '', status: step.status || 'default', disabled: step.disabled || false, valid: step.valid || true, loading: step.loading || false, index: step.index || index, active: step.active || false, innerHtml: step.innerHtml || '' }, (item.hidden == true && { headerHidden: true })));
           if ((item.hidden = false)) {
             item.removeAttribute('hidden');
           }
@@ -81,17 +83,17 @@ export class BcmStepper {
     this.initState();
   }
   getActiveIndex() {
-    return stepperStates.getActiveIndex(this._id);
+    return stepperStates.getActiveIndex(this.stepperId);
   }
   getSlotElements() {
     return snq(() => getChildElements(this.el, 'bcm-step'), []);
   }
   async onStepChange(index) {
     if (index) {
-      stepperStates.changeActiveStep(this._id, index);
+      stepperStates.changeActiveStep(this.stepperId, index);
       this.bcmStepChange.emit(index);
     }
-    this.markForCheck();
+    forceUpdate(this.el);
     return Promise.resolve(index);
   }
   async prev() {
@@ -107,6 +109,7 @@ export class BcmStepper {
         await this.onStepChange(index);
       }
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
@@ -122,6 +125,7 @@ export class BcmStepper {
     else {
       step.status = 'error';
     }
+    forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
   }
   async setActive(index) {
@@ -141,23 +145,24 @@ export class BcmStepper {
       }
     }
     else {
-      stepperStates.setActiveIndex(this._id, index);
+      stepperStates.setActiveIndex(this.stepperId, index);
       await this.next(index - 1);
     }
   }
   async reset() {
     await this.onStepChange(1);
-    stepperStates.stepperReset(this._id);
+    stepperStates.stepperReset(this.stepperId);
     return Promise.resolve(this.getActiveIndex());
   }
   async getCurrentStep() {
-    return snq(() => getChildElements(this.el, 'bcm-step[active="true"]')[0], null);
+    var _a;
+    return snq(() => this.getItems().filter(item => item.active == true)[0], (_a = this.getItems()[0]) !== null && _a !== void 0 ? _a : null);
   }
   async getSteps() {
     return Promise.resolve(this.getItems());
   }
   getItems() {
-    return snq(() => { var _a; return (_a = stepperStates.getValue(this._id).steps) === null || _a === void 0 ? void 0 : _a.filter(item => !item.headerHidden); }, []);
+    return snq(() => { var _a; return (_a = stepperStates.getValue(this.stepperId).steps) === null || _a === void 0 ? void 0 : _a.filter(item => !item.headerHidden); }, []);
   }
   render() {
     const { hidden, direction, linear, size } = this;
@@ -321,6 +326,24 @@ export class BcmStepper {
         "reflect": false,
         "defaultValue": "1"
       },
+      "stepperId": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "stepper-id",
+        "reflect": true,
+        "defaultValue": "Generate.UID()"
+      },
       "data": {
         "type": "unknown",
         "mutable": true,

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

@@ -125,7 +125,9 @@
   margin-right: 8px;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -428,7 +430,9 @@
   min-height: calc(14px + 8px);
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -776,7 +780,9 @@
   margin: 0;
 }
 
-:root {
+:root,
+::after,
+::before {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;

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

@@ -125,7 +125,7 @@ export class BcmSwitch {
     const bcmSwitchContainer = cs('bcm-switch__container', `bcm-switch__container--${this.labelPosition}`);
     const switchText = (text) => (size != Bcm.Size.small && (activeText || inactiveText)) && (h("span", { class: text + '-text' }, text == 'active' ? activeText : inactiveText));
     const switchIcon = (text) => (size != Bcm.Size.small && (activeIcon || inactiveIcon)) && h("bcm-icon", { icon: text == 'active' ? activeIcon : inactiveIcon, class: ' icon-' + text });
-    return (h(Host, { tabindex: "1", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-switch"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/tab-group/tab-group.js

@@ -12,12 +12,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
         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;
 };
-import { Host, h, forceUpdate } from '@stencil/core';
-import { IsLoad } from '../../../decorators/is-load-decorator';
-import { Generate } from '../../../helper/generate';
-import cs from 'classnames';
-import Bcm from '../../../models/bcm';
-import snq from 'snq';
+import { Host, h, forceUpdate } from "@stencil/core";
+import { IsLoad } from "../../../decorators/is-load-decorator";
+import { Generate } from "../../../helper/generate";
+import cs from "classnames";
+import Bcm from "../../../models/bcm";
+import snq from "snq";
 export class BcmTabGroup {
   constructor() {
     this.headerItems = [];
@@ -31,50 +31,50 @@ export class BcmTabGroup {
     if ((_a = this.tabItems()) === null || _a === void 0 ? void 0 : _a.length) {
       this.headerItems = [];
       this.tabItems().forEach((tab, index) => {
-        let itemActive = tab.hasAttribute('active') ? true : false;
-        let itemDisabled = tab.hasAttribute('disabled') ? true : false;
+        let itemActive = tab.hasAttribute("active") ? true : false;
+        let itemDisabled = tab.hasAttribute("disabled") ? true : false;
         let itemIndex = index + 1;
-        tab.setAttribute('index', `${itemIndex}`);
-        tab.classList.add('tw-w-full');
+        tab.setAttribute("index", `${itemIndex}`);
+        tab.classList.add("tw-w-full");
         let header = {
-          slot: 'header',
-          content: '',
+          slot: "header",
+          content: "",
           active: itemActive,
           disabled: itemDisabled,
-          index: itemIndex
+          index: itemIndex,
         };
-        const headerItemHeader = tab.querySelector('bcm-tab-item-header');
+        const headerItemHeader = tab.querySelector("bcm-tab-item-header");
         if (headerItemHeader) {
           header.content = headerItemHeader.innerHTML;
-          headerItemHeader.classList.add('tw-hidden');
+          headerItemHeader.classList.add("tw-hidden");
         }
         else {
-          header.content = tab.getAttribute('label') || `Tab ${itemIndex}`;
+          header.content = tab.getAttribute("label") || `Tab ${itemIndex}`;
         }
         if (itemActive) {
-          tab.setAttribute('active', '');
-          tab.classList.add('tw-block');
-          tab.classList.remove('tw-hidden');
+          tab.setAttribute("active", "");
+          tab.classList.add("tw-block");
+          tab.classList.remove("tw-hidden");
           this.active = itemIndex.toString();
         }
         else {
-          tab.removeAttribute('active');
-          tab.classList.remove('tw-block');
-          tab.classList.add('tw-hidden');
+          tab.removeAttribute("active");
+          tab.classList.remove("tw-block");
+          tab.classList.add("tw-hidden");
         }
         this.headerItems.push(header);
       });
       const isHasActiveTab = this.headerItems.some(tab => tab.active);
       if (!isHasActiveTab) {
         this.headerItems[0].active = true;
-        this.tabItems()[0].setAttribute('active', '');
-        this.tabItems()[0].classList.add('tw-block');
-        this.tabItems()[0].classList.remove('tw-hidden');
+        this.tabItems()[0].setAttribute("active", "");
+        this.tabItems()[0].classList.add("tw-block");
+        this.tabItems()[0].classList.remove("tw-hidden");
       }
     }
   }
   tabItems() {
-    return snq(() => this.el.querySelectorAll('bcm-tab-item'), []);
+    return snq(() => this.el.querySelectorAll("bcm-tab-item"), []);
   }
   handleTabClick(index) {
     this.headerItems.forEach(tab => {
@@ -82,19 +82,19 @@ export class BcmTabGroup {
     });
     this.headerItems[index - 1].active = true;
     this.active = index.toString();
-    const tabItems = this.el.querySelectorAll('bcm-tab-item');
+    const tabItems = this.el.querySelectorAll("bcm-tab-item");
     if (tabItems) {
       tabItems.forEach(tab => {
-        const tabIndex = tab.getAttribute('index');
+        const tabIndex = tab.getAttribute("index");
         if (tabIndex == this.active) {
-          tab.setAttribute('active', '');
-          tab.classList.add('tw-block');
-          tab.classList.remove('tw-hidden');
+          tab.setAttribute("active", "");
+          tab.classList.add("tw-block");
+          tab.classList.remove("tw-hidden");
         }
         else {
-          tab.removeAttribute('active');
-          tab.classList.remove('tw-block');
-          tab.classList.add('tw-hidden');
+          tab.removeAttribute("active");
+          tab.classList.remove("tw-block");
+          tab.classList.add("tw-hidden");
         }
       });
     }
@@ -111,14 +111,14 @@ export class BcmTabGroup {
     }
   }
   inkBarControl() {
-    const inkBar = this.el.querySelector('#ink-bar');
+    const inkBar = this.el.querySelector("#ink-bar");
     if (inkBar) {
-      const tabHeaderItems = this.el.querySelectorAll('bcm-tab-item-header');
+      const tabHeaderItems = this.el.querySelectorAll("bcm-tab-item-header");
       if (tabHeaderItems) {
         tabHeaderItems.forEach((tab) => {
-          const tabIndex = tab.getAttribute('index');
+          const tabIndex = tab.getAttribute("index");
           if (tabIndex == this.active) {
-            inkBar.style.width = tab.offsetWidth + 'px';
+            inkBar.style.width = tab.offsetWidth + "px";
             // inkBar.style.top = tab.offsetHeight + 'px';
             inkBar.style.transform = `translateX(${tab.offsetLeft}px)`;
           }
@@ -131,30 +131,30 @@ export class BcmTabGroup {
     let fontSize, padding, gap;
     switch (size) {
       case Bcm.Size.small:
-        fontSize = '2';
-        padding = '1';
-        gap = '2';
+        fontSize = "2";
+        padding = "1";
+        gap = "2";
         break;
       case Bcm.Size.medium:
-        fontSize = '3';
-        padding = '2';
-        gap = '3';
+        fontSize = "3";
+        padding = "2";
+        gap = "3";
         break;
       case Bcm.Size.large:
-        fontSize = '4';
-        padding = '3';
-        gap = '4';
+        fontSize = "4";
+        padding = "3";
+        gap = "4";
         break;
       default:
-        fontSize = '3';
-        padding = '2';
-        gap = '3';
+        fontSize = "3";
+        padding = "2";
+        gap = "3";
         break;
     }
     const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
-    return (h(Host, { class: "tw-font-sans tw-w-full tw-flex tw-flex-col tw-items-center" }, h("div", { class: `tw-w-full tw-flex tw-flex-row tw-items-end tw-justify-between tw-mb-${padding} tw-relative` }, this.headerItems.map(item => (h("bcm-tab-item-header", { tabIndex: "1", class: cs(`tw-text-${fontSize} tw-py-${padding} tw-transition-all tw-flex-1 tw-flex tw-items-center tw-justify-center tw-border-b-[2px]  tw-border-b-slate-300 tw-gap-${gap} tw-focus:outline-none`, item.disabled ? disabledClass : 'tw-cursor-pointer', item.active
+    return (h(Host, { class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between tw-mb-${padding} tw-relative` }, this.headerItems.map(item => (h("bcm-tab-item-header", { tabIndex: "0", class: cs(`tw-text-${fontSize} tw-py-${padding} tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-all tw-gap-${gap} tw-focus:outline-none`, item.disabled ? disabledClass : "tw-cursor-pointer", item.active
         ? `tw-text-${color}-500 enabled:hover:tw-text-${color}-600 enabled:active:tw-text-${color}-700 enabled:focus-visible:tw-text-${color}-800`
-        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:active:tw-text-slate-600 enabled:focus-visible:tw-text-slate-700"), active: item.active, disabled: item.disabled, index: item.index, innerHTML: item.content, onClick: () => !item.disabled && this.handleTabClick(item.index) }))), h("div", { id: "ink-bar", class: `tw-bg-${color}-500 tw-h-[2px] tw-rounded-sm tw-mt-[-2px] tw-absolute tw-bottom-0 tw-left-0 tw-transition-transform` })), h("slot", null)));
+        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600"), active: item.active, disabled: item.disabled, index: item.index, innerHTML: item.content, onClick: () => !item.disabled && this.handleTabClick(item.index) }))), h("div", { id: "ink-bar", class: `tw-bg-${color}-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
   }
   static get is() { return "bcm-tab-group"; }
   static get properties() {