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

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

@@ -2,82 +2,79 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { ColorHelper, Generate, NumberHelper } from '@bcm/helpers';
-import { Bcm } from '@bcm/model';
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
+import { Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import { avatarStyle } from "./avatar.style";
 export class BcmAvatar {
   constructor() {
     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 = cs('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)));
   }
   static get is() { return "bcm-avatar"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["avatar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["avatar.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -93,27 +90,9 @@ export class BcmAvatar {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "image": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -130,7 +109,7 @@ export class BcmAvatar {
       },
       "name": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -147,7 +126,7 @@ export class BcmAvatar {
       },
       "alt": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -164,7 +143,7 @@ export class BcmAvatar {
       },
       "shape": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "ShapeTypes",
           "resolved": "\"ellipse\" | \"square\"",
@@ -187,7 +166,7 @@ export class BcmAvatar {
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
@@ -209,11 +188,11 @@ export class BcmAvatar {
         "defaultValue": "Bcm.Size.medium"
       },
       "color": {
-        "type": "any",
-        "mutable": true,
+        "type": "string",
+        "mutable": false,
         "complexType": {
-          "original": "any",
-          "resolved": "any",
+          "original": "string",
+          "resolved": "string",
           "references": {}
         },
         "required": false,
@@ -225,9 +204,27 @@ export class BcmAvatar {
         "attribute": "color",
         "reflect": false
       },
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"fas fa-user\""
+      },
       "status": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "StatusTypes",
           "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
@@ -246,6 +243,24 @@ export class BcmAvatar {
         },
         "attribute": "status",
         "reflect": false
+      },
+      "blink": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "blink",
+        "reflect": false,
+        "defaultValue": "false"
       }
     };
   }

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

@@ -0,0 +1,39 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { cva } from "class-variance-authority";
+export 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,
+  },
+});

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

@@ -2,71 +2,45 @@
  * Built with Stencil
  * Copyright (c) Bromcom.
  */
-import { h, Host } from '@stencil/core';
-import cs from 'classnames';
-import { Bcm } from '../../../models/bcm';
-import { Generate } from '../../../helper/generate';
-import { SlotTemplate } from '../../../templates/slot-template';
-import { ColorHelper } from '../../../helper/color-helper';
+import { ColorHelper, Generate } from "@bcm/helpers";
+import { Bcm } from "@bcm/model";
+import { Host, h } from "@stencil/core";
+import { badgeStyle } from "./badge.style";
 export class BcmBadge {
   constructor() {
+    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 = cs('bcm-badge__dot', 'bcm-badge__dot-size-' + size, 
-    // 'size-2',
-    {
-      'bcm-badge__dot-blink': blink
-    });
-    const hostClasses = cs('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))));
   }
   static get is() { return "bcm-badge"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["badge.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["badge.css"]
-    };
-  }
   static get properties() {
     return {
       "_id": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -82,27 +56,9 @@ export class BcmBadge {
         "reflect": true,
         "defaultValue": "Generate.UID()"
       },
-      "hidden": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "hidden",
-        "reflect": false,
-        "defaultValue": "false"
-      },
       "blink": {
         "type": "boolean",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "boolean",
           "resolved": "boolean",
@@ -120,7 +76,7 @@ export class BcmBadge {
       },
       "value": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "string",
           "resolved": "string",
@@ -137,7 +93,7 @@ export class BcmBadge {
       },
       "color": {
         "type": "any",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "any",
           "resolved": "any",
@@ -154,14 +110,14 @@ export class BcmBadge {
       },
       "size": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "SizeTypes",
           "resolved": "\"large\" | \"medium\" | \"small\"",
           "references": {
             "SizeTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -177,14 +133,14 @@ export class BcmBadge {
       },
       "status": {
         "type": "string",
-        "mutable": true,
+        "mutable": false,
         "complexType": {
           "original": "StatusTypes",
           "resolved": "\"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
           "references": {
             "StatusTypes": {
               "location": "import",
-              "path": "../../../models/bcm-types"
+              "path": "@bcm/model"
             }
           }
         },
@@ -196,23 +152,6 @@ export class BcmBadge {
         },
         "attribute": "status",
         "reflect": false
-      },
-      "_slot": {
-        "type": "any",
-        "mutable": true,
-        "complexType": {
-          "original": "any",
-          "resolved": "any",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "slot",
-        "reflect": false
       }
     };
   }

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

@@ -0,0 +1,39 @@
+/*!
+ * Built with Stencil
+ * Copyright (c) Bromcom.
+ */
+import { cva } from "class-variance-authority";
+export 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,
+  },
+});

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

@@ -233,20 +233,20 @@ export class BcmInput {
   }
   validationRange() {
     const { min, max, value } = this;
-    if (value) {
-      if (min && max) {
+    if (value !== undefined) {
+      if ((min !== undefined) && (max !== undefined)) {
         if (value < min || value > max) {
           this.setCaption(StringHelper.getMessage('between', [min, max]), "error");
           return false;
         }
       }
-      else if (min) {
+      else if (min !== undefined) {
         if (value < min) {
           this.setCaption(StringHelper.getMessage('min', [min]), "error");
           return false;
         }
       }
-      else if (max) {
+      else if (max !== undefined) {
         if (value > max) {
           this.setCaption(StringHelper.getMessage('max', [max]), "error");
           return false;

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

@@ -22,7 +22,7 @@ export class BcmItems {
     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/collection/components/molecules/menu/menu.js

@@ -94,6 +94,7 @@ export class BcmMenu {
       }
       return (h("a", { id: 'bcm-menu__item-' + this._id + '-' + item.id, onMouseEnter: () => this.collapse && this.getTooltip(item.id, item.text).show(), onMouseLeave: () => this.collapse && this.getTooltip(item.id, item.text).hide(), key: index, href: !item.disabled ? item.link || 'javascript:void(0)' : 'javascript:void(0)', tabindex: item.disabled ? '-1' : '0', class: cs('bcm-menu__item', {
           'bcm-menu__item--is-sub': subItems && item.isOpen,
+          'hidden tw-hidden': item.hidden,
         }) }, h("span", { class: cs('bcm-menu__item-link', `bcm-menu__item-link--${this.mode}`, {
           'bcm-menu__item-link--active': this.selectable && (this.activeItemId ? this.activeItemId === item.id : item.active),
           'bcm-menu__item-link--disabled': item.disabled,

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

@@ -69,7 +69,7 @@ export class BcmPopover {
     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)));
   }
   static get is() { return "bcm-popover"; }
   static get properties() {

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

@@ -178,7 +178,11 @@ export class BcmTabGroup {
   }
   render() {
     const { color } = this;
-    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header" }, h("div", { id: "ink-bar", class: `tw-bg-${color}-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: [500]
+    });
+    return (h(Host, { role: "tablist", "aria-label": "Tab Group", class: "tw-flex tw-w-full tw-flex-col tw-items-center tw-font-sans" }, h("div", { class: `tw-relative tw-flex tw-w-full tw-flex-row tw-items-end tw-justify-between`, id: "tab-header", style: dc }, h("div", { id: "ink-bar", class: `tw-bg-default-500 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
   }
   static get is() { return "bcm-tab-group"; }
   static get properties() {

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

@@ -23,33 +23,18 @@ export class BcmTabItemHeader {
   }
   render() {
     const { color, size, active, disabled } = this;
-    let fontSize, padding, gap;
-    switch (size) {
-      case Bcm.Size.small:
-        fontSize = "2";
-        padding = "1";
-        gap = "2";
-        break;
-      case Bcm.Size.medium:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
-      case Bcm.Size.large:
-        fontSize = "4";
-        padding = "3";
-        gap = "4";
-        break;
-      default:
-        fontSize = "3";
-        padding = "2";
-        gap = "3";
-        break;
-    }
     const disabledClass = "tw-cursor-not-allowed tw-text-gray-400 tw-opacity-50";
-    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-text-${fontSize} tw-py-${padding} tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-gap-${gap} tw-focus:outline-none tw-mb-${padding}]`, disabled ? disabledClass : "tw-cursor-pointer", active
-        ? `tw-text-${color}-500 enabled:hover:tw-text-${color}-600 enabled:active:tw-text-${color}-700 enabled:focus-visible:tw-text-${color}-800`
-        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600") }));
+    const dc = Generate.getTwColor({
+      color: color,
+      tones: [500, 600, 700, 800]
+    });
+    return (h(Host, { onClick: () => this.handleClick(), class: cs(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-300  tw-transition-font tw-focus:outline-none`, {
+        "tw-text-2 tw-py-1 tw-gap-2": size === Bcm.Size.small,
+        "tw-text-3 tw-py-2 tw-gap-3": size === Bcm.Size.medium,
+        "tw-text-4 tw-py-3 tw-gap-4": size === Bcm.Size.large,
+      }, disabled ? disabledClass : "tw-cursor-pointer", active
+        ? `tw-text-default-500 enabled:hover:tw-text-default-600 enabled:active:tw-text-default-700 enabled:focus-visible:tw-text-default-800`
+        : "tw-text-slate-400 enabled:hover:tw-text-slate-500 enabled:focus-visible:tw-text-slate-700 enabled:active:tw-text-slate-600"), style: dc }));
   }
   static get is() { return "bcm-tab-item-header"; }
   static get properties() {