bromcom-ui 2.8.0-rc.9 → 3.0.0-rc.0

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

@@ -2,17 +2,21 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-export const CaptionTemplate = ({ noCaption, captionType, captionClasses, caption, captionError, customErrorMessage, size, 
+import { h } from "@stencil/core";
+import cs from "classnames";
+export const CaptionTemplate = ({ noCaption, captionType, caption, captionError, customErrorMessage, size, 
 //textarea props
-maxLength, value }) => {
+maxLength, value, }) => {
   size = size || "medium";
-  const hostClasses = cs('bcm-caption-area', 'bcm-caption-area__size-' + size);
-  const classes = `bcm-caption-area__text`;
-  const captionTextClass = `${classes} ${captionType} ${captionClasses}`;
-  const countClasses = `${classes} default ${captionClasses}`;
-  return ((noCaption == false || maxLength) && (h("div", { class: hostClasses }, h("span", { class: captionTextClass }, captionType == "error"
-    ? h("span", null, " ", customErrorMessage || captionError, " ")
-    : caption && h("span", null, " ", caption, " ")), maxLength && h("span", { class: countClasses }, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
+  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-600": captionType == "success",
+      "tw-text-amber-600": captionType == "warning",
+      "tw-text-red-600": captionType == "error",
+    }, {
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+    }) }, h("div", null, captionType == "error" ? customErrorMessage || captionError : caption), maxLength && h("div", null, " ", `${(value === null || value === void 0 ? void 0 : value.length) || 0}/${maxLength}`, " "))));
 };

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

@@ -2,23 +2,8 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h } from '@stencil/core';
-import cs from 'classnames';
-export const IconTemplate = ({ icon, hidden }) => {
-  const replaceIcon = (icon) => {
-    if (icon && icon.indexOf('fa-') > -1) {
-      const split = icon.split(" ");
-      let prefix = split[0].replace(/^fa/g, "bcm-fa");
-      let iconName = split[1].replace(/^fa-/g, "bcm-fa-");
-      if (split[2]) {
-        iconName += " " + split[2].replace(/^fa-/g, "bcm-fa-");
-      }
-      return prefix + " " + iconName;
-    }
-    return icon;
-  };
-  const hostClasses = cs('bcm-icon', replaceIcon(icon), {
-    hidden,
-  });
-  return (h("span", { class: hostClasses }));
+import { h } from "@stencil/core";
+import cs from "classnames";
+export const IconTemplate = ({ icon, className }) => {
+  return (h("span", { class: cs("before:tw-clear-both after:tw-clear-both", className) }, h("i", { class: cs("!tw-block tw-text-size-inherit", icon) })));
 };

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

@@ -57,5 +57,5 @@ ref, handleBlur, handleFocus, handleInput, handleChange, isEyeDropperSupported,
     type,
     autocomplete: autocomplete ? "on" : "off",
     pattern,
-  }), (ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize }), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: el => ref(el), onBlur: e => templateHandleBlur(e), onFocus: e => templateHandleFocus(e), onInput: e => handleInput(e), onChange: e => handleChange(e) })), h("span", { class: "input-suffix-content" }, clearable && !disabled && !readonly && (h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: e => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" })))), h("span", { class: "input-suffix-content" }, (type === "password" || type === "text") && passwordToggle && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === "number" && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps("up") }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps("down") }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== "number" && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix }))), typeColor && isEyeDropperSupported() && (h("span", { class: "input-suffix" }, h("span", null, h("i", { class: "far fa-eye-dropper", onClick: () => eyeDropper() })))))));
+  }), (ElementTagType === Bcm.HtmlElementType.textarea && { rows: rows, resize: resize }), { value: value, maxLength: maxLength, placeholder: placeholder, disabled: disabled, readOnly: readonly, ref: el => ref(el), onBlur: e => templateHandleBlur(e), onFocus: e => templateHandleFocus(e), onInput: e => handleInput(e), onChange: e => handleChange(e) })), h("span", { class: "input-suffix-content" }, clearable && !disabled && !readonly && (h("span", { class: "input-suffix input-suffix-button input-clear-button", onClick: e => handleClear(e) }, h("bcm-icon", { icon: "far fa-times" })))), Bcm.HtmlElementType.input === elementType && (h("span", { class: "input-suffix-content" }, captionType === "error" && (h("span", { class: "input-suffix input-error-icon" }, h("bcm-icon", { icon: "fas fa-times-circle" }))))), h("span", { class: "input-suffix-content" }, (type === "password" || type === "text") && passwordToggle && (h("span", { class: "input-suffix input-suffix-button", onClick: () => changePasswordVisibility() }, h("bcm-icon", { icon: isPasswordVisible ? "far fa-eye-slash" : "far fa-eye" })))), h("span", { class: "input-suffix-content" }, Object.keys(defaultIcons).includes(type) && !noDefaultIcon && (h("span", { class: "input-suffix" }, h("bcm-icon", { icon: defaultIcons[type] })))), h("span", { class: "input-suffix-content" }, type === "number" && (h("div", { class: caretContainer }, h("span", { class: "bcm-input-caret", onClick: () => steps("up") }, h("bcm-icon", { icon: "fas fa-caret-up" })), h("span", { class: "bcm-input-caret", onClick: () => steps("down") }, h("bcm-icon", { icon: "fas fa-caret-down" }))))), h("span", { class: "input-suffix-content" }, type !== "number" && (h("span", { class: "input-suffix" }, h("slot", { name: "suffix" }), _suffix && _suffix.length > 0 && h("span", { innerHTML: _suffix }))), typeColor && isEyeDropperSupported() && (h("span", { class: "input-suffix" }, h("span", null, h("i", { class: "far fa-eye-dropper", onClick: () => eyeDropper() })))))));
 };

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

@@ -5,10 +5,12 @@
 import { h } from '@stencil/core';
 import cs from 'classnames';
 import Bcm from '../models/bcm';
-import { SlotTemplate } from './slot-template';
 export const LabelTemplate = ({ required, value, size, form, htmlFor, type }) => {
   size = size || "medium";
   type = type || Bcm.Status.default;
-  const labelClasses = cs('bcm-label__text', 'bcm-label__text-' + type, 'bcm-label__size-' + size);
-  return (h("label", { form: form, htmlFor: htmlFor, class: labelClasses }, " ", h(SlotTemplate, { value: value }), " ", required && ('*')));
+  return (h("label", { form: form, htmlFor: htmlFor, class: cs("bcm-ui-element bcm-ui-feedback bcm-label tw-mb-1 tw-text-slate-600 tw-font-medium ", {
+      "tw-text-size-3": size == "small",
+      "tw-text-size-4": size == "medium",
+      "tw-text-size-5": size == "large",
+    }) }, value, " ", required && ('*')));
 };

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

@@ -18,5 +18,5 @@ export const StepperHeaderTemplate = ({ _title, description, status, valid, inde
     error: 'fal 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" }, 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" }, description))));
 };

package/dist/components/avatar.js

@@ -4,18 +4,14 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { I as IsLoad } from './is-load-decorator.js';
-import { C as ColorHelper } from './color-helper.js';
-import './validators.js';
+import './color-helper.js';
+import './element-dragger.js';
 import { G as Generate } from './generate.js';
-import { N as NumberHelper } from './number-helper.js';
+import './number-helper.js';
 import './string-helper.js';
-import './element-dragger.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
-import { d as defineCustomElement$2 } from './badge.js';
-import { d as defineCustomElement$1 } from './icon.js';
-
-const avatarCss = "@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}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-avatar{--bcm-avatar-color:var(--bcm-new-ds-color-slate-600);--bcm-avatar-background-color:var(--bcm-new-ds-color-slate-100);--prefix-height:40px;--prefix-font-size:font-size(2);font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;background-color:var(--bcm-avatar-background-color);color:var(--bcm-avatar-color);text-transform:uppercase}.bcm-avatar.hidden{display:none}.bcm-avatar img{width:100%;height:100%}.bcm-avatar__shape-ellipse,.bcm-avatar__shape-ellipse>img{border-radius:100px}.bcm-avatar__shape-square,.bcm-avatar__shape-square>img{border-radius:4px}.bcm-avatar__shape-ellipse .bcm-badge{top:0px;right:0px}.bcm-avatar__shape-square .bcm-badge{top:-2px;right:-2px}.bcm-avatar__size-small{font-size:10px;line-height:calc(10px + 8px);height:24px;width:24px}.bcm-avatar__size-medium{font-size:12px;line-height:calc(12px + 8px);height:32px;width:32px}.bcm-avatar__size-large{font-size:14px;line-height:calc(14px + 8px);height:40px;width:40px}.bcm-avatar__size-custom{font-size:var(--bcm-avatar-font-size);line-height:calc(var(--bcm-avatar-font-size) + 8px);height:var(--bcm-avatar-height);width:var(--bcm-avatar-height)}.bcm-avatar__status{position:relative}.bcm-avatar__status .bcm-badge{position:absolute}";
+import { d as defineCustomElement$1 } from './badge.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -38,65 +34,75 @@ const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.alt = undefined;
     this.shape = Bcm.Shape.ellipse;
     this.size = Bcm.Size.medium;
-    this.color = undefined;
+    this.color = "slate";
     this.status = undefined;
     this.isFallback = false;
   }
   componentWillLoad() {
-    this.name = this.name && this.name.trim() || '';
+    this.name = (this.name && this.name.trim()) || "";
   }
   handleError() {
     this.isFallback = true;
   }
-  getCustomSizes(customSize) {
-    return Math.round(parseInt(customSize) / 3);
-  }
   getFirstLetters(name) {
-    const splitted = name.split(' ');
+    const splitted = name.split(" ");
     if (splitted.length === 1)
       return splitted[0].substring(0, 2);
     return splitted[0].charAt(0) + splitted[splitted.length - 1].charAt(0);
   }
-  setStyleVariables() {
-    const { size } = this;
-    let { color } = this;
-    !color && (color = 'slate');
-    let height = NumberHelper.toNumber(size);
-    let fontSize = Math.round(parseInt(height) / 3);
-    const prefix = `--bcm-avatar`;
-    return {
-      [`${prefix}-color`]: ColorHelper.dsColor(`${color}-600`),
-      [`${prefix}-background-color`]: ColorHelper.dsColor(`${color}-100`),
-      [`${prefix}-height`]: `${height}px`,
-      [`${prefix}-font-size`]: `${fontSize}px`
-    };
-  }
   render() {
-    const { image, name, alt, hidden, shape, size, status } = this;
+    const { image, name, alt, hidden, shape, size, status, color, isFallback } = this;
     const isCustom = !Object.keys(Bcm.BaseSize).includes(size);
-    const hostClasses = classnames('bcm-avatar', `bcm-avatar__shape-${shape}`, `bcm-avatar__size-${isCustom ? 'custom' : size}`, {
-      'hidden': hidden,
-      'bcm-avatar__status': !!status
-    });
-    const GetIcon = () => h("bcm-icon", { icon: "fas fa-user" });
-    return (h(Host, { class: hostClasses, style: this.setStyleVariables() }, h("span", { hidden: true }, h("slot", null)), this.isFallback ? (this.name ? this.getFirstLetters(this.name) : GetIcon())
-      : image
-        ? h("img", { onError: () => this.handleError(), src: image, alt: alt })
-        : name ? this.getFirstLetters(name)
-          : GetIcon(), status && h("bcm-badge", { status: status })));
+    const defaultColors = Generate.getTwColor({ color });
+    const IconTemplate = () => (h("i", { class: classnames("far fa-user", {
+        "tw-text-size-2": size === Bcm.Size.small,
+        "tw-text-size-3": size === Bcm.Size.medium,
+        "tw-text-size-4": size === Bcm.Size.large,
+        "tw-px-[18px] tw-py-[17px] tw-text-4": isCustom,
+      }) }));
+    const ImageTemplate = () => {
+      return h("img", { onError: () => this.handleError(), src: image, alt: alt, class: classnames("tw-h-full tw-w-full tw-rounded-full tw-object-cover") });
+    };
+    const NameTemplate = () => {
+      return (h("span", { class: classnames("tw-uppercase", {
+          "tw-p-1 tw-text-size-3": size === Bcm.Size.small,
+          "tw-px-[5px] tw-py-1.5 tw-text-size-4": size === Bcm.Size.medium,
+          "tw-px-[9.5px] tw-py-[9px] tw-text-size-5": size === Bcm.Size.large,
+          "tw-px-[13.5px] tw-py-[13px] tw-text-4": isCustom,
+        }) }, this.getFirstLetters(name)));
+    };
+    const StatusTemplate = () => {
+      return (h("bcm-badge", { class: classnames("tw-absolute", {
+          "tw-right-0 tw-top-0": shape === Bcm.Shape.ellipse,
+          "tw-right-[-2px] tw-top-[-2px]": shape === Bcm.Shape.square,
+        }, {
+          "tw-h-1.5 tw-w-1.5": size === Bcm.Size.small,
+          "tw-h-2 tw-w-2": size === Bcm.Size.medium,
+          "tw-h-2.5 tw-w-2.5": size === Bcm.Size.large,
+        }), status: status }));
+    };
+    return (h(Host, { role: "avatar", class: classnames("bcm-ui-element bcm-ui-content-display bcm-avatar", "tw-flex tw-items-center tw-justify-center tw-rounded tw-bg-default-200 tw-text-default-700", {
+        "tw-hidden": hidden,
+        "tw-relative": status,
+        "tw-h-6 tw-w-6": size === Bcm.Size.small,
+        "tw-h-8 tw-w-8": size === Bcm.Size.medium,
+        "tw-h-10 tw-w-10": size === Bcm.Size.large,
+        "tw-h-[50px] tw-w-[50px]": isCustom,
+      }, {
+        "tw-rounded-full": shape === Bcm.Shape.ellipse,
+      }), style: Object.assign({}, defaultColors) }, h("span", { class: "tw-hidden" }, h("slot", null)), image && !isFallback && h(ImageTemplate, null), name && !isFallback && h(NameTemplate, null), status && h(StatusTemplate, null), isFallback ? name ? h(NameTemplate, null) : h(IconTemplate, null) : null, !isFallback && !image && !name && h(IconTemplate, null)));
   }
   get el() { return this; }
-  static get style() { return avatarCss; }
 }, [4, "bcm-avatar", {
-    "_id": [1537, "id"],
-    "hidden": [1028],
-    "image": [1025],
+    "_id": [513, "id"],
+    "hidden": [4],
+    "image": [1],
     "name": [1025],
-    "alt": [1025],
-    "shape": [1025],
-    "size": [1025],
-    "color": [1032],
-    "status": [1025],
+    "alt": [1],
+    "shape": [1],
+    "size": [1],
+    "color": [1],
+    "status": [1],
     "isFallback": [32]
   }]);
 __decorate([
@@ -106,7 +112,7 @@ function defineCustomElement() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["bcm-avatar", "bcm-badge", "bcm-icon"];
+  const components = ["bcm-avatar", "bcm-badge"];
   components.forEach(tagName => { switch (tagName) {
     case "bcm-avatar":
       if (!customElements.get(tagName)) {
@@ -114,11 +120,6 @@ function defineCustomElement() {
       }
       break;
     case "bcm-badge":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-    case "bcm-icon":
       if (!customElements.get(tagName)) {
         defineCustomElement$1();
       }

package/dist/components/badge.js

@@ -3,14 +3,14 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
-import { a as Bcm } from './bcm.js';
-import { G as Generate } from './generate.js';
-import { S as SlotTemplate } from './slot-template.js';
-import { C as ColorHelper } from './color-helper.js';
 import { I as IsLoad } from './is-load-decorator.js';
-
-const badgeCss = "@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}:root,::after,::before{--bcm-new-ds-color-inherit:inherit;--bcm-new-ds-color-current:currentColor;--bcm-new-ds-color-transparent:transparent;--bcm-new-ds-color-black:#000;--bcm-new-ds-color-white:#fff;--bcm-new-ds-color-slate:#64748b;--bcm-new-ds-color-slate-50:#f8fafc;--bcm-new-ds-color-slate-100:#f1f5f9;--bcm-new-ds-color-slate-200:#e2e8f0;--bcm-new-ds-color-slate-300:#cbd5e1;--bcm-new-ds-color-slate-400:#94a3b8;--bcm-new-ds-color-slate-500:#64748b;--bcm-new-ds-color-slate-600:#475569;--bcm-new-ds-color-slate-700:#334155;--bcm-new-ds-color-slate-800:#1e293b;--bcm-new-ds-color-slate-900:#0f172a;--bcm-new-ds-color-gray:#6b7280;--bcm-new-ds-color-gray-50:#f9fafb;--bcm-new-ds-color-gray-100:#f3f4f6;--bcm-new-ds-color-gray-200:#e5e7eb;--bcm-new-ds-color-gray-300:#d1d5db;--bcm-new-ds-color-gray-400:#9ca3af;--bcm-new-ds-color-gray-500:#6b7280;--bcm-new-ds-color-gray-600:#4b5563;--bcm-new-ds-color-gray-700:#374151;--bcm-new-ds-color-gray-800:#1f2937;--bcm-new-ds-color-gray-900:#111827;--bcm-new-ds-color-zinc:#71717a;--bcm-new-ds-color-zinc-50:#fafafa;--bcm-new-ds-color-zinc-100:#f4f4f5;--bcm-new-ds-color-zinc-200:#e4e4e7;--bcm-new-ds-color-zinc-300:#d4d4d8;--bcm-new-ds-color-zinc-400:#a1a1aa;--bcm-new-ds-color-zinc-500:#71717a;--bcm-new-ds-color-zinc-600:#52525b;--bcm-new-ds-color-zinc-700:#3f3f46;--bcm-new-ds-color-zinc-800:#27272a;--bcm-new-ds-color-zinc-900:#18181b;--bcm-new-ds-color-neutral:#737373;--bcm-new-ds-color-neutral-50:#fafafa;--bcm-new-ds-color-neutral-100:#f5f5f5;--bcm-new-ds-color-neutral-200:#e5e5e5;--bcm-new-ds-color-neutral-300:#d4d4d4;--bcm-new-ds-color-neutral-400:#a3a3a3;--bcm-new-ds-color-neutral-500:#737373;--bcm-new-ds-color-neutral-600:#525252;--bcm-new-ds-color-neutral-700:#404040;--bcm-new-ds-color-neutral-800:#262626;--bcm-new-ds-color-neutral-900:#171717;--bcm-new-ds-color-stone:#78716c;--bcm-new-ds-color-stone-50:#fafaf9;--bcm-new-ds-color-stone-100:#f5f5f4;--bcm-new-ds-color-stone-200:#e7e5e4;--bcm-new-ds-color-stone-300:#d6d3d1;--bcm-new-ds-color-stone-400:#a8a29e;--bcm-new-ds-color-stone-500:#78716c;--bcm-new-ds-color-stone-600:#57534e;--bcm-new-ds-color-stone-700:#44403c;--bcm-new-ds-color-stone-800:#292524;--bcm-new-ds-color-stone-900:#1c1917;--bcm-new-ds-color-red:#ef4444;--bcm-new-ds-color-red-50:#fef2f2;--bcm-new-ds-color-red-100:#fee2e2;--bcm-new-ds-color-red-200:#fecaca;--bcm-new-ds-color-red-300:#fca5a5;--bcm-new-ds-color-red-400:#f87171;--bcm-new-ds-color-red-500:#ef4444;--bcm-new-ds-color-red-600:#dc2626;--bcm-new-ds-color-red-700:#b91c1c;--bcm-new-ds-color-red-800:#991b1b;--bcm-new-ds-color-red-900:#7f1d1d;--bcm-new-ds-color-orange:#f97316;--bcm-new-ds-color-orange-50:#fff7ed;--bcm-new-ds-color-orange-100:#ffedd5;--bcm-new-ds-color-orange-200:#fed7aa;--bcm-new-ds-color-orange-300:#fdba74;--bcm-new-ds-color-orange-400:#fb923c;--bcm-new-ds-color-orange-500:#f97316;--bcm-new-ds-color-orange-600:#ea580c;--bcm-new-ds-color-orange-700:#c2410c;--bcm-new-ds-color-orange-800:#9a3412;--bcm-new-ds-color-orange-900:#7c2d12;--bcm-new-ds-color-amber:#f59e0b;--bcm-new-ds-color-amber-50:#fffbeb;--bcm-new-ds-color-amber-100:#fef3c7;--bcm-new-ds-color-amber-200:#fde68a;--bcm-new-ds-color-amber-300:#fcd34d;--bcm-new-ds-color-amber-400:#fbbf24;--bcm-new-ds-color-amber-500:#f59e0b;--bcm-new-ds-color-amber-600:#d97706;--bcm-new-ds-color-amber-700:#b45309;--bcm-new-ds-color-amber-800:#92400e;--bcm-new-ds-color-amber-900:#78350f;--bcm-new-ds-color-yellow:#eab308;--bcm-new-ds-color-yellow-50:#fefce8;--bcm-new-ds-color-yellow-100:#fef9c3;--bcm-new-ds-color-yellow-200:#fef08a;--bcm-new-ds-color-yellow-300:#fde047;--bcm-new-ds-color-yellow-400:#facc15;--bcm-new-ds-color-yellow-500:#eab308;--bcm-new-ds-color-yellow-600:#ca8a04;--bcm-new-ds-color-yellow-700:#a16207;--bcm-new-ds-color-yellow-800:#854d0e;--bcm-new-ds-color-yellow-900:#713f12;--bcm-new-ds-color-lime:#84cc16;--bcm-new-ds-color-lime-50:#f7fee7;--bcm-new-ds-color-lime-100:#ecfccb;--bcm-new-ds-color-lime-200:#d9f99d;--bcm-new-ds-color-lime-300:#bef264;--bcm-new-ds-color-lime-400:#a3e635;--bcm-new-ds-color-lime-500:#84cc16;--bcm-new-ds-color-lime-600:#65a30d;--bcm-new-ds-color-lime-700:#4d7c0f;--bcm-new-ds-color-lime-800:#3f6212;--bcm-new-ds-color-lime-900:#365314;--bcm-new-ds-color-green:#22c55e;--bcm-new-ds-color-green-50:#f0fdf4;--bcm-new-ds-color-green-100:#dcfce7;--bcm-new-ds-color-green-200:#bbf7d0;--bcm-new-ds-color-green-300:#86efac;--bcm-new-ds-color-green-400:#4ade80;--bcm-new-ds-color-green-500:#22c55e;--bcm-new-ds-color-green-600:#16a34a;--bcm-new-ds-color-green-700:#15803d;--bcm-new-ds-color-green-800:#166534;--bcm-new-ds-color-green-900:#14532d;--bcm-new-ds-color-emerald:#10b981;--bcm-new-ds-color-emerald-50:#ecfdf5;--bcm-new-ds-color-emerald-100:#d1fae5;--bcm-new-ds-color-emerald-200:#a7f3d0;--bcm-new-ds-color-emerald-300:#6ee7b7;--bcm-new-ds-color-emerald-400:#34d399;--bcm-new-ds-color-emerald-500:#10b981;--bcm-new-ds-color-emerald-600:#059669;--bcm-new-ds-color-emerald-700:#047857;--bcm-new-ds-color-emerald-800:#065f46;--bcm-new-ds-color-emerald-900:#064e3b;--bcm-new-ds-color-teal:#14b8a6;--bcm-new-ds-color-teal-50:#f0fdfa;--bcm-new-ds-color-teal-100:#ccfbf1;--bcm-new-ds-color-teal-200:#99f6e4;--bcm-new-ds-color-teal-300:#5eead4;--bcm-new-ds-color-teal-400:#2dd4bf;--bcm-new-ds-color-teal-500:#14b8a6;--bcm-new-ds-color-teal-600:#0d9488;--bcm-new-ds-color-teal-700:#0f766e;--bcm-new-ds-color-teal-800:#115e59;--bcm-new-ds-color-teal-900:#134e4a;--bcm-new-ds-color-cyan:#06b6d4;--bcm-new-ds-color-cyan-50:#ecfeff;--bcm-new-ds-color-cyan-100:#cffafe;--bcm-new-ds-color-cyan-200:#a5f3fc;--bcm-new-ds-color-cyan-300:#67e8f9;--bcm-new-ds-color-cyan-400:#22d3ee;--bcm-new-ds-color-cyan-500:#06b6d4;--bcm-new-ds-color-cyan-600:#0891b2;--bcm-new-ds-color-cyan-700:#0e7490;--bcm-new-ds-color-cyan-800:#155e75;--bcm-new-ds-color-cyan-900:#164e63;--bcm-new-ds-color-sky:#0ea5e9;--bcm-new-ds-color-sky-50:#f0f9ff;--bcm-new-ds-color-sky-100:#e0f2fe;--bcm-new-ds-color-sky-200:#bae6fd;--bcm-new-ds-color-sky-300:#7dd3fc;--bcm-new-ds-color-sky-400:#38bdf8;--bcm-new-ds-color-sky-500:#0ea5e9;--bcm-new-ds-color-sky-600:#0284c7;--bcm-new-ds-color-sky-700:#0369a1;--bcm-new-ds-color-sky-800:#075985;--bcm-new-ds-color-sky-900:#0c4a6e;--bcm-new-ds-color-blue:#3b82f6;--bcm-new-ds-color-blue-50:#eff6ff;--bcm-new-ds-color-blue-100:#dbeafe;--bcm-new-ds-color-blue-200:#bfdbfe;--bcm-new-ds-color-blue-300:#93c5fd;--bcm-new-ds-color-blue-400:#60a5fa;--bcm-new-ds-color-blue-500:#3b82f6;--bcm-new-ds-color-blue-600:#2563eb;--bcm-new-ds-color-blue-700:#1d4ed8;--bcm-new-ds-color-blue-800:#1e40af;--bcm-new-ds-color-blue-900:#1e3a8a;--bcm-new-ds-color-indigo:#6366f1;--bcm-new-ds-color-indigo-50:#eef2ff;--bcm-new-ds-color-indigo-100:#e0e7ff;--bcm-new-ds-color-indigo-200:#c7d2fe;--bcm-new-ds-color-indigo-300:#a5b4fc;--bcm-new-ds-color-indigo-400:#818cf8;--bcm-new-ds-color-indigo-500:#6366f1;--bcm-new-ds-color-indigo-600:#4f46e5;--bcm-new-ds-color-indigo-700:#4338ca;--bcm-new-ds-color-indigo-800:#3730a3;--bcm-new-ds-color-indigo-900:#312e81;--bcm-new-ds-color-violet:#8b5cf6;--bcm-new-ds-color-violet-50:#f5f3ff;--bcm-new-ds-color-violet-100:#ede9fe;--bcm-new-ds-color-violet-200:#ddd6fe;--bcm-new-ds-color-violet-300:#c4b5fd;--bcm-new-ds-color-violet-400:#a78bfa;--bcm-new-ds-color-violet-500:#8b5cf6;--bcm-new-ds-color-violet-600:#7c3aed;--bcm-new-ds-color-violet-700:#6d28d9;--bcm-new-ds-color-violet-800:#5b21b6;--bcm-new-ds-color-violet-900:#4c1d95;--bcm-new-ds-color-purple:#a855f7;--bcm-new-ds-color-purple-50:#faf5ff;--bcm-new-ds-color-purple-100:#f3e8ff;--bcm-new-ds-color-purple-200:#e9d5ff;--bcm-new-ds-color-purple-300:#d8b4fe;--bcm-new-ds-color-purple-400:#c084fc;--bcm-new-ds-color-purple-500:#a855f7;--bcm-new-ds-color-purple-600:#9333ea;--bcm-new-ds-color-purple-700:#7e22ce;--bcm-new-ds-color-purple-800:#6b21a8;--bcm-new-ds-color-purple-900:#581c87;--bcm-new-ds-color-fuchsia:#d946ef;--bcm-new-ds-color-fuchsia-50:#fdf4ff;--bcm-new-ds-color-fuchsia-100:#fae8ff;--bcm-new-ds-color-fuchsia-200:#f5d0fe;--bcm-new-ds-color-fuchsia-300:#f0abfc;--bcm-new-ds-color-fuchsia-400:#e879f9;--bcm-new-ds-color-fuchsia-500:#d946ef;--bcm-new-ds-color-fuchsia-600:#c026d3;--bcm-new-ds-color-fuchsia-700:#a21caf;--bcm-new-ds-color-fuchsia-800:#86198f;--bcm-new-ds-color-fuchsia-900:#701a75;--bcm-new-ds-color-pink:#ec4899;--bcm-new-ds-color-pink-50:#fdf2f8;--bcm-new-ds-color-pink-100:#fce7f3;--bcm-new-ds-color-pink-200:#fbcfe8;--bcm-new-ds-color-pink-300:#f9a8d4;--bcm-new-ds-color-pink-400:#f472b6;--bcm-new-ds-color-pink-500:#ec4899;--bcm-new-ds-color-pink-600:#db2777;--bcm-new-ds-color-pink-700:#be185d;--bcm-new-ds-color-pink-800:#9d174d;--bcm-new-ds-color-pink-900:#831843;--bcm-new-ds-color-rose:#f43f5e;--bcm-new-ds-color-rose-50:#fff1f2;--bcm-new-ds-color-rose-100:#ffe4e6;--bcm-new-ds-color-rose-200:#fecdd3;--bcm-new-ds-color-rose-300:#fda4af;--bcm-new-ds-color-rose-400:#fb7185;--bcm-new-ds-color-rose-500:#f43f5e;--bcm-new-ds-color-rose-600:#e11d48;--bcm-new-ds-color-rose-700:#be123c;--bcm-new-ds-color-rose-800:#9f1239;--bcm-new-ds-color-rose-900:#881337}*{box-sizing:border-box}.bcm-badge{--bcm-badge-color:var(--bcm-new-ds-color-white);--bcm-badge-background-color:var(--bcm-new-ds-color-slate-400);--bcm-badge-spacing:4px;font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:4px}.bcm-badge.hidden{display:none}.bcm-badge span:empty{display:none}.bcm-badge__dot{color:var(--bcm-badge-color);background-color:var(--bcm-badge-background-color);display:inline-block;border-radius:100px;position:relative}.bcm-badge__dot-text{display:flex;flex-direction:row;align-items:center;justify-content:center;flex-wrap:nowrap;padding:0 var(--bcm-badge-spacing);z-index:2;color:var(--bcm-badge-color)}.bcm-badge__dot-size-small{font-size:10px;line-height:calc(10px + 8px);min-width:6px;min-height:6px}.bcm-badge__dot-size-small .bcm-badge__dot-text{min-width:calc(10px + 8px)}.bcm-badge__dot-size-medium{font-size:12px;line-height:calc(12px + 8px);min-width:8px;min-height:8px}.bcm-badge__dot-size-medium .bcm-badge__dot-text{min-width:calc(12px + 8px)}.bcm-badge__dot-size-large{font-size:14px;line-height:calc(14px + 8px);min-width:10px;min-height:10px}.bcm-badge__dot-size-large .bcm-badge__dot-text{min-width:calc(14px + 8px)}.bcm-badge__dot-blink{position:relative;z-index:1}.bcm-badge__dot-blink:after{content:\"\";position:absolute;z-index:-1;top:0;left:0;background:var(--bcm-badge-background-color);border-radius:100px;opacity:0.7;box-shadow:0 0 0 0 rgba(0, 0, 0, 0);transform:scale(1);width:100%;height:100%}.bcm-badge__dot:after{background-color:var(--bcm-badge-background-color);animation:badge-pulse 2s infinite}@keyframes badge-pulse{0%{transform:scale(0.95);box-shadow:0 0 0 0 var(--bcm-badge-background-color)}70%{transform:scale(1);box-shadow:0 0 0 10px rgba(0, 0, 0, 0)}100%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(0, 0, 0, 0)}}";
+import { C as ColorHelper } from './color-helper.js';
+import './element-dragger.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import { B as Bcm } from './bcm.js';
+import { c as classnames } from './index2.js';
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -26,58 +26,52 @@ const BcmBadge = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
+    this.statusColors = {
+      info: "blue",
+      error: "red",
+      warning: "amber",
+      success: "emerald"
+    };
     this._id = Generate.UID();
-    this.hidden = false;
     this.blink = false;
     this.value = undefined;
-    this.color = undefined;
+    this.color = "slate";
     this.size = Bcm.Size.medium;
     this.status = undefined;
-    this._slot = undefined;
-  }
-  setStyleVariables() {
-    const { status, value } = this;
-    let { color } = this;
-    const statusColors = {
-      'info': 'blue',
-      'error': 'red',
-      'warning': 'amber',
-      'success': 'emerald',
-      'default': 'slate'
-    };
-    !!status && (color = statusColors[status]);
-    !color && (color = 'slate');
-    const prefix = `--bcm-badge`;
-    const spacing = !!value && value.length > 1 ? '8' : '4';
-    return {
-      [`${prefix}-color`]: ColorHelper.reverseColor(ColorHelper.dsColor(`${color}`)),
-      [`${prefix}-background-color`]: ColorHelper.dsColor(`${color}`),
-      [`${prefix}-spacing`]: `${spacing}px`
-    };
   }
   render() {
-    let { blink, value, size, _slot, hidden } = this;
-    const dotClass = classnames('bcm-badge__dot', 'bcm-badge__dot-size-' + size, 
-    // 'size-2',
-    {
-      'bcm-badge__dot-blink': blink
-    });
-    const hostClasses = classnames('bcm-badge', {
-      hidden
-    });
-    return (h(Host, { class: hostClasses, style: this.setStyleVariables() }, h("span", { hidden: true }, h("slot", null)), h("div", { class: dotClass }, !!value && h("span", { class: "bcm-badge__dot-text" }, value)), h(SlotTemplate, { value: _slot })));
+    var _a;
+    let { blink, value, size, status } = this;
+    const textLength = (value === null || value === void 0 ? void 0 : value.length) || 0;
+    const color = (status && this.statusColors[status]) || ((_a = this.color) === null || _a === void 0 ? void 0 : _a.split("-")[0]) || "slate";
+    const tone = /* this.color.split("-")[1] || */ "600";
+    const defaultColors = Generate.getTwColor({ color, defaultTone: tone });
+    return (h(Host, { class: classnames("bcm-ui-element bcm-ui-content-display bcm-badge", "tw-inline-flex tw-items-center tw-justify-center tw-rounded-full tw-font-medium tw-shadow-border empty:tw-inline-block", {
+        "tw-text-size-2": size === Bcm.Size.small,
+        "tw-text-size-3": size === Bcm.Size.medium,
+        "tw-text-size-4": size === Bcm.Size.large,
+        "tw-animate-blink": blink,
+        "tw-px-2": textLength > 1,
+      }, textLength > 0
+        ? {
+          "tw-min-w-[16px] tw-py-0.5": size === Bcm.Size.small,
+          "tw-min-w-[24px] tw-py-1": size === Bcm.Size.medium,
+          "tw-min-w-[32px] tw-py-1.5": size === Bcm.Size.large,
+        }
+        : {
+          "tw-h-1 tw-w-1": size === Bcm.Size.small,
+          "tw-h-2 tw-w-2": size === Bcm.Size.medium,
+          "tw-h-3 tw-w-3": size === Bcm.Size.large,
+        }), style: Object.assign(Object.assign({}, defaultColors), { color: ColorHelper.reverseColor(defaultColors["--bcm-color-default"]), backgroundColor: defaultColors["--bcm-color-default"] }) }, h("slot", null, value)));
   }
   get el() { return this; }
-  static get style() { return badgeCss; }
 }, [4, "bcm-badge", {
-    "_id": [1537, "id"],
-    "hidden": [1028],
-    "blink": [1028],
-    "value": [1025],
-    "color": [1032],
-    "size": [1025],
-    "status": [1025],
-    "_slot": [1032, "slot"]
+    "_id": [513, "id"],
+    "blink": [4],
+    "value": [1],
+    "color": [1],
+    "size": [1],
+    "status": [1]
   }]);
 __decorate([
   IsLoad()

package/dist/components/bcm-accordion.js

@@ -6,7 +6,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { I as IsLoad } from './is-load-decorator.js';
 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}.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}";
 
 var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;