bromcom-ui 2.8.0-rc.10-d → 2.8.0-rc.10-e

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

@@ -12,15 +12,15 @@ 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 { IsLoad } from "@bcm/decorator";
-import { Generate } from "@bcm/helpers";
-import { Bcm } from "@bcm/model";
-import { StepperHeaderTemplate } from "@bcm/template";
-import { getChildElements } from "@bcm/utils";
-import { Host, forceUpdate, h } from "@stencil/core";
-import cs from "classnames";
-import snq from "snq";
-import stepperStates from "../states/stepper-states";
+import { forceUpdate, h, Host } from '@stencil/core';
+import cs from 'classnames';
+import snq from 'snq';
+import { IsLoad } from '../../../decorators/is-load-decorator';
+import { Generate } from '../../../helper/generate';
+import Bcm from '../../../models/bcm';
+import { StepperHeaderTemplate } from '../../../templates/step-template';
+import { getChildElements } from '../../../utils/utils';
+import stepperStates from '../states/stepper-states';
 export class BcmStepper {
   constructor() {
     this.hidden = false;
@@ -63,14 +63,14 @@ export class BcmStepper {
     this.setSteps(this.getItems());
   }
   setSteps(steps) {
-    const slots = getChildElements(this.el, "bcm-step");
+    const slots = getChildElements(this.el, 'bcm-step');
     if (slots.length > 0) {
       slots.forEach((item, index) => {
         const step = steps.find(step => !item.headerHidden && step.id === item.id);
         if (step) {
-          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 })));
+          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");
+            item.removeAttribute('hidden');
           }
         }
       });
@@ -86,7 +86,7 @@ export class BcmStepper {
     return stepperStates.getActiveIndex(this.stepperId);
   }
   getSlotElements() {
-    return snq(() => getChildElements(this.el, "bcm-step"), []);
+    return snq(() => getChildElements(this.el, 'bcm-step'), []);
   }
   async onStepChange(index) {
     if (index) {
@@ -113,18 +113,17 @@ export class BcmStepper {
     return Promise.resolve(this.getActiveIndex());
   }
   async next(idx) {
-    let index;
-    idx == 0 ? (index = 0) : index == 1 ? (index = 1) : (index = idx || this.getActiveIndex());
+    const index = idx || this.getActiveIndex();
     const step = await this.getCurrentStep();
     const lastStep = this.getItems()[this.getItems().length - 1];
     if (step.valid) {
-      this.linear && lastStep.id != step.id && (step.status = "success");
+      this.linear && lastStep.id != step.id && (step.status = 'success');
       if (index < this.getItems().length) {
         await this.onStepChange(index + 1);
       }
     }
     else {
-      step.status = "error";
+      step.status = 'error';
     }
     forceUpdate(this.el);
     return Promise.resolve(this.getActiveIndex());
@@ -132,22 +131,16 @@ export class BcmStepper {
   async setActive(index) {
     if (!index)
       return;
-    if (typeof index != "number") {
-      console.warn("index must be a number");
-      return;
-    }
     if (this.linear) {
-      const prevSteps = this.getItems().filter(item => item.index < index);
-      const prevStepIsValid = prevSteps === null || prevSteps === void 0 ? void 0 : prevSteps.map(item => ({
+      const prevStepIsValid = this.getItems()
+        .filter(item => item.index < index)
+        .map(item => ({
         id: item.id,
         status: item.status,
         disabled: item.disabled,
-      })).every(item => item.status == "success" || item.status == "default");
+      }))
+        .every(item => !item.disabled && (item.status === 'success' || item.status === 'default'));
       if (prevStepIsValid) {
-        prevSteps === null || prevSteps === void 0 ? void 0 : prevSteps.forEach(item => {
-          item.status = "success";
-          item.disabled = false;
-        });
         await this.next(index - 1);
       }
     }
@@ -173,11 +166,11 @@ export class BcmStepper {
   }
   render() {
     const { hidden, direction, linear, size } = this;
-    const hostClasses = cs("bcm-stepper", "bcm-stepper__direction-" + direction, "bcm-stepper__size-" + size, {
-      "bcm-stepper__linear": linear,
+    const hostClasses = cs('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 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.onStepChange(step) })),
@@ -242,7 +235,7 @@ export class BcmStepper {
           "references": {
             "DirectionTypes": {
               "location": "import",
-              "path": "@bcm/model"
+              "path": "../../../models/bcm-types"
             }
           }
         },
@@ -283,7 +276,7 @@ export class BcmStepper {
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "@bcm/model"
+              "path": "../../../models/bcm-types"
             }
           }
         },

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

@@ -125,9 +125,7 @@
   margin-right: 8px;
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -430,9 +428,7 @@
   min-height: calc(14px + 8px);
 }
 
-:root,
-::after,
-::before {
+:root {
   --bcm-new-ds-color-inherit: inherit;
   --bcm-new-ds-color-current: currentColor;
   --bcm-new-ds-color-transparent: transparent;
@@ -780,9 +776,7 @@
   margin: 0;
 }
 
-:root,
-::after,
-::before {
+:root {
   --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: "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 })));
+    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 })));
   }
   static get is() { return "bcm-switch"; }
   static get originalStyleUrls() {

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

@@ -12,181 +12,149 @@ 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 { IsLoad } from "@bcm/decorator";
-import { Generate } from "@bcm/helpers";
-import { Bcm } from "@bcm/model";
-import { delay } from "@bcm/utils";
-import { Host, forceUpdate, h } from "@stencil/core";
+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 = [];
     this._id = Generate.UID();
     this.active = "1";
     this.color = "blue";
     this.size = Bcm.Size.medium;
   }
-  get tabItems() {
-    return this.el.querySelectorAll("bcm-tab-item");
-  }
-  get tabItemHeaders() {
-    return this.el.querySelectorAll("bcm-tab-item-header");
-  }
-  setTabAttributes() {
-    this.tabItems.forEach((tab, index) => {
-      const itemActive = tab.hasAttribute("active") ? true : false;
-      const itemDisabled = tab.hasAttribute("disabled") ? true : false;
-      const itemIndex = index + 1;
-      tab.setAttribute("index", `${itemIndex}`);
-      tab.setAttribute("size", this.size);
-      tab.setAttribute("color", this.color);
-      tab.removeAttribute("active");
-      tab.removeAttribute("disabled");
-      if (itemActive) {
-        tab.setAttribute("active", "");
-        this.active = itemIndex.toString();
-      }
-      if (itemDisabled) {
-        tab.setAttribute("disabled", "");
+  connectedCallback() {
+    var _a;
+    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 itemIndex = index + 1;
+        tab.setAttribute('index', `${itemIndex}`);
+        tab.classList.add('tw-w-full');
+        let header = {
+          slot: 'header',
+          content: '',
+          active: itemActive,
+          disabled: itemDisabled,
+          index: itemIndex
+        };
+        const headerItemHeader = tab.querySelector('bcm-tab-item-header');
+        if (headerItemHeader) {
+          header.content = headerItemHeader.innerHTML;
+          headerItemHeader.classList.add('tw-hidden');
+        }
+        else {
+          header.content = tab.getAttribute('label') || `Tab ${itemIndex}`;
+        }
+        if (itemActive) {
+          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');
+        }
+        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');
       }
-      // const headerElement = tab.querySelector("bcm-tab-item-header");
-      // if (headerElement) {
-      //     this.setHeaderTabAttributes(headerElement, tab);
-      // }
-    });
-    const isHasActiveTab = Array.from(this.tabItems).some((tab) => tab.hasAttribute("active"));
-    if (!isHasActiveTab) {
-      this.tabItems[0].setAttribute("active", "");
     }
   }
-  componentWillLoad() {
-    this.setTabAttributes();
+  tabItems() {
+    return snq(() => this.el.querySelectorAll('bcm-tab-item'), []);
   }
   handleTabClick(index) {
-    var _a, _b;
-    if (index) {
-      this.active = index.toString();
-    }
-    if ((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.length) {
-      this.tabItems.forEach(tab => {
-        tab.removeAttribute("active");
-        tab.setAttribute("size", this.size);
-        tab.setAttribute("color", this.color);
-        if (tab.getAttribute("index") == this.active) {
-          tab.setAttribute("active", "");
+    this.headerItems.forEach(tab => {
+      tab.active && (tab.active = false);
+    });
+    this.headerItems[index - 1].active = true;
+    this.active = index.toString();
+    const tabItems = this.el.querySelectorAll('bcm-tab-item');
+    if (tabItems) {
+      tabItems.forEach(tab => {
+        const tabIndex = tab.getAttribute('index');
+        if (tabIndex == this.active) {
+          tab.setAttribute('active', '');
+          tab.classList.add('tw-block');
+          tab.classList.remove('tw-hidden');
         }
-      });
-    }
-    if ((_b = this.tabItemHeaders) === null || _b === void 0 ? void 0 : _b.length) {
-      this.tabItemHeaders.forEach(tabHeader => {
-        tabHeader.removeAttribute("active");
-        tabHeader.setAttribute("size", this.size);
-        tabHeader.setAttribute("color", this.color);
-        if (tabHeader.getAttribute("index") == this.active) {
-          tabHeader.setAttribute("active", "");
-          // tabHeader.scrollIntoView({
-          //     behavior: "smooth",
-          //     block: "start",
-          //     inline: "center",
-          // });
+        else {
+          tab.removeAttribute('active');
+          tab.classList.remove('tw-block');
+          tab.classList.add('tw-hidden');
         }
       });
     }
-    this.tabChange.emit(this.active);
-  }
-  componentDidRender() {
     this.inkBarControl();
-    this.handleTabClick();
+    forceUpdate(this);
+    this.tabChange.emit(this.active);
   }
   componentDidLoad() {
     this.inkBarControl();
-    this.observeTabItem();
   }
   async setActive(index) {
-    if (index > 0 && index <= this.tabItems.length && index != +this.active) {
+    if (index > 0 && index <= this.headerItems.length && index != +this.active && !this.headerItems[index - 1].disabled) {
       this.handleTabClick(index);
     }
   }
-  async refresh() {
-    await delay(100);
-    forceUpdate(this);
-  }
   inkBarControl() {
-    var _a;
-    const inkBar = this.el.querySelector("#ink-bar");
-    if (!inkBar || !((_a = this.tabItemHeaders) === null || _a === void 0 ? void 0 : _a.length))
-      return;
-    for (let i = 0; i < this.tabItemHeaders.length; i++) {
-      const tab = this.tabItemHeaders[i];
-      const tabIndex = tab.getAttribute("index");
-      if (tabIndex === this.active) {
-        inkBar.style.width = `${tab.offsetWidth}px`;
-        // inkBar.style.top = `${tab.offsetHeight}px`;
-        inkBar.style.transform = `translateX(${tab.offsetLeft}px)`;
-      }
-    }
-  }
-  activeChanged(newVal, _oldVal) {
-    var _a;
-    if (!((_a = this.tabItems) === null || _a === void 0 ? void 0 : _a.length))
-      return;
-    const isHasActiveTab = Array.from(this.tabItems).some(tab => tab.getAttribute("index") == newVal);
-    if (!isHasActiveTab) {
-      this.active = "1";
-    }
-  }
-  observeTabItem() {
-    const callback = (mutationsList, _observer) => {
-      for (const mutation of mutationsList) {
-        if (mutation.type === "childList") {
-          // for (const node of mutation.addedNodes) {
-          //     if (node.nodeName === "BCM-TAB-ITEM") {
-          //         // Do something when a bcm-tab-item is added
-          //     }
-          // }
-          for (const node of mutation.removedNodes) {
-            if (node.nodeName === "BCM-TAB-ITEM") {
-              // Do something when a bcm-tab-item is removed
-              console.log("A bcm-tab-item was removed.", node);
-              this.tabProcess();
-            }
+    const inkBar = this.el.querySelector('#ink-bar');
+    if (inkBar) {
+      const tabHeaderItems = this.el.querySelectorAll('bcm-tab-item-header');
+      if (tabHeaderItems) {
+        tabHeaderItems.forEach((tab) => {
+          const tabIndex = tab.getAttribute('index');
+          if (tabIndex == this.active) {
+            inkBar.style.width = tab.offsetWidth + 'px';
+            // inkBar.style.top = tab.offsetHeight + 'px';
+            inkBar.style.transform = `translateX(${tab.offsetLeft}px)`;
           }
-        }
+        });
       }
-    };
-    this.observer = new MutationObserver(callback);
-    this.observer.observe(this.el, { childList: true });
-  }
-  tabProcess() {
-    this.updateTabHeaders();
-    this.regenerateIndex();
-    this.refresh();
-    this.inkBarControl();
-  }
-  updateTabHeaders() {
-    const tabIds = Array.from(this.tabItems).map(tab => tab.getAttribute("id"));
-    const tabHeaderElements = Array.from(this.el.querySelector("#tab-header").querySelectorAll("bcm-tab-item-header"));
-    if (tabIds.length !== tabHeaderElements.length) {
-      tabHeaderElements.forEach(tabHeader => {
-        const tabId = tabHeader.getAttribute("tab-id");
-        if (!tabIds.includes(tabId)) {
-          tabHeader.remove();
-        }
-      });
     }
   }
-  regenerateIndex() {
-    this.tabItems.forEach((tab, index) => {
-      const itemIndex = index + 1;
-      tab.setAttribute("index", `${itemIndex}`);
-      const headerElement = this.el.querySelector(`bcm-tab-item-header[tab-id="${tab.getAttribute("id")}"]`);
-      if (headerElement) {
-        headerElement.setAttribute("index", `${itemIndex}`);
-        headerElement.style.order = `${itemIndex}`;
-      }
-    });
-  }
   render() {
-    const { color } = this;
-    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header" }, 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)));
+    const { color, size } = this;
+    let fontSize, padding, gap;
+    switch (size) {
+      case Bcm.Size.small:
+        fontSize = '2';
+        padding = '1';
+        gap = '2';
+        break;
+      case Bcm.Size.medium:
+        fontSize = '3';
+        padding = '2';
+        gap = '3';
+        break;
+      case Bcm.Size.large:
+        fontSize = '4';
+        padding = '3';
+        gap = '4';
+        break;
+      default:
+        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
+        ? `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)));
   }
   static get is() { return "bcm-tab-group"; }
   static get properties() {
@@ -254,7 +222,7 @@ export class BcmTabGroup {
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "@bcm/model"
+              "path": "../../../models/bcm-types"
             }
           }
         },
@@ -273,7 +241,7 @@ export class BcmTabGroup {
   static get events() {
     return [{
         "method": "tabChange",
-        "name": "bcm-tab-change",
+        "name": "tabChange",
         "bubbles": true,
         "cancelable": true,
         "composed": true,
@@ -308,41 +276,10 @@ export class BcmTabGroup {
           "text": "",
           "tags": []
         }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "",
-          "tags": []
-        }
       }
     };
   }
   static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "active",
-        "methodName": "activeChanged"
-      }];
-  }
-  static get listeners() {
-    return [{
-        "name": "resize",
-        "method": "inkBarControl",
-        "target": "window",
-        "capture": false,
-        "passive": true
-      }];
-  }
 }
 __decorate([
   IsLoad()

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

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

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

@@ -89,8 +89,7 @@ export class BcmTextarea {
   async getValue() {
     return this.value;
   }
-  watchValue(newValue) {
-    this.textarea.value = newValue;
+  watchValue() {
     this.handleChange();
   }
   handleFocus() {