bromcom-ui 2.9.0-rc.4 → 2.9.0-rc.5

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

@@ -6,6 +6,26 @@ import { ColorPalette } from '../global/variables/colors';
 import { extractColor } from '../utils/utils';
 import tailwindColor from 'tailwindcss/colors';
 export class ColorHelper {
+  /**
+   * @param color - color string in format of `colorName-tone` or `colorName` (default tone is 600)
+   * @return `{ tone: number, colorName: string }`
+   * @description
+   * Parse color string to get color name and tone
+   * @example
+   * parseColor("red-500") // { tone: 500, colorName: "red" }
+   * parseColor("red") // { tone: 600, colorName: "red" }
+   * parseColor(null) // { tone: null, colorName: null }
+   */
+  static parseColor(color, defaultTone = 600) {
+    if (!color)
+      return { tone: null, colorName: null };
+    const [colorName, tone] = color.split("-");
+    const parsedTone = tone ? parseInt(tone) : defaultTone;
+    return {
+      tone: parsedTone,
+      colorName,
+    };
+  }
 }
 ColorHelper.isHex = (str) => /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(str);
 ColorHelper.isRgb = (str) => /^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/.test(str);
@@ -42,7 +62,7 @@ ColorHelper.reverseColor = (color) => {
     const g = parseInt(hexColor.substring(3, 5), 16);
     const b = parseInt(hexColor.substring(5, 7), 16);
     const yiq = (r * 299 + g * 587 + b * 114) / 1000;
-    return yiq >= 200 ? '#475569' : '#f8fafc';
+    return yiq >= 200 ? '#334155' : '#fff';
   }
 };
 ColorHelper.dsColor = (color) => 'var(--bcm-new-ds-color-' + color + ')';
@@ -79,3 +99,9 @@ ColorHelper.twColor = (colorName, tone = '500') => {
   return 'blue-500';
 };
 ColorHelper.twColorReverse = (color) => ColorHelper.reverseColor(ColorHelper.getTwColorToHex(color));
+/**
+ * @param object
+ * @return string
+ * @description Convert style object to string
+ */
+ColorHelper.generateStyleString = (obj) => Object.keys(obj).reduce((acc, key) => { return `${acc}${key}:${obj[key]};`; }, "");

package/dist/collection/helper/generate.js

@@ -33,15 +33,65 @@ if (isAllowedDomain()) {
   }
 })();
 export class Generate {
-  static getTwColor(color, variable = "--bcm-color-default") {
+  /**
+      const dc = Generate.getTwColor({
+          color: "blue",
+          tones: {
+              200: ["text"],
+              700: ["bg", "border"],
+              800: ["bg-hover", "border-hover"],
+          },
+          variable: "--bcm-avatar",
+      });
+
+      return {
+          --bcm-avatar-text: --tw-blue-200;
+          --bcm-avatar-bg: --tw-blue-700;
+          --bcm-avatar-bg-hover: --tw-blue-800;
+          --bcm-avatar-border: --tw-blue-700;
+          --bcm-avatar-border-hover: --tw-blue-800;
+      }
+      
+   */
+  static getTwColor(args) {
+    const { color, variable, tones } = (args = Object.assign({
+      variable: "--bcm-color-default",
+      defaultTone: "600",
+      tones: {
+        50: {},
+        100: {},
+        200: {},
+        300: {},
+        400: {},
+        500: {},
+        600: {},
+        700: {},
+        800: {},
+        900: {},
+        950: {},
+      },
+    }, args));
     if (!color || !colors[color]) {
       return false;
     }
-    const colorObj = colors[color];
     const result = {};
-    for (const [key, value] of Object.entries(colorObj)) {
-      result[`${variable}-${key}`] = value;
+    if (typeof colors[color] === "string") {
+      result[variable] = colors[color];
+      return result;
     }
+    const toneList = Array.isArray(tones) ? tones : Object.keys(tones);
+    toneList.forEach(tone => {
+      if (colors[color][tone]) {
+        if (Array.isArray(tones[tone])) {
+          tones[tone].forEach(item => {
+            result[`${variable}-${item}`] = colors[color][tone];
+          });
+        }
+        else {
+          result[`${variable}-${tone}`] = colors[color][tone];
+        }
+      }
+    });
     return result;
   }
 }

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

@@ -14,25 +14,29 @@ export class Popover {
       }
       this.removeListener();
     };
-    this.bgColor = () => ColorHelper.twColor(this.color, 700);
-    this.exepcitonColors = {
-      white: "slate-300",
-      black: "slate-700",
-    };
     this.target = () => document.getElementById(this.targetId);
     this.init = () => {
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2 tw-bg-${this.bgColor()}">
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        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>` : ""}
         </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-${this.bgColor()} tw-text-white tw-text-3 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-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`,
         "role": "popover",
         "aria-hidden": "true",
-        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "style": ColorHelper.generateStyleString(style),
         "innerHTML": inner,
       });
     };
@@ -88,7 +92,7 @@ export class Popover {
           placement: this.placement,
           offset: 8,
           arrow: true,
-          arrowColor: `tw-bg-${this.bgColor()}`,
+          arrowColor: `tw-bg-[--bcm-popover-bg]`,
         });
       }
     };

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

@@ -15,7 +15,6 @@ export class Tooltip {
       }
       this.removeListener();
     };
-    this.bgColor = () => ColorHelper.twColor(this.color, 700);
     this.target = () => document.getElementById(this.targetId);
     this.sizeClass = () => {
       switch (this.size) {
@@ -30,13 +29,22 @@ export class Tooltip {
       }
     };
     this.init = () => {
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        variable: "--bcm-tooltip",
+      });
+      const style = Object.assign(Object.assign({}, dc), (dc["--bcm-tooltip-bg"] && { "--bcm-tooltip-text": ColorHelper.reverseColor(dc["--bcm-tooltip-bg"]) }));
       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-${this.bgColor()} tw-text-white ${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-pointer-events-none tw-max-w-xs tw-py-1 tw-px-2 tw-rounded tw-bg-[--bcm-tooltip-bg] tw-text-[--bcm-tooltip-text] ${this.sizeClass()} tw-absolute tw-top-0 tw-left-0 tw-z-tooltip tw-opacity-0 tw-transition-opacity tw-duration-300`,
         "role": "tooltip",
         "aria-hidden": "true",
-        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "style": ColorHelper.generateStyleString(style),
         "innerHTML": StringHelper.trim(this.message),
       });
     };
@@ -92,7 +100,7 @@ export class Tooltip {
           placement: this.placement,
           offset: 8,
           arrow: true,
-          arrowColor: `tw-bg-${this.bgColor()}`,
+          arrowColor: `tw-bg-[--bcm-tooltip-bg]`,
         });
       }
     };

package/dist/components/avatar.js

@@ -3,89 +3,128 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-import { C as ColorHelper } from './color-helper.js';
+import './color-helper.js';
 import './validators.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 { c as classnames } from './index2.js';
-import { d as defineCustomElement$2 } from './badge.js';
+import { c as cva, 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}*{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}";
+const avatarStyle = cva([
+  "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]",
+  "[&>img]:tw-w-full [&>img]:tw-h-full",
+], {
+  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"],
+    },
+    shape: {
+      ellipse: ["bcm-avatar__shape-ellipse tw-rounded-full", "[&>.bcm-badge]:tw-top-0 [&>.bcm-badge]:tw-right-0", "[&>img]:tw-rounded-full"],
+      square: ["bcm-avatar__shape-square tw-rounded", "[&>.bcm-badge]:tw--top-0.5 [&>.bcm-badge]:tw--right-0.5", "[&>img]:tw-rounded"],
+    },
+    status: {
+      true: ["bcm-avatar__status tw-relative [&>.bcm-badge]:tw-absolute"],
+    },
+  },
+  compoundVariants: [
+    {
+      size: "medium",
+      shape: "ellipse",
+      status: false,
+      class: "",
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    shape: "ellipse",
+    status: false,
+  },
+});
 
 const BcmAvatar = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
     this.__registerHost();
     this._id = Generate.UID();
-    this.hidden = false;
     this.image = undefined;
     this.name = undefined;
     this.alt = undefined;
     this.shape = Bcm.Shape.ellipse;
     this.size = Bcm.Size.medium;
     this.color = undefined;
+    this.icon = "fas fa-user";
     this.status = undefined;
+    this.blink = false;
     this.isFallback = false;
   }
-  componentWillLoad() {
-    this.name = this.name && this.name.trim() || '';
-  }
-  handleError() {
-    this.isFallback = true;
+  getFirstLetters(name) {
+    const words = name.split(" ");
+    const initials = words.map(word => word.charAt(0).toUpperCase()).join("");
+    return initials.substring(0, 2);
   }
-  getCustomSizes(customSize) {
-    return Math.round(parseInt(customSize) / 3);
+  renderContent() {
+    if (this.isFallback) {
+      if (this.name) {
+        return this.getFirstLetters(this.name);
+      }
+      else {
+        return this.renderDefaultIcon();
+      }
+    }
+    else if (this.image) {
+      return this.renderImage();
+    }
+    else if (this.name) {
+      return this.getFirstLetters(this.name);
+    }
+    else {
+      return this.renderDefaultIcon();
+    }
   }
-  getFirstLetters(name) {
-    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);
+  renderDefaultIcon() {
+    return h("bcm-icon", { icon: this.icon });
   }
-  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`
-    };
+  renderImage() {
+    return h("img", { onError: () => (this.isFallback = true), src: this.image, alt: this.alt });
   }
   render() {
-    const { image, name, alt, hidden, shape, size, status } = 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 { shape, size, status, color, blink } = this;
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: {
+        200: ["bg"],
+        700: ["text"],
+      },
+      variable: "--bcm-avatar",
     });
-    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 customSize = !Object.keys(Bcm.BaseSize).includes(size)
+      ? {
+        width: `${size}px`,
+        height: `${size}px`,
+        fontSize: `${+size / 3}px`,
+      }
+      : {};
+    return (h(Host, { role: "img", "aria-label": this.alt || this.name || "Avatar", class: avatarStyle({ size, shape, status: !!status }), style: Object.assign(Object.assign({}, dc), customSize) }, this.renderContent(), status && h("bcm-badge", { status: status, blink: blink, "aria-hidden": "true" }), h("slot", null)));
   }
   get el() { return this; }
-  static get style() { return avatarCss; }
 }, [4, "bcm-avatar", {
-    "_id": [1537, "id"],
-    "hidden": [1028],
-    "image": [1025],
-    "name": [1025],
-    "alt": [1025],
-    "shape": [1025],
-    "size": [1025],
-    "color": [1032],
-    "status": [1025],
+    "_id": [513, "id"],
+    "image": [1],
+    "name": [1],
+    "alt": [1],
+    "shape": [1],
+    "size": [1],
+    "color": [1],
+    "icon": [1],
+    "status": [1],
+    "blink": [4],
     "isFallback": [32]
   }]);
 function defineCustomElement() {

package/dist/components/badge.js

@@ -3,70 +3,133 @@
  * 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 './validators.js';
+import { G as Generate } from './generate.js';
+import './number-helper.js';
+import './string-helper.js';
+import './element-dragger.js';
+import { a as Bcm } from './bcm.js';
+
+function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e))for(t=0;t<e.length;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);else for(t in e)e[t]&&(n&&(n+=" "),n+=t);return n}function clsx(){for(var e,t,f=0,n="";f<arguments.length;)(e=arguments[f++])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
+
+const falsyToString = (value)=>typeof value === "boolean" ? "".concat(value) : value === 0 ? "0" : value;
+const cx = clsx;
+const cva = (base, config)=>{
+    return (props)=>{
+        var ref;
+        if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+        const { variants , defaultVariants  } = config;
+        const getVariantClassNames = Object.keys(variants).map((variant)=>{
+            const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+            const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+            if (variantProp === null) return null;
+            const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+            return variants[variant][variantKey];
+        });
+        const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{
+            let [key, value] = param;
+            if (value === undefined) {
+                return acc;
+            }
+            acc[key] = value;
+            return acc;
+        }, {});
+        const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (ref = config.compoundVariants) === null || ref === void 0 ? void 0 : ref.reduce((acc, param1)=>{
+            let { class: cvClass , className: cvClassName , ...compoundVariantOptions } = param1;
+            return Object.entries(compoundVariantOptions).every((param)=>{
+                let [key, value] = param;
+                return Array.isArray(value) ? value.includes({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                }[key]) : ({
+                    ...defaultVariants,
+                    ...propsWithoutUndefined
+                })[key] === value;
+            }) ? [
+                ...acc,
+                cvClass,
+                cvClassName
+            ] : acc;
+        }, []);
+        return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+    };
+};
 
-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}*{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)}}";
+const badgeStyle = cva([
+  "bcm-badge__dot bcm-ui-element bcm-ui-content-display",
+  "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 [&>*:empty]:tw-hidden",
+], {
+  variants: {
+    size: {
+      small: ["bcm-badge__dot-size-small tw-text-1 tw-min-w-1.5 tw-min-h-1.5 [&>*]:tw-px-1.5 [&>*]:tw-min-w-4"],
+      medium: ["bcm-badge__dot-size-medium tw-text-2 tw-min-w-2 tw-min-h-2 [&>*]:tw-px-1.5 [&>*]:tw-min-w-5"],
+      large: ["bcm-badge__dot-size-large tw-text-3 tw-min-w-2.5 tw-min-h-2.5 [&>*]:tw-px-2 [&>*]:tw-min-w-6"], //10
+    },
+    blink: {
+      true: [
+        "bcm-badge__dot-blink tw-relative",
+        "after:tw-content-[''] after:tw-absolute after:tw-top-0 after:tw-left-0  after:tw-z-[-1]",
+        "after:tw-w-full after:tw-h-full after:tw-bg-[--bcm-badge-bg] after:tw-opacity-75 after:tw-rounded-full",
+        "after:tw-animate-blink after:tw-pointer-events-none"
+      ],
+    },
+  },
+  compoundVariants: [
+    {
+      size: "medium",
+      blink: false,
+      class: "",
+    },
+  ],
+  defaultVariants: {
+    size: "medium",
+    blink: false,
+  },
+});
 
 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.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
+    const { blink, value, size, color, status } = this;
+    const _color = this.statusColors[status] || color;
+    const { tone, colorName } = ColorHelper.parseColor(_color);
+    const dc = Generate.getTwColor({
+      color: colorName,
+      tones: {
+        [tone]: ["bg"],
+      },
+      variable: "--bcm-badge",
     });
-    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 })));
+    const style = Object.assign(Object.assign({}, dc), (dc["--bcm-badge-bg"] && { "--bcm-badge-text": ColorHelper.reverseColor(dc["--bcm-badge-bg"]) }));
+    return (h(Host, { class: "bcm-badge tw-inline-flex tw-items-center tw-justify-center", role: "status", "aria-live": "polite" }, h("div", { class: badgeStyle({ size, blink }), style: style }, h("span", { class: "bcm-badge__dot-text", role: "presentation", "aria-hidden": "true" }, h("slot", null, value)), h("span", { class: "tw-sr-only" }, 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": [8],
+    "size": [1],
+    "status": [1]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {
@@ -82,4 +145,4 @@ function defineCustomElement() {
   } });
 }
 
-export { BcmBadge as B, defineCustomElement as d };
+export { BcmBadge as B, cva as c, defineCustomElement as d };

package/dist/components/bcm-items.js

@@ -25,7 +25,7 @@ const BcmItems$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     const item = element;
     const textContent = (_a = item === null || item === void 0 ? void 0 : item.innerHTML) === null || _a === void 0 ? void 0 : _a.replace(/<bcm-item>.*<\/bcm-item>/g, '').replace(/<bcm-item .*>.*<\/bcm-item>/g, '').replace(/<!--(.|\s)*?-->/g, '').trim();
     const checkAttr = (attr) => StringHelper.elementBooleanCheck(element.getAttribute(attr));
-    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: element.getAttribute('id') || Generate.UID(), text: element.getAttribute('text') || textContent }, (element.innerHTML.trim() && { isHtmlContent: element.textContent.length > 0 ? (element.innerHTML.trim()) : null })), (checkAttr('disabled') && { disabled: checkAttr('disabled') })), (checkAttr('selected') && { selected: checkAttr('selected') })), (checkAttr('checked') && { checked: checkAttr('checked') })), (checkAttr('readonly') && { readonly: checkAttr('readonly') })), (checkAttr('active') && { active: checkAttr('active') })), (checkAttr('icon') && { icon: element.getAttribute('icon') })), (checkAttr('link') && { link: element.getAttribute('link') }));
+    return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ id: element.getAttribute('id') || Generate.UID(), text: element.getAttribute('text') || textContent }, (element.innerHTML.trim() && { isHtmlContent: element.textContent.length > 0 ? (element.innerHTML.trim()) : null })), (checkAttr('disabled') && { disabled: checkAttr('disabled') })), (checkAttr('selected') && { selected: checkAttr('selected') })), (checkAttr('hidden') && { hidden: checkAttr('hidden') })), (checkAttr('checked') && { checked: checkAttr('checked') })), (checkAttr('readonly') && { readonly: checkAttr('readonly') })), (checkAttr('active') && { active: checkAttr('active') })), (checkAttr('icon') && { icon: element.getAttribute('icon') })), (checkAttr('link') && { link: element.getAttribute('link') }));
   }
   nestedItems(element) {
     return snq(() => Array.from(element === null || element === void 0 ? void 0 : element.children).map((child) => {

package/dist/components/bcm-popover.js

@@ -23,25 +23,29 @@ class Popover {
       }
       this.removeListener();
     };
-    this.bgColor = () => ColorHelper.twColor(this.color, 700);
-    this.exepcitonColors = {
-      white: "slate-300",
-      black: "slate-700",
-    };
     this.target = () => document.getElementById(this.targetId);
     this.init = () => {
-      const inner = `<div class="tw-z-[1] tw-rounded tw-py-2 tw-bg-${this.bgColor()}">
+      const { tone, colorName } = ColorHelper.parseColor(this.color, 700);
+      const dc = Generate.getTwColor({
+        color: colorName,
+        tones: {
+          [tone]: ["bg"],
+        },
+        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>` : ""}
         </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-${this.bgColor()} tw-text-white tw-text-3 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-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`,
         "role": "popover",
         "aria-hidden": "true",
-        "style": `color: ${ColorHelper.twColorReverse(this.bgColor())}`,
+        "style": ColorHelper.generateStyleString(style),
         "innerHTML": inner,
       });
     };
@@ -95,7 +99,7 @@ class Popover {
           placement: this.placement,
           offset: 8,
           arrow: true,
-          arrowColor: `tw-bg-${this.bgColor()}`,
+          arrowColor: `tw-bg-[--bcm-popover-bg]`,
         });
       }
     };
@@ -210,7 +214,7 @@ const BcmPopover$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.popover.toggle();
   }
   render() {
-    return (h(Host, { "aria-describedby": "popover", class: "tw-inline-flex tw-h-fit tw-w-fit" }, h("slot", null)));
+    return (h(Host, { class: "tw-inline-flex tw-h-fit tw-w-fit", role: "tooltip", "aria-hidden": "true" }, h("slot", null)));
   }
   get el() { return this; }
 }, [4, "bcm-popover", {