bromcom-ui 2.12.1-test.0 → 3.0.0-preview.0

package/dist/components/bcm-switch.js

@@ -3,17 +3,193 @@
  * Copyright (c) Bromcom.
  */
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { c as classnames } from './index2.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { C as CaptionTemplate } from './caption-template.js';
 import { d as delay } from './utils.js';
+import { c as ce } from './index4.js';
 import { d as defineCustomElement$4 } from './icon.js';
 import { d as defineCustomElement$3 } from './label.js';
 import { d as defineCustomElement$2 } from './tooltip.js';
 
-const switchCss = "@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}.bcm-input[no-margin]{margin:0}.bcm-textarea[no-margin]{margin:0}.bcm-switch[no-margin]{margin:0}.bcm-checkbox[no-margin]{margin:0}.bcm-radio-group[no-margin]{margin:0}.bcm-checkbox-group[no-margin]{margin:0}.bcm-range[no-margin]{margin:0}.bcm-form[no-margin]{margin:0}.bcm-form-group[no-margin]{margin:0}.bcm-list[no-margin]{margin:0}.bcm-colorpicker[no-margin]{margin:0}.bcm-date-picker[no-margin]{margin:0}.bcm-time-picker[no-margin]{margin:0}.bcm-datetime-picker[no-margin]{margin:0}.bcm-select[no-margin]{margin:0}.bcm-listbox[no-margin]{margin:0}*{box-sizing:border-box}.bcm-switch{display:inline-flex;user-select:none;flex-direction:column;margin-bottom:8px}.bcm-switch__container{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:4px}.bcm-switch__container--left,.bcm-switch__container--right{align-items:center}.bcm-switch__container--left .bcm-label__text,.bcm-switch__container--right .bcm-label__text{margin:0}.bcm-switch__container--left{flex-direction:row}.bcm-switch__container--left .bcm-label__text{margin-right:4px}.bcm-switch__container--right{flex-direction:row-reverse}.bcm-switch__container--right .bcm-label__text{margin-left:4px}.bcm-switch:focus-visible{outline:none}.bcm-switch:focus-visible .bcm-switch__toggle{background-color:var(--bcm-new-ds-color-slate-400)}.bcm-switch:focus-visible .bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch:hover{outline:none}.bcm-switch:hover .bcm-switch__toggle .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch:hover .bcm-switch__toggle.switch-checked .handle{background-color:var(--bcm-new-ds-color-slate-100)}.bcm-switch *{box-sizing:border-box}.bcm-switch.hidden{display:none}.bcm-switch input{display:none}.bcm-switch.disabled .bcm-switch__toggle{cursor:not-allowed;opacity:40%}.bcm-switch.readonly .bcm-switch__toggle{cursor:default;opacity:80%}.bcm-switch__label{font-family:\"Inter\", sans-serif;font-size:14px;line-height:calc(14px + 8px);font-weight:400;display:inline-flex;align-items:center;margin:0}.bcm-switch__label .active-text{color:var(--bcm-new-ds-color-blue-700);margin:0 0 0 4px}.bcm-switch__label .inactive-text{color:var(--bcm-new-ds-color-slate-700);margin:0 4px 0 0}.bcm-switch__toggle{display:flex;justify-content:space-between;align-items:center;border-radius:16px;background-color:var(--bcm-new-ds-color-slate-300);position:relative;cursor:pointer}.bcm-switch__toggle .handle{padding:1px;position:absolute;background-color:var(--bcm-new-ds-color-slate-50);display:inline-flex;align-items:center;justify-content:center;border-radius:16px;transition:left 0.2s ease-in-out, width 0.2s ease-in-out;box-shadow:0 1px 3px 0 rgba(17, 24, 38, 0.1)}.bcm-switch__toggle .icon-active{opacity:0;margin-left:2px}.bcm-switch__toggle .icon-inactive{opacity:1;margin-right:2px}.bcm-switch__toggle.bcm-switch__size-small{width:32px;min-width:32px;height:16px;padding:4px}.bcm-switch__toggle.bcm-switch__size-small .handle{width:12px;height:12px;left:2px}.bcm-switch__toggle.bcm-switch__size-small.switch-checked .handle{left:18px}.bcm-switch__toggle.bcm-switch__size-small:active:not(.disabled):not(.readonly) .handle{width:16px}.bcm-switch__toggle.bcm-switch__size-small:active.switch-checked:not(.disabled):not(.readonly) .handle{left:12px}.bcm-switch__toggle.bcm-switch__size-small .switch-spinner{box-sizing:border-box;display:inline-flex;width:9px;height:9px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-medium{width:36px;min-width:36px;height:18px;padding:4px}.bcm-switch__toggle.bcm-switch__size-medium .handle{width:14px;height:14px;left:2px}.bcm-switch__toggle.bcm-switch__size-medium.switch-checked .handle{left:20px}.bcm-switch__toggle.bcm-switch__size-medium:active:not(.disabled):not(.readonly) .handle{width:18px}.bcm-switch__toggle.bcm-switch__size-medium:active.switch-checked:not(.disabled):not(.readonly) .handle{left:14px}.bcm-switch__toggle.bcm-switch__size-medium .switch-spinner{box-sizing:border-box;display:inline-flex;width:11px;height:11px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.bcm-switch__size-large{width:40px;min-width:40px;height:20px;padding:4px}.bcm-switch__toggle.bcm-switch__size-large .handle{width:16px;height:16px;left:2px}.bcm-switch__toggle.bcm-switch__size-large.switch-checked .handle{left:22px}.bcm-switch__toggle.bcm-switch__size-large:active:not(.disabled):not(.readonly) .handle{width:20px}.bcm-switch__toggle.bcm-switch__size-large:active.switch-checked:not(.disabled):not(.readonly) .handle{left:16px}.bcm-switch__toggle.bcm-switch__size-large .switch-spinner{box-sizing:border-box;display:inline-flex;width:13px;height:13px;border-radius:50%;border:1px solid var(--bcm-new-ds-color-white);border-top-color:var(--bcm-new-ds-color-slate-900);animation:switch-spinner 1.5s linear infinite}.bcm-switch__toggle.switch-checked{background-color:var(--bcm-new-ds-color-blue-500)}.bcm-switch__toggle.switch-checked .icon-active{color:var(--bcm-new-ds-color-slate-100);opacity:1}.bcm-switch__toggle.switch-checked .icon-inactive{opacity:0}.bcm-switch__toggle.switch-checked .switch-spinner{border-top-color:var(--bcm-new-ds-color-blue-600)}.bcm-switch__size-small .bcm-switch__label,.bcm-switch__size-small .bcm-label__text{font-size:12px}.bcm-switch__size-small .bcm-switch__toggle{font-size:8px}.bcm-switch__size-medium .bcm-switch__label,.bcm-switch__size-medium .bcm-label__text{font-size:13px}.bcm-switch__size-medium .bcm-switch__toggle{font-size:9px}.bcm-switch__size-large .bcm-switch__label,.bcm-switch__size-large .bcm-label__text{font-size:16px}.bcm-switch__size-large .bcm-switch__toggle{font-size:12px}@keyframes switch-spinner{to{transform:rotate(360deg)}}";
+const switchStyle = ce({
+  slots: {
+    host: [
+      "bcm-switch",
+      "bcm-ui-element bcm-ui-inputs",
+      "tw-inline-flex tw-flex-col tw-select-none tw-mb-2 tw-group",
+      "tw-outline-none"
+    ],
+    switchContainer: [
+      "bcm-switch__container",
+      "tw-flex  tw-gap-1"
+    ],
+    switchInput: [
+      "switch tw-hidden",
+    ],
+    switchLabel: [
+      "bcm-switch__label tw-inline-flex tw-items-center tw-m-0",
+    ],
+    switchToggle: [
+      "bcm-switch__toggle",
+      "tw-flex tw-items-center tw-justify-between tw-relative tw-rounded-full tw-cursor-pointer ",
+    ],
+    handle: [
+      "handle",
+      "tw-p-1",
+      "tw-absolute tw-rounded-full tw-bg-color-base tw-flex tw-items-center tw-justify-center",
+      "tw-transition-all tw-duration-200 tw-ease-in-out",
+      "tw-shadow-sm"
+    ],
+    switchSpinner: [
+      "switch-spinner fa-solid fa-spinner-scale fa-spin",
+    ],
+    bcmLabel: "",
+    activeTextStyle: "active-text tw-text-color tw-ml-1",
+    inactiveTextStyle: "inactive-text tw-text-color tw-mr-1",
+    activeIconStyle: "icon-active tw-text-color-base tw-ml-0.5",
+    inactiveIconStyle: "icon-inactive tw-text-color-base tw-mr-0.5",
+  },
+  variants: {
+    hidden: {
+      true: {
+        host: ["hidden"],
+      },
+    },
+    checked: {
+      true: {
+        host: ["checked"],
+        switchToggle: [
+          "switch-checked tw-bg-color-primaryInfo",
+          "group-hover:tw-bg-color-primaryInfo-hover",
+          "group-[&:focus-visible]:tw-bg-color-primaryInfo-active",
+        ],
+        activeIconStyle: "tw-opacity-100",
+        inactiveIconStyle: "tw-opacity-0",
+      },
+      false: {
+        host: ["unchecked"],
+        switchToggle: [
+          "switch-unchecked tw-bg-color-defaultInvert",
+          "group-hover:tw-bg-color-defaultInvert-hover",
+          "group-[&:focus-visible]:tw-bg-color-defaultInvert-active",
+        ],
+        activeIconStyle: "tw-opacity-0",
+        inactiveIconStyle: "tw-opacity-100",
+      }
+    },
+    disabled: {
+      true: {
+        host: ["disabled"],
+        switchToggle: ["disabled tw-cursor-not-allowed tw-opacity-40"],
+      },
+    },
+    readonly: {
+      true: {
+        host: ["readonly"],
+        switchToggle: ["readonly tw-cursor-not-allowed tw-opacity-80"],
+      },
+    },
+    labelPosition: {
+      left: {
+        switchContainer: [
+          "bcm-switch__container--left",
+          "tw-items-center tw-flex-row"
+        ],
+        bcmLabel: ["tw-mr-1"],
+      },
+      right: {
+        switchContainer: [
+          "bcm-switch__container--right",
+          "tw-items-center tw-flex-row-reverse"
+        ],
+        bcmLabel: ["tw-ml-1"],
+      },
+      top: {
+        switchContainer: ["bcm-switch__container--top",
+          "tw-flex-col tw-items-start tw-justify-start"
+        ],
+      }
+    },
+    size: {
+      small: {
+        switchLabel: ["input-size-small"],
+        switchToggle: ["bcm-switch__size-small",
+          "tw-w-8 tw-min-w-8 tw-h-4 tw-p-1"
+        ],
+        handle: ["tw-w-3 tw-h-3 tw-left-0.5",
+          "group-[&:active]:tw-w-4",
+          "group-[&:active.checked]:tw-left-3.5"
+        ],
+        switchSpinner: ["tw-text-size-2"],
+        activeTextStyle: ["tw-text-size-3"],
+        inactiveTextStyle: ["tw-text-size-3"],
+      },
+      medium: {
+        switchLabel: ["input-size-medium"],
+        switchToggle: ["bcm-switch__size-medium",
+          "tw-w-9 tw-min-w-9 tw-h-4.5 tw-p-1"
+        ],
+        handle: [
+          "tw-w-3.5 tw-h-3.5 tw-left-0.5",
+          "group-[&:active]:tw-w-4.5",
+          "group-[&:active.checked]:tw-left-4"
+        ],
+        switchSpinner: ["tw-text-size-3"],
+        activeTextStyle: ["tw-text-size-4"],
+        inactiveTextStyle: ["tw-text-size-4"],
+      },
+      large: {
+        switchLabel: ["input-size-large"],
+        switchToggle: ["bcm-switch__size-large",
+          "tw-w-10 tw-min-w-10 tw-h-5 tw-p-1"
+        ],
+        handle: ["tw-w-4 tw-h-4 tw-left-0.5",
+          "group-[&:active]:tw-w-5",
+          "group-[&:active.checked]:tw-left-4.5"
+        ],
+        switchSpinner: ["tw-text-size-4"],
+        activeTextStyle: ["tw-text-size-5"],
+        inactiveTextStyle: ["tw-text-size-5"],
+      },
+    },
+  },
+  compoundVariants: [
+    // 32 - 16 + 2 = 18 s
+    // 36 - 18 + 2 = 20 m
+    // 40 - 20 + 2 = 22 l
+    {
+      checked: true,
+      size: "small",
+      class: {
+        handle: ["tw-left-4.5"],
+      },
+    },
+    {
+      checked: true,
+      size: "medium",
+      class: {
+        handle: ["tw-left-5"],
+      },
+    },
+    {
+      checked: true,
+      size: "large",
+      class: {
+        handle: ["tw-left-5.5"],
+      },
+    },
+  ],
+  defaultVariants: {
+    hidden: false,
+    checked: false,
+    disabled: false,
+    readonly: false,
+    labelPosition: "left",
+    size: "medium",
+  },
+});
 
 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;
@@ -120,26 +296,22 @@ const BcmSwitch$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
   }
   render() {
-    const { hidden, _internal_id, checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, readonly, label, required, noCaption, captionType, captionError, caption } = this;
-    const classes = classnames('bcm-switch__toggle', 'bcm-switch__size-' + size, {
-      'switch-checked': checked,
-      'disabled': disabled,
-      'readonly': readonly
-    });
-    const bcmSwitchClasses = classnames('bcm-switch', 'bcm-switch__size-' + size, {
+    const { hidden, _internal_id, checked, size, activeIcon, inactiveIcon, activeText, inactiveText, pending, disabled, readonly, label, required, noCaption, captionType, captionError, caption, labelPosition } = this;
+    const { host, switchContainer, switchInput, switchLabel, switchToggle, handle, switchSpinner, bcmLabel, activeTextStyle, inactiveTextStyle, activeIconStyle, inactiveIconStyle } = switchStyle({
       hidden,
       checked,
       disabled,
-      readonly
+      readonly,
+      labelPosition,
+      size
     });
-    const bcmSwitchLabel = classnames('bcm-switch__label', 'input-size-' + Bcm.Size[size]);
-    const bcmSwitchContainer = classnames('bcm-switch__container', `bcm-switch__container--${this.labelPosition}`);
-    const switchText = (text) => (size != Bcm.Size.small && (activeText || inactiveText)) && (h("span", { class: text + '-text' }, text == 'active' ? activeText : inactiveText));
-    const switchIcon = (text) => (size != Bcm.Size.small && (activeIcon || inactiveIcon)) && h("bcm-icon", { icon: text == 'active' ? activeIcon : inactiveIcon, class: ' icon-' + text });
-    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: bcmSwitchClasses }, h("span", { hidden: true }, h("slot", null)), h("div", { class: bcmSwitchContainer }, label && h("bcm-label", { htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: "switch", disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: bcmSwitchLabel }, switchText('inactive'), h("div", { class: classes }, switchIcon('active'), h("span", { class: "handle" }, pending && h("span", { class: "switch-spinner" })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
+    const switchText = (text) => (size != Bcm.Size.small && (activeText || inactiveText)) &&
+      (h("span", { class: text == "active" ? activeTextStyle() : inactiveTextStyle() }, text == 'active' ? activeText : inactiveText));
+    const switchIcon = (text) => (size != Bcm.Size.small && (activeIcon || inactiveIcon)) &&
+      h("i", { class: text == 'active' ? `${activeIcon} ${activeIconStyle()}` : `${inactiveIcon} ${inactiveIconStyle()}` });
+    return (h(Host, { tabindex: "0", onFocus: () => this.focus.emit(this.el), onBlur: () => this.blur.emit(this.el), class: host() }, h("span", { hidden: true }, h("slot", null)), h("div", { class: switchContainer() }, label && h("bcm-label", { class: bcmLabel(), htmlFor: _internal_id, tooltip: this.tooltip, type: captionType, value: label, required: required, "no-margin": labelPosition !== "top" }), h("input", { id: _internal_id, onChange: () => this.handleChange(), ref: el => (this.inputElement = el), checked: checked, type: "checkbox", class: switchInput(), disabled: disabled || readonly }), h("label", { htmlFor: _internal_id, class: switchLabel() }, switchText('inactive'), h("div", { class: switchToggle() }, switchIcon('active'), h("span", { class: handle() }, pending && h("i", { class: switchSpinner() })), switchIcon('inactive')), switchText('active'))), h(CaptionTemplate, { noCaption: noCaption, captionType: captionType, captionError: captionError, caption: caption })));
   }
   get el() { return this; }
-  static get style() { return switchCss; }
 }, [4, "bcm-switch", {
     "_id": [1537, "id"],
     "_internal_id": [1025],

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

@@ -4,13 +4,14 @@
  */
 import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import { d as delay } from './utils.js';
-import { B as Bcm } from './bcm.js';
+import { a as Bcm } from './bcm.js';
+import { t as tabGroupStyle } from './tab-group.syle.js';
 
 const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -19,7 +20,6 @@ const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     this.tabChange = createEvent(this, "bcm-tab-change", 7);
     this._id = Generate.UID();
     this.active = "1";
-    this.color = "blue";
     this.size = Bcm.Size.medium;
   }
   get tabItems() {
@@ -35,7 +35,6 @@ const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       const itemIndex = index + 1;
       tab.setAttribute("index", `${itemIndex}`);
       tab.setAttribute("size", this.size);
-      tab.setAttribute("color", this.color);
       tab.removeAttribute("active");
       tab.removeAttribute("disabled");
       if (itemActive) {
@@ -67,7 +66,6 @@ const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.tabItems.forEach(tab => {
         tab.removeAttribute("active");
         tab.setAttribute("size", this.size);
-        tab.setAttribute("color", this.color);
         if (tab.getAttribute("index") == this.active) {
           tab.setAttribute("active", "");
         }
@@ -77,7 +75,6 @@ const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
       this.tabItemHeaders.forEach(tabHeader => {
         tabHeader.removeAttribute("active");
         tabHeader.setAttribute("size", this.size);
-        tabHeader.setAttribute("color", this.color);
         if (tabHeader.getAttribute("index") == this.active) {
           tabHeader.setAttribute("active", "");
           // tabHeader.scrollIntoView({
@@ -186,12 +183,8 @@ const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     });
   }
   render() {
-    const { color } = this;
-    const dc = Generate.getTwColor({
-      color: color,
-      tones: [700]
-    });
-    return (h(Host, { role: "tablist", "aria-label": "Tab Group", "aria-busy": "true", 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-700 tw-absolute tw-bottom-0 tw-left-0 tw-mt-[-2px] tw-h-[2px] tw-rounded-sm tw-transition-transform` })), h("slot", null)));
+    const { tabGroup, tabHeader, inkBar } = tabGroupStyle();
+    return (h(Host, { role: "tablist", "aria-label": "Tab Group", "aria-busy": "true", class: tabGroup() }, h("div", { class: tabHeader(), id: "tab-header" }, h("div", { id: "ink-bar", class: inkBar() })), h("slot", null)));
   }
   get el() { return this; }
   static get watchers() { return {
@@ -200,7 +193,6 @@ const BcmTabGroup$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
 }, [4, "bcm-tab-group", {
     "_id": [513, "id"],
     "active": [1537],
-    "color": [1],
     "size": [1],
     "setActive": [64],
     "refresh": [64]

package/dist/components/bcm-tab-item-header.js

@@ -4,13 +4,13 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
-import { B as Bcm } from './bcm.js';
-import { c as classnames } from './index2.js';
+import { a as Bcm } from './bcm.js';
+import { t as tabGroupStyle } from './tab-group.syle.js';
 
 const BcmTabItemHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -20,7 +20,6 @@ const BcmTabItemHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     this.active = false;
     this.disabled = false;
     this.index = undefined;
-    this.color = "blue";
     this.size = Bcm.Size.medium;
   }
   handleClick() {
@@ -30,19 +29,13 @@ const BcmTabItemHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     }
   }
   render() {
-    const { color, size, active, disabled } = this;
-    const disabledClass = "tw-cursor-not-allowed tw-text-gray-500 tw-opacity-50";
-    const dc = Generate.getTwColor({
-      color: color,
-      tones: [700, 800, 900]
+    const { size, active, disabled } = this;
+    const { tabHeaderItem } = tabGroupStyle({
+      size,
+      disabled,
+      active,
     });
-    return (h(Host, { onClick: () => this.handleClick(), class: classnames(`tw-flex tw-flex-1 tw-items-center tw-justify-center tw-border-b-[2px] tw-border-b-slate-700  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-700 enabled:hover:tw-text-default-800 enabled:active:tw-text-default-900 enabled:focus-visible:tw-text-default-900`
-        : "tw-text-slate-700 enabled:hover:tw-text-slate-800 enabled:focus-visible:tw-text-slate-900 enabled:active:tw-text-slate-900"), style: dc }));
+    return (h(Host, { onClick: () => this.handleClick(), class: tabHeaderItem() }));
   }
   get el() { return this; }
 }, [0, "bcm-tab-item-header", {
@@ -50,7 +43,6 @@ const BcmTabItemHeader$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLEl
     "active": [1540],
     "disabled": [4],
     "index": [8],
-    "color": [1],
     "size": [1]
   }]);
 function defineCustomElement$1() {

package/dist/components/bcm-tab-item.js

@@ -4,12 +4,13 @@
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate } from './generate.js';
 import './number-helper.js';
 import './string-helper.js';
 import './element-dragger.js';
 import './bcm.js';
+import { t as tabGroupStyle } from './tab-group.syle.js';
 
 const BcmTabItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
@@ -69,12 +70,12 @@ const BcmTabItem$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement
     observer.observe(this.el, { childList: true, subtree: true });
   }
   render() {
-    return (h(Host, { id: this._id, role: "tabpanel", "aria-labelledby": `tab-${this._id}`, "aria-hidden": `${!this.active}`, class: {
-        "tw-block": this.active,
-        "tw-hidden": !this.active,
-        "tw-opacity-50": this.disabled,
-        "tw-w-full": true,
-      } }, h("slot", null)));
+    const { disabled, active } = this;
+    const { tabItem } = tabGroupStyle({
+      disabled,
+      active,
+    });
+    return (h(Host, { id: this._id, role: "tabpanel", "aria-labelledby": `tab-${this._id}`, "aria-hidden": `${!this.active}`, class: tabItem() }, h("slot", null)));
   }
   get el() { return this; }
 }, [4, "bcm-tab-item", {

package/dist/components/bcm-table.js

@@ -4,13 +4,14 @@
  */
 import { h, Fragment, proxyCustomElement, HTMLElement as HTMLElement$1, Host } from '@stencil/core/internal/client';
 import './color-helper.js';
-import './validators.js';
+import './popover.style.js';
 import { G as Generate, s as snq } from './generate.js';
 import './number-helper.js';
 import { S as StringHelper } from './string-helper.js';
 import './element-dragger.js';
 import './bcm.js';
 import { c as classnames } from './index2.js';
+import './checkbox.style.js';
 import './types.js';
 import './types2.js';
 

package/dist/components/bcm-tag.js

@@ -4,7 +4,7 @@
  */
 import { h, proxyCustomElement, HTMLElement, createEvent } from '@stencil/core/internal/client';
 import { G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { c as classnames } from './index2.js';
 import { N as NumberHelper } from './number-helper.js';
 import { e as extractColor } from './utils.js';

package/dist/components/bcm-time-picker.js

@@ -6,7 +6,7 @@ import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal
 import { c as classnames } from './index2.js';
 import { I as IsLoad } from './is-load-decorator.js';
 import { G as Generate } from './generate.js';
-import { a as Bcm } from './bcm.js';
+import { B as Bcm } from './bcm.js';
 import { d as delay } from './utils.js';
 import { d as defineCustomElement$6 } from './datetime-picker.js';
 import { d as defineCustomElement$5 } from './icon.js';