bromcom-ui 2.12.4-rc.0 → 3.0.0-alpha.1

package/dist/collection/components/third-parts/rc-picker/rc-picker.css

@@ -125,19 +125,19 @@
 
 :root {
   --bcm-date-border-color: var(--bcm-ui-color-border-default);
-  --bcm-date-border-hover: #4293cf;
+  --bcm-date-border-hover: var(--bcm-ui-color-border-primary);
   --bcm-date-text-color: var(--bcm-ui-color-text-default);
   --bcm-date-placeholder-color: var(--bcm-ui-color-text-placeholder);
   --bcm-date-disabled-color: var(--bcm-ui-color-text-disabled);
   --bcm-date-error-color: #e53e3e;
-  --bcm-date-primary-color: var(--bcm-ui-color-background-primary-info-default);
-  --bcm-date-primary-hover: var(--bcm-ui-color-background-primary-info-hover);
+  --bcm-date-primary-color: var(--bcm-ui-color-background-primary-default);
+  --bcm-date-primary-hover: var(--bcm-ui-color-background-primary-hover);
   --bcm-date-bg-hover: #e2e8f0;
-  --bcm-date-range-bg: var(--bcm-ui-color-background-palette-blue-default);
-  --bcm-date-range-hover-bg: var(--bcm-ui-color-background-palette-blue-hover);
+  --bcm-date-range-bg: var(--bcm-ui-color-background-stated-blue-default);
+  --bcm-date-range-hover-bg: var(--bcm-ui-color-background-stated-blue-hover);
   --bcm-date-disabled-bg: #f8fafc;
   --bcm-date-focused-bg: #f8fafc;
-  --bcm-date-border-radius: 4px;
+  --bcm-date-border-radius: var(--bcm-ui-border-radius-default);
 }
 
 .bcm-date {
@@ -167,8 +167,12 @@
 }
 .bcm-date--medium {
   height: 32px;
-  font-size: 14px;
-  line-height: 22px;
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
+}
+.bcm-date--medium input {
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-5);
 }
 .bcm-date--small {
   height: 24px;
@@ -243,7 +247,7 @@
   outline: none;
   overflow: hidden;
   text-overflow: ellipsis;
-  font-weight: 500;
+  font-weight: 400;
 }
 .bcm-date-input > input::placeholder {
   font-family: "Inter", sans-serif;

package/dist/collection/global/components/_checkbox.css

@@ -130,14 +130,14 @@
 .bcm-checkbox {
   outline: none;
   border: none;
-  --bcm-checkbox-primary-color-default: var(--bcm-new-ds-color-blue-500);
-  --bcm-checkbox-secondary-color-default: var(--bcm-new-ds-color-white);
-  --bcm-checkbox-primary-color-hover: var(--bcm-new-ds-color-blue-600);
-  --bcm-checkbox-secondary-color-hover: var(--bcm-new-ds-color-slate-50);
-  --bcm-checkbox-primary-color-focus-visible: var(--bcm-new-ds-color-blue-800);
-  --bcm-checkbox-secondary-color-focus-visible: var(--bcm-new-ds-color-slate-50);
-  --bcm-checkbox-primary-color-active: var(--bcm-new-ds-color-blue-700);
-  --bcm-checkbox-secondary-color-active: var(--bcm-new-ds-color-slate-50);
+  --bcm-checkbox-primary-color-default: var(--bcm-ui-color-background-primary-default);
+  --bcm-checkbox-secondary-color-default: var(--bcm-ui-color-background-base-default);
+  --bcm-checkbox-primary-color-hover: var(--bcm-ui-color-background-primary-hover);
+  --bcm-checkbox-secondary-color-hover: var(--bcm-ui-color-background-default-default);
+  --bcm-checkbox-primary-color-focus-visible: var(--bcm-ui-color-background-primary-active);
+  --bcm-checkbox-secondary-color-focus-visible: var(--bcm-ui-color-background-default-active);
+  --bcm-checkbox-primary-color-active: var(--bcm-ui-color-background-primary-active);
+  --bcm-checkbox-secondary-color-active: var(--bcm-ui-color-background-default-active);
   --bcm-checkbox-primary-color-disabled: var(--bcm-new-ds-color-slate-300);
   --bcm-checkbox-secondary-color-disabled: var(--bcm-new-ds-color-slate-200);
   display: inline-flex;
@@ -183,15 +183,15 @@
   line-height: calc(14px + 8px);
   font-weight: 400;
   font-weight: 500;
-  color: var(--bcm-new-ds-color-slate-600);
+  color: var(--bcm-ui-color-text-default);
 }
 .bcm-checkbox .slot:not(:empty) {
   margin-left: 8px;
   margin-right: 8px;
 }
 .bcm-checkbox-size-small .slot {
-  font-size: 12px;
-  line-height: calc(12px + 8px);
+  font-size: var(--bcm-ui-font-size-4);
+  line-height: var(--bcm-ui-line-height-4);
   margin-top: -2.5px;
 }
 .bcm-checkbox-size-small .bcm-checkbox__input {
@@ -204,8 +204,8 @@
   font-size: calc(10px - 2px);
 }
 .bcm-checkbox-size-medium .slot {
-  font-size: calc(12px + 1px);
-  line-height: calc(12px + 8px);
+  font-size: var(--bcm-ui-font-size-5);
+  line-height: var(--bcm-ui-line-height-4);
   margin-top: -1.5px;
 }
 .bcm-checkbox-size-medium .bcm-checkbox__input {
@@ -218,8 +218,8 @@
   font-size: 10px;
 }
 .bcm-checkbox-size-large .slot {
-  font-size: 16px;
-  line-height: calc(16px + 8px);
+  font-size: var(--bcm-ui-font-size-6);
+  line-height: var(--bcm-ui-line-height-6);
   margin-top: -1.5px;
 }
 .bcm-checkbox-size-large .bcm-checkbox__input {

package/dist/collection/helper/popover-helper.js

@@ -25,15 +25,15 @@ export class Popover {
         variable: "--bcm-popover",
       });
       const style = Object.assign(Object.assign({}, dc), (dc["--bcm-popover-bg"] && { "--bcm-popover-text": ColorHelper.reverseColor(dc["--bcm-popover-bg"]) }));
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2">
-            ${this.message ? `<div class="tw-font-medium tw-w-full tw-pb-1 tw-px-4">${StringHelper.trim(this.message)}</div>` : ""}
-            ${this.content ? `<div class="tw-font-normal tw-px-4">${StringHelper.trim(this.content)}</div>` : ""}
+      const inner = `<div class="tw-z-[1] tw-rounded-md tw-py-3">
+            ${this.message ? `<div class="tw-font-semibold tw-w-full tw-pb-3 tw-px-3">${StringHelper.trim(this.message)}</div>` : ""}
+            ${this.content ? `<div class="tw-font-normal tw-px-3">${StringHelper.trim(this.content)}</div>` : ""}
         </div>`;
       this.el = Generate.createElement("div", {
         "id": `${this.targetId}-popover-box`,
         "class": `
-            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] tw-text-3 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
-            tw-shadow`,
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-pointer-events-none tw-max-w-[256px] tw-rounded tw-bg-[--bcm-popover-bg] tw-text-[--bcm-popover-text] tw-text-size-4 tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300
+            tw-shadow-md`,
         "role": "popover",
         "aria-hidden": "true",
         "style": ColorHelper.generateStyleString(style),

package/dist/collection/helper/tooltip-helper.js

@@ -6,7 +6,7 @@ import { delay, FloatingUI } from "@bcm/utils";
 import { ColorHelper, Generate, StringHelper } from "@bcm/helpers";
 import { Bcm } from "@bcm/model";
 export class Tooltip {
-  constructor({ message, targetId, placement = "top", color = "slate-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
+  constructor({ message, targetId, placement = "top", color = "gray-700", trigger = "none", size = "medium", openDelay = 0, closeDelay = 0, autoHide = false, emitShow = () => { }, emitHide = () => { }, }) {
     this.destroy = () => {
       this.el = document.getElementById(this.id);
       if (this.el) {
@@ -19,13 +19,13 @@ export class Tooltip {
     this.sizeClass = () => {
       switch (this.size) {
         case Bcm.Size.small:
-          return "tw-text-1";
+          return "tw-text-size-3";
         case Bcm.Size.medium:
-          return "tw-text-2";
+          return "tw-text-size-4";
         case Bcm.Size.large:
-          return "tw-text-3";
+          return "tw-text-size-5";
         default:
-          return "tw-text-2";
+          return "tw-text-size-4";
       }
     };
     this.init = () => {
@@ -41,7 +41,7 @@ export class Tooltip {
       this.el = 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`,
+            tw-whitespace-normal tw-break-words tw-block tw-font-sans tw-font-medium tw-pointer-events-none tw-max-w-xs tw-py-1 tw-px-3 tw-rounded-md 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.generateStyleString(style),

package/dist/collection/templates/caption-template.js

@@ -9,14 +9,14 @@ export const CaptionTemplate = ({ noCaption, captionType, caption, captionError,
 maxLength, value, }) => {
   size = size || "medium";
   return ((noCaption == false || maxLength) && (h("div", { class: cs("bcm-ui-element bcm-ui-feedback bcm-caption-area tw-mt-1 tw-min-h-[20px] tw-flex tw-flex-row tw-items-start tw-justify-between tw-font-normal", {
-      "tw-text-slate-500": !captionType || captionType == "default",
-      "tw-text-blue-600": captionType == "info",
-      "tw-text-emerald-700": captionType == "success",
-      "tw-text-amber-700": captionType == "warning",
-      "tw-text-red-600": captionType == "error",
+      "tw-text-color-caption": !captionType || captionType == "default",
+      "tw-text-color-info": captionType == "info",
+      "tw-text-color-success": captionType == "success",
+      "tw-text-color-warning": captionType == "warning",
+      "tw-text-color-error": captionType == "error",
     }, {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
-    }, captionType && captionType != "default" && `bcm-caption-area__type-${captionType}`) }, h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption), maxLength && h("div", { class: "bcm-caption-area__text tw-text-slate-500" }, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+    }, captionType && captionType != "default" && `bcm-caption-area__type-${captionType}`) }, h("div", { class: "bcm-caption-area__text" }, captionType == "error" ? customErrorMessage || captionError : caption), maxLength && h("div", { class: "bcm-caption-area__text tw-text-color-caption" }, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
 };

package/dist/collection/templates/input-template.js

@@ -51,7 +51,7 @@ ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported,
   });
   const inputClass = "bcm-input__container--" + size;
   const unitClass = cs(inputClass, "unit-prefix");
-  return (h("div", { class: containerClass, id: id + "-container" }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix), typeColor && (h("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-slate-300", style: {
+  return (h("div", { class: containerClass, id: id + "-container" }, h("span", { hidden: true }, h("slot", null)), h("span", { class: "input-prefix" }, h("slot", { name: "prefix" }), _prefix && _prefix.length > 0 && h("span", { innerHTML: _prefix }), unitPrefix && h("span", { class: unitClass }, unitPrefix), typeColor && (h("i", { class: "tw-flex tw-h-4 tw-w-4 tw-items-center tw-justify-center tw-rounded-full tw-border tw-border-solid tw-border-color-default", style: {
       backgroundColor: value,
     } }))), h(ElementTagType, Object.assign({ tabindex: "0", id: id + "-input", "bcm-internal-id": internalId, class: "bcm-input-element " + inputClass }, (ElementTagType === Bcm.HtmlElementType.input && {
     type,

package/dist/collection/templates/label-template.js

@@ -8,9 +8,9 @@ import Bcm from "../models/bcm";
 export const LabelTemplate = ({ required, value, size, form, htmlFor, type, tooltip }) => {
   size = size || "medium";
   type = type || Bcm.Status.default;
-  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-slate-600 ", {
-      "tw-text-1": size == "small",
-      "tw-text-2": size == "medium",
-      "tw-text-3": size == "large",
+  return (h("label", { form: form, htmlFor: htmlFor, "aria-hidden": "true", class: cs("bcm-ui-element bcm-ui-feedback bcm-label bcm-label__text tw-mb-1 tw-font-medium tw-text-color-label ", {
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
     }) }, value, " ", required && "*", tooltip && (h("span", { class: "tw-ml-1" }, h("bcm-tooltip", { message: tooltip, placement: "top", trigger: "hover" }, h("bcm-icon", { icon: "fas fa-info-circle" }))))));
 };

package/dist/collection/templates/step-template.js

@@ -13,10 +13,10 @@ export const StepperHeaderTemplate = ({ _title, description, status, valid, inde
     'hidden': headerHidden,
   });
   const defaultIcons = {
-    success: 'fal fa-check',
-    warning: 'fal fa-exclamation-triangle',
-    error: 'fal fa-times',
+    success: 'far fa-check',
+    warning: 'far fa-exclamation-triangle',
+    error: 'far fa-times',
   };
   const customIcon = (icon || (statusIcon && defaultIcons[status])) && h("bcm-icon", { icon: icon ? icon : defaultIcons[status] });
-  return (h("div", { class: classes }, h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) }, h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index), h("div", { class: "bcm-stepper__header-item-title size-2" }, _title), h("div", { class: "bcm-stepper__header-item-description size-1 tw-text-center", innerHTML: description }))));
+  return (h("div", { class: classes }, h("div", { class: "bcm-stepper__header-item--container", onClick: () => !disabled && stepChange(index) }, h("div", { class: "bcm-stepper__header-item-icon size-3" }, loading ? h("bcm-icon", { icon: "far fa-spinner-third fa-spin" }) : customIcon || index), h("div", { class: "bcm-stepper__header-item-title tw-text-size-5" }, _title), h("div", { class: "bcm-stepper__header-item-description tw-text-size-4 tw-text-center", innerHTML: description }))));
 };

package/dist/components/avatar.js

@@ -10,21 +10,21 @@ import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$2 } from './badge.js';
 import { d as defineCustomElement$1 } from './icon.js';
 
 const avatarStyle = ce({
   slots: {
-    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text]",
+    base: "bcm-avatar bcm-ui-element bcm-ui-content-display tw-uppercase tw-inline-flex tw-items-center tw-justify-center tw-bg-[--bcm-avatar-bg] tw-text-[--bcm-avatar-text] tw-font-medium",
     image: "tw-w-full tw-h-full",
     badge: "",
   },
   variants: {
     size: {
-      small: "bcm-avatar__size-small tw-text-1 tw-w-6 tw-h-6",
-      medium: "bcm-avatar__size-medium tw-text-2 tw-w-8 tw-h-8",
-      large: "bcm-avatar__size-large tw-text-3 tw-w-10 tw-h-10",
+      small: "bcm-avatar__size-small tw-text-size-4 tw-w-6 tw-h-6",
+      medium: "bcm-avatar__size-medium tw-text-size-5 tw-w-8 tw-h-8",
+      large: "bcm-avatar__size-large tw-text-size-6 tw-w-10 tw-h-10",
     },
     shape: {
       ellipse: {
@@ -82,7 +82,7 @@ const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const dc = Generate.getTwColor({
       color: color,
       tones: {
-        200: ["bg"],
+        100: ["bg"],
         700: ["text"],
       },
       variable: "--bcm-avatar",

package/dist/components/badge.js

@@ -10,35 +10,35 @@ import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 const badgeStyle = ce({
   slots: {
-    host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal ",
+    host: "bcm-badge bcm-ui-element bcm-ui-content-display tw-inline-flex tw-items-center tw-justify-center tw-font-normal tw-text-color-default",
     base: [
       "bcm-badge__dot tw-z-10",
       "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]",
-      "tw-whitespace-nowrap",
+      "tw-whitespace-nowrap tw-font-medium",
     ],
     dotText: "empty:tw-hidden",
   },
   variants: {
     size: {
       small: {
-        host: "tw-text-2 tw-gap-1",
-        base: "bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5",
+        host: "tw-text-size-3 tw-gap-1",
+        base: "bcm-badge__dot-size-small tw-text-size-3 tw-min-w-1.5 tw-min-h-1.5",
         dotText: "tw-px-1.5 tw-min-w-4",
       },
       medium: {
-        host: "tw-text-3 tw-gap-1.5",
-        base: "bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2",
+        host: "tw-text-size-4 tw-gap-1.5",
+        base: "bcm-badge__dot-size-medium tw-text-size-4 tw-min-w-2 tw-min-h-2",
         dotText: "tw-px-1.5 tw-min-w-5",
       },
       large: {
-        host: "tw-text-4 tw-gap-2",
-        base: "bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5",
+        host: "tw-text-size-5 tw-gap-2",
+        base: "bcm-badge__dot-size-large tw-text-size-5 tw-min-w-2.5 tw-min-h-2.5",
         dotText: "tw-px-2 tw-min-w-6",
       },
     },

package/dist/components/bcm-accordion.js

@@ -5,7 +5,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { G as Generate } from './generate.js';
 
-const accordionCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}";
+const accordionCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}:host{display:block}.bcm-accordion .bcm-expansion-panel{border-radius:0}.bcm-accordion .bcm-expansion-panel .bcm-expansion-panel__header{border-radius:0}.bcm-accordion .bcm-expansion-panel:first-child{border-top-left-radius:var(--bcm-ui-border-radius-default);border-top-right-radius:var(--bcm-ui-border-radius-default)}.bcm-accordion .bcm-expansion-panel:first-child .bcm-expansion-panel__header{border-top-left-radius:var(--bcm-ui-border-radius-default);border-top-right-radius:var(--bcm-ui-border-radius-default)}.bcm-accordion .bcm-expansion-panel:last-child{border-bottom-left-radius:var(--bcm-ui-border-radius-default);border-bottom-right-radius:var(--bcm-ui-border-radius-default)}.bcm-accordion .bcm-expansion-panel:last-child .bcm-expansion-panel__header{border-bottom-left-radius:var(--bcm-ui-border-radius-default);border-bottom-right-radius:var(--bcm-ui-border-radius-default)}";
 
 const BcmAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -59,7 +59,7 @@ const BcmAccordion$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElemen
     }
   }
   render() {
-    return (h(Host, { id: this._id }, h("slot", null)));
+    return (h(Host, { id: this._id, class: "bcm-accordion" }, h("slot", null)));
   }
   get el() { return this; }
   static get style() { return accordionCss; }

package/dist/components/bcm-alert.js

@@ -3,32 +3,12 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { G as Generate, s as snq, S as StatusProps, T as TypeProps } from './generate.js';
+import { G as Generate, S as StatusProps, T as TypeProps } from './generate.js';
 import { c as classnames } from './index2.js';
-import { c as createStore } from './index4.js';
 import { S as StringHelper } from './string-helper.js';
 import { d as defineCustomElement$2 } from './icon.js';
 
-const { state } = createStore({
-  value: new Map(),
-  setData: {},
-  removeData: {}
-});
-const setValue = (val) => {
-  const data = Object.assign(Object.assign(Object.assign({}, val), { size: val.bigIcon ? 'medium' : 14, iconType: val.bigIcon ? 'outlined' : 'fill' }), Generate.getIconAttrWithStatusType(val.status));
-  state.value.set(data.id, data);
-};
-const removeValue = (_id) => {
-  state.value.delete(_id);
-};
-const getValue = (id) => snq(() => state.value.get(id), {});
-const alertStates = {
-  setValue,
-  removeValue,
-  getValue
-};
-
-const alertCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-alert{display:block;width:100%;max-width:400px;box-sizing:border-box;padding:8px 16px;box-shadow:0px 2px 4px rgba(0, 0, 0, 0.15);border-radius:2px;position:relative;grid-gap:8px}.bcm-alert.hidden{display:none}.bcm-alert.full-width{max-width:100%}.bcm-alert__status-info{border:1px solid var(--bcm-color-blue-3);background-color:var(--bcm-color-blue-1)}.bcm-alert__status-error{border:1px solid var(--bcm-color-red-3);background-color:var(--bcm-color-red-1)}.bcm-alert__status-warning{border:1px solid var(--bcm-color-warmyellow-3);background-color:var(--bcm-color-warmyellow-1)}.bcm-alert__status-success{border:1px solid var(--bcm-color-green-3);background-color:var(--bcm-color-green-1)}.bcm-alert__type-banner{border:none}.bcm-alert__header{display:flex;align-items:center;justify-content:space-between;padding:4px 0}.bcm-alert__header-message{display:flex;align-items:center;grid-gap:8px;color:var(--bcm-color-grey-8)}.bcm-alert__header-dismiss{display:flex;position:absolute;top:-1px;right:0;padding:16px;color:var(--bcm-color-grey-8)}.bcm-alert__header-dismiss:hover{cursor:pointer;color:var(--bcm-color-grey-9)}.bcm-alert__content{color:var(--bcm-color-grey-8)}.bcm-alert__content p{margin:0;padding:0}";
+const alertCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-alert{display:block;font-family:Inter, sans-serif;font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5);font-weight:500;width:100%;max-width:400px;box-sizing:border-box;padding:var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-5) var(--bcm-ui-spacing-2) var(--bcm-ui-spacing-3);border-radius:var(--bcm-ui-border-radius-default);position:relative}.bcm-alert.hidden{display:none}.bcm-alert.full-width{max-width:100%}.bcm-alert__status-default{color:var(--bcm-ui-color-text-default);background-color:var(--bcm-ui-color-background-default-default)}.bcm-alert__status-info{color:var(--bcm-ui-color-text-info);background-color:var(--bcm-ui-color-background-stated-info-default)}.bcm-alert__status-error{color:var(--bcm-ui-color-text-error);background-color:var(--bcm-ui-color-background-stated-error-default)}.bcm-alert__status-warning{color:var(--bcm-ui-color-text-warning);background-color:var(--bcm-ui-color-background-stated-warning-default)}.bcm-alert__status-success{color:var(--bcm-ui-color-text-success);background-color:var(--bcm-ui-color-background-stated-success-default)}.bcm-alert__type-banner{border:none}.bcm-alert__header{display:inline-block}.bcm-alert__header-message{display:flex;align-items:center;gap:var(--bcm-ui-spacing-2);margin-right:var(--bcm-ui-spacing-2)}.bcm-alert__header-message:empty{display:none}.bcm-alert__header-dismiss{display:flex;position:absolute;top:var(--bcm-ui-spacing-1);right:var(--bcm-ui-spacing-1);padding:var(--bcm-ui-spacing-2)}.bcm-alert__header-dismiss:hover{cursor:pointer}.bcm-alert__content{display:inline-block}.bcm-alert__content p{margin:0;padding:0}";
 
 const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -37,7 +17,6 @@ const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.alertdismissible = createEvent(this, "bcm-alert-dismissible", 7);
     this.hidden = false;
     this._id = Generate.UID();
-    this._title = undefined;
     this.description = undefined;
     this.status = StatusProps.info;
     this.type = TypeProps.basic;
@@ -58,40 +37,48 @@ const BcmAlert$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         return;
       }
     }
-    this.setData();
   }
   dismiss(e) {
     this.alertdismissible.emit(e);
     this.el.remove();
   }
-  getStateData() {
-    return alertStates.getValue(this._id);
-  }
-  setData() {
-    const { status, type, bigIcon } = this;
-    alertStates.setValue({
-      id: this._id,
-      status,
-      type,
-      bigIcon,
-    });
+  // setData() {
+  //     const { status, type, bigIcon } = this;
+  //     alertStates.setValue({
+  //         id: this._id,
+  //         status,
+  //         type,
+  //         bigIcon,
+  //     });
+  // }
+  statusIcon() {
+    const { status } = this;
+    switch (status) {
+      case StatusProps.info:
+        return "far fa-info-circle";
+      case StatusProps.error:
+        return "far fa-times-circle";
+      case StatusProps.warning:
+        return "far fa-exclamation-circle";
+      case StatusProps.success:
+        return "far fa-check-circle";
+    }
   }
   render() {
-    const { fullWidth, status, type, icon, bigIcon, _title, hidden, dismissible, description } = this;
-    const hostClasses = classnames('bcm-alert', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
+    const { fullWidth, status, type, icon, bigIcon, hidden, dismissible, description } = this;
+    const hostClasses = classnames('bcm-alert bcm-ui-element', 'bcm-alert__type-' + type, 'bcm-alert__status-' + status, {
       'full-width': fullWidth,
       hidden,
     });
-    const headerMessage = classnames('bcm-alert__header-message', !!description ? 'size-3' : 'size-2');
-    const state = this.getStateData();
-    return (h(Host, { class: hostClasses }, h("span", { hidden: true }, h("slot", null)), h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: state.icon }), _title), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "fal fa-times" })))), h("main", { class: "bcm-alert__content size-2" }, description && h("p", null, description), h("slot", null))));
+    const headerMessage = classnames('bcm-alert__header-message', !!description ? '' : '');
+    const _icon = this.statusIcon();
+    return (h(Host, { class: hostClasses }, h("header", { class: "bcm-alert__header" }, h("span", { class: headerMessage }, (bigIcon || icon) && h("bcm-icon", { icon: _icon }))), h("main", { class: "bcm-alert__content" }, description && h("p", null, description), h("slot", null)), dismissible && (h("span", { class: "bcm-alert__header-dismiss", onClick: e => this.dismiss(e) }, typeof dismissible === 'string' ? dismissible : h("bcm-icon", { icon: "far fa-times" })))));
   }
   get el() { return this; }
   static get style() { return alertCss; }
 }, [4, "bcm-alert", {
     "hidden": [1028],
     "_id": [1537, "id"],
-    "_title": [1032],
     "description": [1032],
     "status": [1025],
     "type": [1025],

package/dist/components/bcm-attendance-actions-comment.js

@@ -12,7 +12,7 @@ import './element-dragger.js';
 import { d as delay } from './utils.js';
 import { F as FloatingUI } from './floating-ui.js';
 import { B as Bcm } from './bcm.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$a } from './button.js';
 import { d as defineCustomElement$9 } from './colorful.js';
 import { d as defineCustomElement$8 } from './form.js';

package/dist/components/bcm-attendance-actions-dropdown.js

@@ -12,7 +12,7 @@ import './element-dragger.js';
 import { F as FloatingUI } from './floating-ui.js';
 import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 const attendanceActionDropdownStyle = ce({
   slots: {

package/dist/components/bcm-attendance-actions.js

@@ -11,7 +11,7 @@ import './string-helper.js';
 import './element-dragger.js';
 import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
-import { c as ce } from './index5.js';
+import { c as ce } from './index4.js';
 
 // --bcm-attendance-actions-button-bg: #F1F5F9; /* slate-100 */
 // --bcm-attendance-actions-button-text: #334155; /* slate-700 */

package/dist/components/bcm-button-group.js

@@ -8,7 +8,7 @@ import { a as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { S as StringHelper } from './string-helper.js';
 
-const buttonGroupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.bcm-button-group{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;width:fit-content;background-color:var(--bcm-new-ds-color-slate-300);border:1px solid var(--bcm-new-ds-color-slate-300);gap:1px;border-radius:4px}.bcm-button-group .bcm-button__container{border-radius:0;border:none}.bcm-button-group .bcm-button:first-child .bcm-button__container{border-top-left-radius:4px;border-bottom-left-radius:4px}.bcm-button-group .bcm-button:last-child .bcm-button__container{border-top-right-radius:4px;border-bottom-right-radius:4px}.bcm-button-group__vertical{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;flex-wrap:nowrap}.bcm-button-group__vertical .bcm-button{width:100%}.bcm-button-group__vertical .bcm-button__container{width:100%;border-radius:0}.bcm-button-group__vertical .bcm-button:first-child .bcm-button__container{border-radius:4px 4px 0 0}.bcm-button-group__vertical .bcm-button:last-child .bcm-button__container{border-radius:0 0 4px 4px}";
+const buttonGroupCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");.size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}.bcm-button-group{font-family:Inter, sans-serif;font-size:var(--bcm-ui-font-size-5);line-height:var(--bcm-ui-line-height-5);font-weight:500;display:flex;flex-direction:row;align-items:center;justify-content:center;width:fit-content;background-color:var(--bcm-ui-color-background-default-active);border:1px solid var(--bcm-ui-color-border-default);gap:1px;border-radius:var(--bcm-ui-border-radius-default)}.bcm-button-group .bcm-button__container{border-radius:0;border:none}.bcm-button-group .bcm-button:first-child .bcm-button__container{border-top-left-radius:var(--bcm-ui-border-radius-default);border-bottom-left-radius:var(--bcm-ui-border-radius-default)}.bcm-button-group .bcm-button:last-child .bcm-button__container{border-top-right-radius:var(--bcm-ui-border-radius-default);border-bottom-right-radius:var(--bcm-ui-border-radius-default)}.bcm-button-group__vertical{flex-direction:column;align-items:center;justify-content:center}.bcm-button-group__vertical .bcm-button{width:100%}.bcm-button-group__vertical .bcm-button__container{width:100%;border-radius:0}.bcm-button-group__vertical .bcm-button:first-child .bcm-button__container{border-radius:var(--bcm-ui-border-radius-default) var(--bcm-ui-border-radius-default) 0 0}.bcm-button-group__vertical .bcm-button:last-child .bcm-button__container{border-radius:0 0 var(--bcm-ui-border-radius-default) var(--bcm-ui-border-radius-default)}";
 
 const BcmButtonGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {

package/dist/components/bcm-checkbox-group.js

@@ -7,7 +7,7 @@ import { c as classnames } from './index2.js';
 import { G as Generate, s as snq } from './generate.js';
 import { a as Bcm } from './bcm.js';
 import { d as delay, g as getChildElements } from './utils.js';
-import { c as createStore } from './index4.js';
+import { c as createStore } from './index5.js';
 import { L as LabelTemplate, d as defineCustomElement$3 } from './label.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { d as defineCustomElement$5 } from './checkbox.js';

package/dist/components/bcm-color-input.js

@@ -64,7 +64,7 @@ const BcmColorInput$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     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), 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-solid tw-border-color-default", 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/components/bcm-error-layout.js

@@ -5,7 +5,7 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { c as classnames } from './index2.js';
 
-const errorLayoutCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.error-layout{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;font-size:12px;line-height:calc(12px + 8px);padding:12px;background:var(--bcm-new-ds-color-red-100);border:2px solid var(--bcm-new-ds-color-red-200);box-sizing:border-box;border-radius:4px;color:var(--bcm-new-ds-color-red-400)}.error-layout li>span{margin-left:-4px}";
+const errorLayoutCss = "@import url(\"https://fonts.googleapis.com/css?family=Roboto:400,500\");@import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@200;400;500;600&display=swap\"); .size-1{font-size:12px;line-height:20px}.size-2{font-size:14px;line-height:22px}.size-3{font-size:16px;line-height:24px}.size-4{font-size:20px;line-height:28px}.size-5{font-size:24px;line-height:32px}.size-6{font-size:30px;line-height:38px}.size-7{font-size:38px;line-height:46px}.size-8{font-size:46px;line-height:54px}.size-9{font-size:56px;line-height:64px}.weight-regular{font-weight:400}.weight-semibold{font-weight:500}.input-size-large{height:40px}.input-size-medium{height:32px}.input-size-small{height:24px}.resize-none textarea{resize:none}.resize-vertical textarea{resize:vertical}.resize-auto textarea{height:auto;resize:none}.textarea-size-large{padding:4px 0 0 4px;min-height:40px}.textarea-size-large .bcm-input-element{min-height:calc((40px - 8px) + 2px)}.textarea-size-large .input-clear-button{height:calc( 40px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-medium{padding:4px 0 0 4px;min-height:32px}.textarea-size-medium .bcm-input-element{min-height:calc((32px - 8px) + 2px)}.textarea-size-medium .input-clear-button{height:calc( 32px - 16px );top:8px;padding:0;margin-right:8px}.textarea-size-small{padding:0px 0 0 4px;min-height:24px}.textarea-size-small .bcm-input-element{min-height:calc((24px - 8px) + 2px)}.textarea-size-small .input-clear-button{height:calc( 24px - 16px );top:8px;padding:0;margin-right:8px}*{box-sizing:border-box}.error-layout{font-family:Inter, sans-serif;font-size:var(--bcm-ui-font-size-4);line-height:var(--bcm-ui-line-height-4);font-weight:500;padding:var(--bcm-ui-spacing-4);background:var(--bcm-ui-color-background-stated-error-default);border:1px solid var(--bcm-ui-color-border-error);border-radius:var(--bcm-ui-border-radius-default);color:var(--bcm-ui-color-text-error)}.error-layout ul{margin:0;padding-left:var(--bcm-ui-spacing-5)}";
 
 const BcmErrorLayout$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -48,7 +48,7 @@ const BcmErrorLayout$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
   render() {
     const { itemsProp } = this;
     const classes = classnames('error-layout', this.size);
-    const hostClasses = classnames(this.hidden ? 'hidden' : null);
+    const hostClasses = classnames("tw-w-full bcm-ui-element", 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))))))));
   }
   get el() { return this; }