bromcom-ui 2.11.1-rc.9-3 → 2.11.1

package/dist/cjs/stepper-states-77438c3a.js

@@ -0,0 +1,85 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+const index = require('./index-d321de96.js');
+const generate = require('./generate-82c63a56.js');
+const index$1 = require('./index-c591ecec.js');
+
+const { state } = index.createStore({
+  value: new Map(),
+  setData: {},
+});
+const setValue = val => {
+  const data = Object.assign(Object.assign({}, val), { steps: val.steps &&
+      val.steps.length > 0 &&
+      val.steps
+        .filter(data => !data.hidden)
+        .map((item, index) => ({
+        id: item.id || generate.Generate.UID(),
+        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,
+        icon: item.icon || undefined,
+        valid: item.valid || true,
+        loading: item.loading || false,
+        index: index + 1,
+        active: val.linear ? (index == 0 ? true : false) : val.active === index + 1,
+        isLast: index === val.steps.length - 1,
+        statusIcon: val.icon,
+        headerHidden: item.hidden,
+      })) });
+  state.value.set(val.id, data);
+};
+const removeState = _id => {
+  state.value.delete(_id);
+};
+const changeActiveStep = (id, index) => {
+  const value = state.value.get(id);
+  if (value) {
+    value.active = index;
+    value.steps = value.steps.map((step, i) => (Object.assign(Object.assign({}, step), { active: i === index - 1 })));
+  }
+};
+const getActiveIndex = id => generate.snq(() => state.value.get(id).active, 0);
+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 })));
+    index$1.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 })));
+    index$1.forceUpdate(value.el);
+  }
+};
+const setActiveIndex = (id, index) => state.value.get(id).active = index;
+const stepperReset = id => {
+  const value = state.value.get(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 })));
+    index$1.forceUpdate(value.el);
+  }
+};
+const getValue = id => generate.snq(() => state.value.get(id), {});
+const stepperStates = {
+  removeState,
+  getValue,
+  setValue,
+  changeActiveStep,
+  getActiveIndex,
+  changeStepStatus,
+  changeStepDisabled,
+  stepperReset,
+  setActiveIndex
+};
+
+exports.stepperStates = stepperStates;

package/dist/cjs/{string-helper-9cdfb273.js → string-helper-f9184277.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-const bcm = require('./bcm-1d1fcf21.js');
+const bcm = require('./bcm-489c9b1a.js');
 const _commonjsHelpers = require('./_commonjsHelpers-ed84c3ca.js');
 
 var slugify = _commonjsHelpers.createCommonjsModule(function (module, exports) {
@@ -94,7 +94,7 @@ StringHelper.replace = (str, search, replace) => str.replace(search, replace);
 StringHelper.remove = (str, search) => str.replace(search, '');
 StringHelper.isNullOrEmpty = (str) => str === null || str === undefined || str === '';
 StringHelper.localizationMessage = (str, args) => str.replace(/{(\d+)}/g, (match, number) => (typeof args[number] != 'undefined' ? args[number] : match));
-StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm$1.FormErrorMessages[type], args);
+StringHelper.getMessage = (type, args) => StringHelper.localizationMessage(bcm.Bcm.FormErrorMessages[type], args);
 StringHelper.split = (str, separator) => str.split(separator);
 StringHelper.textContains = (str, search) => str && str.indexOf(search) !== -1;
 StringHelper.textLimitter = (str, limit, newLine = false) => (str && str.length > limit ? `${str.substring(0, limit)}...` : str) + `${newLine ? ' <br /> ' : ''}`;

package/dist/cjs/tooltip-helper-a2793290.js

@@ -0,0 +1,157 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+'use strict';
+
+require('./element-dragger-a8562f82.js');
+const stringHelper = require('./string-helper-f9184277.js');
+const utils = require('./utils-fc077139.js');
+const floatingUi = require('./floating-ui-21890d11.js');
+const colorHelper = require('./color-helper-c3a819ea.js');
+require('./validators-f4c3063b.js');
+const generate = require('./generate-82c63a56.js');
+require('./number-helper-10017fcd.js');
+const bcm = require('./bcm-489c9b1a.js');
+
+class Tooltip {
+  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
+    this.destroy = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.el.remove();
+        this.emitHide();
+      }
+      this.removeListener();
+    };
+    this.target = () => document.getElementById(this.targetId);
+    this.sizeClass = () => {
+      switch (this.size) {
+        case bcm.Bcm$1.Size.small:
+          return "tw-text-1";
+        case bcm.Bcm$1.Size.medium:
+          return "tw-text-2";
+        case bcm.Bcm$1.Size.large:
+          return "tw-text-3";
+        default:
+          return "tw-text-2";
+      }
+    };
+    this.init = () => {
+      const { tone, colorName } = colorHelper.ColorHelper.parseColor(this.color, 700);
+      const dc = generate.Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-tooltip",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": colorHelper.ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
+      this.el = generate.Generate.createElement("div", {
+        "id": `${this.targetId}-tooltip-box`,
+        "class": `
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
+        "role": "tooltip",
+        "aria-hidden": "true",
+        "style": colorHelper.ColorHelper.generateStyleString(style),
+        "innerHTML": stringHelper.StringHelper.trim(this.message),
+      });
+    };
+    this.update = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+        this.show();
+      }
+    };
+    this.listener = () => {
+      window.addEventListener("resize", this.calculatePosition.bind(this));
+      window.addEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.addEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.trigger && this.target()) {
+        switch (this.trigger) {
+          case "click":
+            this.target().addEventListener("click", this.toggle.bind(this));
+            this.autoHide && this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "hover":
+            this.target().addEventListener("mouseenter", this.show.bind(this));
+            this.target().addEventListener("mouseleave", this.hide.bind(this));
+            break;
+          case "focus":
+            this.target().addEventListener("focus", this.show.bind(this), true);
+            this.target().addEventListener("blur", this.hide.bind(this), true);
+            break;
+        }
+      }
+      this.calculatePosition();
+    };
+    this.removeListener = () => {
+      window.removeEventListener("resize", this.calculatePosition.bind(this));
+      window.removeEventListener("scroll", this.calculatePosition.bind(this), true);
+      window.removeEventListener("wheel", this.calculatePosition.bind(this));
+      if (this.target()) {
+        this.target().removeEventListener("click", this.toggle.bind(this));
+        this.target().removeEventListener("mouseenter", this.show.bind(this));
+        this.target().removeEventListener("mouseleave", this.hide.bind(this));
+        this.target().removeEventListener("focus", this.show.bind(this), true);
+        this.target().removeEventListener("blur", this.hide.bind(this), true);
+      }
+    };
+    this.calculatePosition = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        floatingUi.FloatingUI({
+          ref: this.target(),
+          floating: this.el,
+          placement: this.placement,
+          offset: 8,
+          arrow: true,
+          arrowColor: `tw-bg-[--bcm-tooltip-bg]`,
+        });
+      }
+    };
+    this.show = async () => {
+      if (this.message) {
+        this.init();
+        await utils.delay(this.openDelay);
+        this.calculatePosition();
+        this.emitShow();
+      }
+      else {
+        this.hide();
+      }
+    };
+    this.hide = async () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        await utils.delay(this.closeDelay);
+        this.el && this.el.remove();
+        this.emitHide();
+      }
+    };
+    this.toggle = () => {
+      this.el = document.getElementById(this.id);
+      if (this.el) {
+        this.hide();
+      }
+      else {
+        this.show();
+      }
+    };
+    this.message = message;
+    this.targetId = targetId;
+    this.placement = placement;
+    this.color = color;
+    this.id = targetId + "-tooltip-box";
+    this.trigger = trigger;
+    this.size = size;
+    this.openDelay = openDelay;
+    this.closeDelay = closeDelay;
+    this.autoHide = autoHide;
+    this.emitShow = emitShow;
+    this.emitHide = emitHide;
+  }
+}
+
+exports.Tooltip = Tooltip;

package/dist/cjs/{validators-77768582.js → validators-f4c3063b.js}

@@ -4,7 +4,11 @@
  */
 'use strict';
 
-const generate = require('./generate-f73a098d.js');
+const generate = require('./generate-82c63a56.js');
+
+class DateTimeHelper {
+}
+DateTimeHelper.convertTimeStampToDate = (timestamp) => new Date(timestamp);
 
 class Validators {
 }
@@ -30,4 +34,5 @@ Validators.isValidate = (str, type) => {
   }
 };
 
+exports.DateTimeHelper = DateTimeHelper;
 exports.Validators = Validators;

package/dist/collection/components/atoms/avatar/avatar.js

@@ -56,7 +56,7 @@ export class BcmAvatar {
         }
       }
       else if (this.image) {
-        return h("img", { class: image(), onError: () => (this.isFallback = true), src: this.image, alt: this.alt, "aria-label": this.alt || this.name || "Avatar" });
+        return h("img", { class: image(), onError: () => (this.isFallback = true), src: this.image, alt: this.alt });
       }
       else if (this.name) {
         return this.getFirstLetters(this.name);

package/dist/collection/components/atoms/badge/badge.js

@@ -24,7 +24,7 @@ export class BcmBadge {
   render() {
     const { blink, value, size, color, status } = this;
     const _color = this.statusColors[status] || color;
-    const { tone, colorName } = ColorHelper.parseColor(_color, 700);
+    const { tone, colorName } = ColorHelper.parseColor(_color);
     const dc = Generate.getTwColor({
       color: colorName,
       tones: {

package/dist/collection/components/atoms/badge/badge.style.js

@@ -7,7 +7,7 @@ export const badgeStyle = tv({
   slots: {
     host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal ",
     base: [
-      "bcm-badge__dot tw-z-10",
+      "bcm-badge__dot",
       "tw-flex tw-items-center tw-justify-center tw-flex-row",
       "tw-rounded-full tw-text-center",
       "tw-bg-[--bcm-badge-bg] tw-text-[--bcm-badge-text]",

package/dist/collection/components/atoms/button/button.css

@@ -132,36 +132,36 @@
   width: fit-content;
   height: fit-content;
   --bcm-button-solid-color-default: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-default: var(--bcm-new-ds-color-blue-700);
-  --bcm-button-solid-border-default: var(--bcm-new-ds-color-blue-700);
+  --bcm-button-solid-background-color-default: var(--bcm-new-ds-color-blue-500);
+  --bcm-button-solid-border-default: var(--bcm-new-ds-color-blue-500);
   --bcm-button-solid-color-hover: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-hover: var(--bcm-new-ds-color-blue-800);
-  --bcm-button-solid-border-hover: var(--bcm-new-ds-color-blue-800);
+  --bcm-button-solid-background-color-hover: var(--bcm-new-ds-color-blue-600);
+  --bcm-button-solid-border-hover: var(--bcm-new-ds-color-blue-600);
   --bcm-button-solid-color-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-focus-visible: var(--bcm-new-ds-color-blue-900);
-  --bcm-button-solid-border-focus-visible: var(--bcm-new-ds-color-blue-900);
+  --bcm-button-solid-background-color-focus-visible: var(--bcm-new-ds-color-blue-800);
+  --bcm-button-solid-border-focus-visible: var(--bcm-new-ds-color-blue-800);
   --bcm-button-solid-color-active: var(--bcm-new-ds-color-white);
-  --bcm-button-solid-background-color-active: var(--bcm-new-ds-color-blue-900);
-  --bcm-button-solid-border-active: var(--bcm-new-ds-color-blue-900);
+  --bcm-button-solid-background-color-active: var(--bcm-new-ds-color-blue-700);
+  --bcm-button-solid-border-active: var(--bcm-new-ds-color-blue-700);
   --bcm-button-solid-color-disabled: var(--bcm-new-ds-color-white);
   --bcm-button-solid-background-color-disabled: var(--bcm-new-ds-color-slate-400);
   --bcm-button-solid-border-disabled: var(--bcm-new-ds-color-slate-400);
-  --bcm-button-ghost-color-default: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-color-default: var(--bcm-new-ds-color-slate-600);
   --bcm-button-ghost-background-color-default: var(--bcm-new-ds-color-slate-100);
   --bcm-button-ghost-border-default: var(--bcm-new-ds-color-slate-300);
-  --bcm-button-ghost-color-hover: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-color-hover: var(--bcm-new-ds-color-slate-600);
   --bcm-button-ghost-background-color-hover: var(--bcm-new-ds-color-slate-200);
   --bcm-button-ghost-border-hover: var(--bcm-new-ds-color-slate-400);
-  --bcm-button-ghost-color-focus-visible: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-color-focus-visible: var(--bcm-new-ds-color-slate-600);
   --bcm-button-ghost-background-color-focus-visible: var(--bcm-new-ds-color-slate-400);
   --bcm-button-ghost-border-focus-visible: var(--bcm-new-ds-color-slate-600);
-  --bcm-button-ghost-color-active: var(--bcm-new-ds-color-slate-700);
+  --bcm-button-ghost-color-active: var(--bcm-new-ds-color-slate-600);
   --bcm-button-ghost-background-color-active: var(--bcm-new-ds-color-slate-300);
   --bcm-button-ghost-border-active: var(--bcm-new-ds-color-slate-500);
   --bcm-button-ghost-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-button-ghost-background-color-disabled: var(--bcm-new-ds-color-slate-50);
   --bcm-button-ghost-border-disabled: var(--bcm-new-ds-color-slate-200);
-  --bcm-button-link-color-default: var(--bcm-new-ds-color-blue-700);
+  --bcm-button-link-color-default: var(--bcm-new-ds-color-blue-500);
   --bcm-button-link-background-color-default: var(--bcm-new-ds-color-transparent);
   --bcm-button-link-border-default: var(--bcm-new-ds-color-transparent);
   --bcm-button-link-color-hover: var(--bcm-new-ds-color-blue-600);

package/dist/collection/components/atoms/button/button.js

@@ -77,24 +77,24 @@ export class BcmButton {
         [`${prefix}-color-focus-visible`]: ColorHelper.dsColor('white'),
         [`${prefix}-color-active`]: ColorHelper.dsColor('white'),
         [`${prefix}-color-disabled`]: ColorHelper.dsColor('white'),
-        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-900'),
+        [`${prefix}-background-color-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-background-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-background-color-focus-visible`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-background-color-active`]: ColorHelper.dsColor(color + '-800'),
         [`${prefix}-background-color-disabled`]: ColorHelper.dsColor('slate-400'),
-        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-900'),
+        [`${prefix}-border-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-border-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-border-focus-visible`]: ColorHelper.dsColor(color + '-700'),
+        [`${prefix}-border-active`]: ColorHelper.dsColor(color + '-800'),
         [`${prefix}-border-disabled`]: ColorHelper.dsColor('slate-400')
       };
     }
     else if (kind == 'link') {
       return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
-        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-900'),
-        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-900'),
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-500'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-700'),
         [`${prefix}-color-disabled`]: ColorHelper.dsColor('slate-400'),
         [`${prefix}-background-color-default`]: ColorHelper.dsColor('transparent'),
         [`${prefix}-background-color-hover`]: ColorHelper.dsColor('transparent'),
@@ -110,8 +110,8 @@ export class BcmButton {
     }
     else if (kind == 'ghost') {
       return {
-        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-700'),
-        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-800'),
+        [`${prefix}-color-default`]: ColorHelper.dsColor(color + '-600'),
+        [`${prefix}-color-hover`]: ColorHelper.dsColor(color + '-600'),
         [`${prefix}-color-focus-visible`]: ColorHelper.dsColor(color + '-600'),
         [`${prefix}-color-active`]: ColorHelper.dsColor(color + '-600'),
         [`${prefix}-color-disabled`]: ColorHelper.dsColor(color + '-300'),

package/dist/collection/components/atoms/chip/chip.css

@@ -128,13 +128,13 @@
 }
 
 .bcm-chip {
-  --bcm-chip-color: var(--bcm-new-ds-color-slate-700);
-  --bcm-chip-color-hover: var(--bcm-new-ds-color-slate-700);
+  --bcm-chip-color: var(--bcm-new-ds-color-slate-500);
+  --bcm-chip-color-hover: var(--bcm-new-ds-color-slate-500);
   --bcm-chip-color-focus: var(--bcm-new-ds-color-slate-700);
   --bcm-chip-color-active: var(--bcm-new-ds-color-slate-700);
   --bcm-chip-color-disabled: var(--bcm-new-ds-color-slate-300);
-  --bcm-chip-background-color: var(--bcm-new-ds-color-slate-100);
-  --bcm-chip-background-color-hover: var(--bcm-new-ds-color-slate-200);
+  --bcm-chip-background-color: var(--bcm-new-ds-color-slate-200);
+  --bcm-chip-background-color-hover: var(--bcm-new-ds-color-slate-300);
   --bcm-chip-background-color-focus: var(--bcm-new-ds-color-slate-300);
   --bcm-chip-background-color-active: var(--bcm-new-ds-color-slate-400);
   --bcm-chip-background-color-disabled: var(--bcm-new-ds-color-slate-100);

package/dist/collection/components/atoms/chip/chip.js

@@ -25,9 +25,9 @@ export class BcmChip {
       return;
     const color = this.selected ? "indigo" : this.color; // Important: Find a solution for this in V3! ( selected ? this.color : "indigo" )
     return {
-      "--bcm-chip-color": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-hover": ColorHelper.dsColor(color + "-700"),
-      "--bcm-chip-color-focus": ColorHelper.dsColor(color + "-700"),
+      "--bcm-chip-color": ColorHelper.dsColor(color + "-500"),
+      "--bcm-chip-color-hover": ColorHelper.dsColor(color + "-500"),
+      "--bcm-chip-color-focus": ColorHelper.dsColor(color + "-600"),
       "--bcm-chip-color-active": ColorHelper.dsColor(color + "-700"),
       "--bcm-chip-color-disabled": ColorHelper.dsColor("slate" + "-300"),
       "--bcm-chip-background-color": ColorHelper.dsColor(color + "-100"),

package/dist/collection/components/molecules/checkbox/group.css

@@ -150,7 +150,7 @@
   gap: unset;
 }
 .bcm-checkbox-group__container.indeterminate {
-  padding-top: 8px;
-  margin-top: 8px;
+  padding-top: 16px;
+  margin-top: 16px;
   border-top: 1px solid #efefef;
 }

package/dist/collection/components/molecules/checkbox/group.js

@@ -190,7 +190,7 @@ export class BcmCheckboxGroup {
     });
     return (h(Host, { class: bcmChechboxGroup }, h("span", { hidden: true, id: `bcm-checkbox-group__items-${this._id}` }, h("slot", null)), h("div", { class: "bcm-checkbox-group__label" }, label &&
       h("div", null, h(LabelTemplate, { size: this.size, type: captionType, value: label, required: required }))), indeterminate &&
-      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, "no-margin": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
+      h("bcm-checkbox", { onClick: (e) => { this.indeterminateClick(), e.preventDefault(); }, "no-caption": true, id: "bcm-indeterminate-element", indeterminate: indeterminateState, disabled: disabled }, "Check All"), h(CheckboxGroupTemplate, { items: items, groupContainerClasses: bcmChechboxGroupContainer, customStyle: gap && ({ 'gap': gap }), onBcmSelect: (id) => this.changeCheckBox(id) })));
   }
   static get is() { return "bcm-checkbox-group"; }
   static get originalStyleUrls() {

package/dist/collection/components/molecules/color-input/color-input.js

@@ -49,7 +49,7 @@ export class BcmColorInput {
     return typeof window !== "undefined" && "EyeDropper" in window;
   }
   render() {
-    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e), value: this.value }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", style: {
+    return (h(Host, { class: "tw-block" }, h("bcm-input", { id: this._id + "-color", fullWidth: this.fullWidth, label: this.label, placeholder: this.placeholder, type: "text", "onBcm-change": e => this.handleInputChanged(e) }, h("i", { slot: "prefix", class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-gray-100", style: {
         backgroundColor: this.value,
       } }), this.isEyeDropperSupported() && h("i", { slot: "suffix", class: "far fa-eye-dropper", onClick: () => this.eyeDropper() })), h("bcm-linked", { targetId: this._id + "-color-container" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.handleChange(e.detail) }))));
   }

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

@@ -8,7 +8,7 @@ export class BcmEmpty {
     this.icon = undefined;
   }
   render() {
-    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-500 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-700 tw-text-2" }, h("slot", null))));
+    return (h(Host, { class: "tw-h-full tw-flex tw-flex-col tw-items-center tw-justify-center tw-w-full tw-flex-1 tw-bg-slate-50 tw-text-center tw-rounded tw-gap-3" }, this.icon && h("i", { class: `tw-text-8 tw-text-amber-400 ${this.icon}` }), h("bcm-typography", { class: "tw-text-slate-400 tw-text-2" }, h("slot", null))));
   }
   static get is() { return "bcm-empty"; }
   static get properties() {

package/dist/collection/components/molecules/error-layout/error-layout.js

@@ -43,7 +43,7 @@ export class BcmErrorLayout {
     const { itemsProp } = this;
     const classes = cs('error-layout', this.size);
     const hostClasses = cs(this.hidden ? 'hidden' : null);
-    return (h(Host, { class: hostClasses }, itemsProp.length > 0 && (h("div", { class: classes }, h("ul", null, this.itemsProp.map((item) => h("li", null, h("span", null, item))))))));
+    return (h(Host, { class: hostClasses }, itemsProp.length > 0 && (h("div", { class: classes }, this.itemsProp.map((item) => h("li", null, h("span", null, item)))))));
   }
   static get is() { return "bcm-error-layout"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/molecules/expansion-panel/expansion-panel.js

@@ -90,7 +90,7 @@ export class BcmExpansionPanel {
       'bcm-expansion-panel--icon-right': this.expandIconPosition === 'right',
       hidden,
     });
-    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger, "aria-label": message }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "far fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
+    return (h(Host, { class: hostClasses }, h("div", { class: "bcm-expansion-panel__header", onClick: () => this.toggle(), style: { 'background-color': ColorHelper.dsColor(this.headerColor) } }, h("div", { class: "bcm-expansion-panel__header-title" }, h("span", { id: _id + '-header' }, h("slot", { name: "header" })), tooltip && (h("span", { class: "bcm-expansion-panel__header-tooltip", style: Object.assign({}, color && { color: ColorHelper.convertColorToHex(color) }) }, h("bcm-tooltip", { message: message, placement: placement, trigger: trigger }, h("bcm-icon", { color: color, icon: icon })))), h("span", { id: _id + '-description', class: "bcm-expansion-panel__header-title-description" }, h("slot", { name: "description" }))), h("span", { id: _id + '-extra', class: "bcm-expansion-panel__header-extra", onClick: (e) => this.clickExtra(e) }, h("slot", { name: "extra" })), !hideToggle && (h("div", { class: "bcm-expansion-panel__header-toggle" }, h("bcm-icon", { icon: "far fa-chevron-down" })))), h("div", { class: "bcm-expansion-panel__body", id: _id + '-body' }, h("slot", null))));
   }
   static get is() { return "bcm-expansion-panel"; }
   static get originalStyleUrls() {

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

@@ -376,7 +376,7 @@ export class BcmInput {
       // 'no-margin': noMargin,
       'full-width': fullWidth
     });
-    return (h(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id, id: _id + "-label" }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
+    return (h(Host, { onfocus: () => this.onBcmFocus(), class: hostClasses, onClick: () => this.onBcmFocus() }, label && h("bcm-label", { onClick: () => this.toggleLinked(), tooltip: this.tooltip, type: captionType, value: label, required: required, htmlFor: _id }), h(InputTemplate, { id: _id, type: type, value: value, pattern: this.pattern, placeholder: placeholder, disabled: disabled, readonly: readonly, clearable: isActiveClearable, passwordToggle: passwordToggle, isPasswordVisible: isPasswordVisible, noDefaultIcon: noDefaultIcon, focused: focused, inValid: inValid, unitPrefix: unitPrefix, maxLength: this.maxLength, internalId: this._internal_id, captionType: captionType, unit: unit, size: size, handleFocus: () => this.handleFocus(), handleBlur: () => this.handleBlur(), handleChange: () => this.handleChange(), handleInput: () => this.handleInput(), steps: (e) => this.stepUpOrDown(e), changePasswordVisibility: () => this.changePasswordVisibility(), handleClear: (e) => this.handleClear(e), eyeDropper: () => this.eyeDropper(), isEyeDropperSupported: () => this.isEyeDropperSupported(), ref: (el) => this.inputElement = el, _suffix: this._suffix, _prefix: this._prefix, autocomplete: autocomplete }), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption, customErrorMessage: this.customErrorMessage }), type == Bcm.InputType.color &&
       h("bcm-linked", { targetId: this._id + "-container", id: this._id + "-linked" }, h("bcm-colorful", { id: this._id + "-picker", color: this.value, onBcmChange: e => this.setValue(e.detail) }))));
   }
   static get is() { return "bcm-input"; }

package/dist/collection/components/molecules/input-dropdown/input-dropdown.js

@@ -196,7 +196,7 @@ export class BcmInputDropdown {
     };
     const CommentTemplate = () => {
       var _a, _b, _c;
-      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, autocomplete: false, min: 0, max: 200, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", customErrorMessage: "Max limit 200 mins", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { role: "button", "aria-labelledby": "button", "aria-label": "button", icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { role: "button", "aria-labelledby": "button", "aria-label": "button", icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
+      return (h(Fragment, null, this.isOpenMenu ? (h("div", { class: commentArea() }, this.isLate ? (h(Fragment, null, h("bcm-input", { label: "Minus Late", required: true, id: this._id + "-input-dropdown-late-content-input", type: "number", "full-width": true, autocomplete: false, min: 0, max: 200, value: (_a = this.value) === null || _a === void 0 ? void 0 : _a.lateMin, placeholder: "Enter Minus Late", customErrorMessage: "Max limit 200 mins", "onBcm-change": ({ detail }) => (this.value.lateMin = +detail) }, h("i", { slot: "prefix", class: "far fa-clock" })))) : null, h("bcm-textarea", { "full-width": true, value: (_c = (_b = this.value) === null || _b === void 0 ? void 0 : _b.comment) !== null && _c !== void 0 ? _c : "", "onBcm-change": ({ detail }) => (this.value.comment = detail), label: "Description", "no-caption": true, rows: 4 }), h("footer", { class: "tw-flex tw-w-full tw-flex-row tw-items-center tw-justify-end tw-gap-2" }, h("bcm-button", { icon: "fas fa-times", kind: "ghost", "icon-position": "prefix", onClick: () => { var _a; return (_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide(); } }, "Close"), h("bcm-button", { icon: "fas fa-save", "icon-position": "prefix", onClick: () => this.onClickSave() }, "Save")))) : null));
     };
     return (h(Host, { class: base() }, label && h("bcm-label", { htmlFor: _id + "-dropdown-input", size: size, value: label, required: required }), h("div", { class: content() }, h("div", { class: inputArea() }, h("input", { id: _id + "-dropdown-input", class: input(), style: { color: (_a = this.value) === null || _a === void 0 ? void 0 : _a.color }, type: "text", tabIndex: -1, placeholder: placeholder, value: (_b = this.value) === null || _b === void 0 ? void 0 : _b.key, disabled: disabled, required: required, autoComplete: "off", readOnly: readonly, onKeyPress: e => this.handleKeyPress(e), onInput: e => this.handleInput(e), ref: el => (this._input = el) }), h("button", { disabled: disabled, id: `i-dropdown-button-${_id}`, class: button(), onClick: () => (this.isOpenMenu = true) }, h("i", { class: "fas fa-chevron-down" })), h("bcm-linked", { "onBcm-open": ({ detail }) => { var _a; return detail && ((_a = this.commentContent) === null || _a === void 0 ? void 0 : _a.hide()); }, class: "tw-mt-1", id: `i-dropdown-menu-${_id}`, "target-id": `i-dropdown-button-${_id}`, placement: "bottom-start" }, h(MenuTemplates, null)), h("bcm-linked", { id: `i-dropdown-comment-${_id}`, "target-id": _id, trigger: "custom", placement: "left" }, h(CommentTemplate, null))), !this.hideComment ? (h("span", { onClick: () => {
         var _a, _b;

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

@@ -135,7 +135,7 @@
   --bcm-menu-background-color-hover: var(--bcm-new-ds-color-slate-50);
   --bcm-menu-icon-color-hover: var(--bcm-new-ds-color-slate-700);
   --bcm-menu-color-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active: var(--bcm-color-primary-600);
+  --bcm-menu-background-color-active: var(--bcm-color-primary-500);
   --bcm-menu-icon-color-active: var(--bcm-new-ds-color-white);
   --bcm-menu-color-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-background-color-focus-visible: var(--bcm-color-primary-600);
@@ -147,13 +147,13 @@
   --bcm-menu-background-color-dropdownDisabled: var(--bcm-new-ds-color-transparent);
   --bcm-menu-icon-color-dropdownDisabled: var(--bcm-new-ds-color-slate-400);
   --bcm-menu-color-active-hover: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-hover: var(--bcm-color-primary-700);
+  --bcm-menu-background-color-active-hover: var(--bcm-color-primary-400);
   --bcm-menu-icon-color-active-hover: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-focus-visible: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-focus-visible: var(--bcm-color-primary-800);
+  --bcm-menu-background-color-active-focus-visible: var(--bcm-color-primary-700);
   --bcm-menu-icon-color-active-focus-visible: var(--bcm-new-ds-color-white);
   --bcm-menu-color-active-active: var(--bcm-new-ds-color-white);
-  --bcm-menu-background-color-active-active: var(--bcm-color-primary-900);
+  --bcm-menu-background-color-active-active: var(--bcm-color-primary-800);
   --bcm-menu-icon-color-active-active: var(--bcm-new-ds-color-white);
   font-family: "Inter", sans-serif;
   font-size: 14px;

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

@@ -260,7 +260,7 @@
   display: block;
   width: 100%;
   height: 4px;
-  background-color: var(--bcm-color-primary-500);
+  background-color: var(--bcm-color-primary-400);
   position: absolute;
   top: -4px;
   left: 0;

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

@@ -126,7 +126,7 @@ export class BcmRadioGroup {
   render() {
     var _a, _b;
     const { direction, fullWidth, gap, label, size, required, disabled, caption, captionError, captionType, noCaption } = this;
-    return (h(Host, { class: "tw-mb-2 tw-flex tw-flex-col", role: "radiogroup", "aria-labelledby": "radiogroup" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: cs("tw-flex tw-flex-wrap", direction == Bcm.Direction.horizontal ? "tw-flex-row" : "tw-flex-col", fullWidth && "tw-w-full"), style: { "gap": gap } }, h("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
+    return (h(Host, { role: "radio-group", class: "tw-mb-2 tw-flex tw-flex-col" }, label && h("bcm-label", { type: captionType, value: label, required: required }), h("div", { class: cs("tw-flex tw-flex-wrap", direction == Bcm.Direction.horizontal ? "tw-flex-row" : "tw-flex-col", fullWidth && "tw-w-full"), style: { "gap": gap } }, h("slot", null), ((_a = this.Items) === null || _a === void 0 ? void 0 : _a.length) > 0 &&
       ((_b = this.Items) === null || _b === void 0 ? void 0 : _b.map(item => (h("bcm-radio", { id: item.id, value: item.value, disabled: disabled || item.disabled, checked: item.checked, color: item.color, size: size }, item.label))))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   static get is() { return "bcm-radio-group"; }

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

@@ -23,7 +23,7 @@ export class BcmRadio {
         "tw-text-1": size === Bcm.Size.small,
         "tw-text-2.5": size === Bcm.Size.medium,
         "tw-text-4": size === Bcm.Size.large,
-      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { role: "radio", "aria-label": "radio", id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
+      }), style: (Generate.getTwColor(color)) }, h("label", { class: cs("tw-inline-flex tw-flex-row tw-gap-2 tw-mr-2 tw-items-center", disabled ? "tw-cursor-not-allowed" : "tw-cursor-pointer"), htmlFor: _id + '-input' }, h("input", { id: _id + '-input', type: "radio", value: value, checked: checked, disabled: disabled, class: cs("tw-flex tw-items-center tw-justify-center", "tw-relative tw-appearance-none tw-border tw-rounded-full tw-cursor-pointer tw-transition tw-ease-in-out ", "tw-m-0", "before:tw-content-[''] before:tw-absolute before:tw-rounded-full", {
         "tw-w-4 tw-h-4 before:tw-w-2.5 before:tw-h-2.5": size === Bcm.Size.medium,
         "tw-w-3.5 tw-h-3.5 before:tw-w-2 before:tw-h-2": size === Bcm.Size.small,
         "tw-w-4.5 tw-h-4.5 before:tw-w-3 before:tw-h-3": size === Bcm.Size.large,

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

@@ -162,7 +162,7 @@ export class BcmRange {
       height: '100%',
       width: height,
     };
-    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } }, h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle }, h("input", { type: "range", role: "slider", "aria-label": "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }), h("input", { type: "range", id: `input-right-${this._id}`, role: "slider", "aria-label": "range", min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }), h("div", { class: "bcm-range__container-bar" }, h("div", { class: "ticks" }, h(Ticks, null)), h("div", { class: "bcm-range__container-bar-track" }), h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, h("span", null)), h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, h("span", null))), h("div", { class: "touch" }, h(Touch, null)))));
+    return (h(Host, { class: hostClasses, style: direction == Bcm.Direction.vertical && { height: height } }, h("div", { class: "bcm-range__container", style: direction == Bcm.Direction.vertical && verticalStyle }, h("input", { type: "range", id: `input-left-${this._id}`, min: leftMin, max: max, step: step, onChange: (event) => { this.syncValues('left', event); this.handleChange(); }, onInput: (event) => { this.syncValues('left', event); this.getTooltip('left').hide(); this.getTooltip('left').show(); }, onMouseOver: () => { this.getThumb('left').classList.add('hover'); this.getTooltip('left').show(); }, onMouseOut: () => { this.getThumb('left').classList.remove('hover'); this.getTooltip('left').hide(); }, value: this.leftValue, class: { 'single': !this.multiple } }), h("input", { type: "range", id: `input-right-${this._id}`, min: min, max: max, onChange: (event) => { this.syncValues('right', event); this.handleChange(); }, onInput: (event) => { this.syncValues('right', event); this.getTooltip('right').hide(); this.getTooltip('right').show(); }, onMouseOver: () => { this.getThumb('right').classList.add('hover'); this.getTooltip('right').show(); }, onMouseOut: () => { this.getThumb('right').classList.remove('hover'); this.getTooltip('right').hide(); }, step: step, value: this.rightValue }), h("div", { class: "bcm-range__container-bar" }, h("div", { class: "ticks" }, h(Ticks, null)), h("div", { class: "bcm-range__container-bar-track" }), h("div", { class: "bcm-range__container-bar-range", id: "bcm-range__thumb-range" }), h("div", { class: "bcm-range__container-bar-thumb left", id: `bcm-range__thumb-left-${this._id}` }, h("span", null)), h("div", { class: "bcm-range__container-bar-thumb right", id: `bcm-range__thumb-right-${this._id}` }, h("span", null))), h("div", { class: "touch" }, h(Touch, null)))));
   }
   static get is() { return "bcm-range"; }
   static get originalStyleUrls() {