bromcom-ui-next 0.1.24 → 0.1.25

package/dist/esm/bcm-tabs-list.entry.js

@@ -1,11 +1,19 @@
 import { r as registerInstance, h } from './index-B84DzIAh.js';
 import { t as tv } from './tv-CEcVC0yX.js';
 
-const tabsListCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.h-0\\.5{height:.125rem}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\\[--bcm-ui-color-text-primary\\]{background-color:var(--bcm-ui-color-text-primary)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";
+const tabsListCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative}:host([variant=full-width]){width:100%}:host([variant=auto-width]){width:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.hidden{display:none}.h-0\\.5{height:.125rem}.w-auto{width:auto}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\\[--bcm-ui-color-text-placeholder\\]{background-color:var(--bcm-ui-color-text-placeholder)}.bg-\\[--bcm-ui-color-text-primary\\]{background-color:var(--bcm-ui-color-text-primary)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";
 
 const BcmTabsList = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * Tab variant - controls width behavior
+         */
+        this.variant = 'full-width';
+        /**
+         * Whether to enable smooth animations for inkbar and transitions
+         */
+        this.smooth = true;
         /**
          * Tailwind variants configuration for styling the tabs list container and inkbar
          */
@@ -14,21 +22,56 @@ const BcmTabsList = class {
                 /**
                  * Main container that holds both the tablist and inkbar
                  */
-                container: 'flex flex-row items-center w-full relative',
+                container: 'flex flex-row items-center relative',
                 /**
                  * The sliding indicator that appears under the active tab
                  */
-                inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',
+                inkbar: 'inkbar absolute bottom-0 left-0 h-0.5 bg-[--bcm-ui-color-text-primary] z-10 opacity-0',
                 /**
                  * The container for tab trigger elements
                  */
-                tabList: 'tabs-list flex flex-row items-center w-full relative',
+                tabList: 'tabs-list flex flex-row items-center relative',
+                /**
+                 * Background line for auto-width variant
+                 */
+                backgroundLine: 'absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-placeholder]',
+            },
+            variants: {
+                variant: {
+                    'full-width': {
+                        container: 'w-full',
+                        tabList: 'w-full',
+                        inkbar: 'right-0',
+                        backgroundLine: 'hidden',
+                    },
+                    'auto-width': {
+                        container: 'w-auto',
+                        tabList: 'w-auto',
+                        inkbar: 'right-0',
+                        backgroundLine: 'block',
+                    },
+                },
+                smooth: {
+                    true: {
+                        inkbar: 'transition-all duration-200 ease-in-out',
+                    },
+                    false: {
+                        inkbar: '',
+                    },
+                },
+            },
+            defaultVariants: {
+                variant: 'full-width',
+                smooth: true,
             },
         });
     }
     render() {
-        const { container, inkbar, tabList } = this.class();
-        return (h("div", { key: '9752a4024488845eda6a6701818364dab7fe96f2', class: container(), slot: "tabs-list" }, h("div", { key: 'c97ec0649dc5054b1dc374e5dd47d37eaaf0001a', class: inkbar() }), h("div", { key: 'f0da62c82904ad4bc90cf02ec19c3da48118471c', class: tabList(), role: "tablist" }, h("slot", { key: 'c4f7086fac00127505adfc74032bc4a2cd8fbb11' }))));
+        const { container, inkbar, tabList, backgroundLine } = this.class({
+            variant: this.variant,
+            smooth: this.smooth,
+        });
+        return (h("div", { key: '024191da887d16461269660cb7c97d896848bef0', class: container(), slot: "tabs-list" }, h("div", { key: '5be00109388015401723b94881bed240594cd722', class: backgroundLine() }), h("div", { key: '83c291950deaa88f32950fa84ced38f22a971dc7', class: inkbar() }), h("div", { key: 'f160a54fa4b3c82b63114e169d0ff36bf4c6d014', class: tabList(), role: "tablist" }, h("slot", { key: 'fbedd8dae37e259778d44294237616abfc1ea2dd' }))));
     }
 };
 BcmTabsList.style = tabsListCss;

package/dist/esm/bcm-tabs-list.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-tabs-list.entry.js","sources":["src/components/tabs/tabs-list.css?tag=bcm-tabs-list&encapsulation=shadow","src/components/tabs/tabs-list.component.tsx"],"sourcesContent":["/* tabs-list.css */\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n","import { Component, h, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n */\n@Component({\n  tag: 'bcm-tabs-list',\n  styleUrl: 'tabs-list.css',\n  shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n  /**\n   * Tailwind variants configuration for styling the tabs list container and inkbar\n   */\n  private class = tv({\n    slots: {\n      /**\n       * Main container that holds both the tablist and inkbar\n       */\n      container: 'flex flex-row items-center w-full relative',\n\n      /**\n       * The sliding indicator that appears under the active tab\n       */\n      inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',\n\n      /**\n       * The container for tab trigger elements\n       */\n      tabList: 'tabs-list flex flex-row items-center w-full relative',\n    },\n  });\n\n  render() {\n    const { container, inkbar, tabList } = this.class();\n    return (\n      <div class={container()} slot=\"tabs-list\">\n        <div class={inkbar()}></div>\n        <div class={tabList()} role=\"tablist\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,ipCAAipC;;MCYxpC,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AACjB,YAAA,KAAK,EAAE;AACL;;AAEG;AACH,gBAAA,SAAS,EAAE,4CAA4C;AAEvD;;AAEG;AACH,gBAAA,MAAM,EAAE,uIAAuI;AAE/I;;AAEG;AACH,gBAAA,OAAO,EAAE,sDAAsD;AAChE,aAAA;AACF,SAAA,CAAC;AAaH;IAXC,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE;AACnD,QAAA,QACE,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,MAAM,EAAE,EAAQ,CAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,EAAA,EACnC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;"}
+{"version":3,"file":"bcm-tabs-list.entry.js","sources":["src/components/tabs/tabs-list.css?tag=bcm-tabs-list&encapsulation=shadow","src/components/tabs/tabs-list.component.tsx"],"sourcesContent":["/* tabs-list.css */\n:host {\n  display: block;\n  position: relative;\n}\n\n:host([variant='full-width']) {\n  width: 100%;\n}\n\n:host([variant='auto-width']) {\n  width: auto;\n}\n","import { Component, Prop, h, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n */\n@Component({\n  tag: 'bcm-tabs-list',\n  styleUrl: 'tabs-list.css',\n  shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n  /**\n   * Tab variant - controls width behavior\n   */\n  @Prop({ reflect: true })\n  variant: 'full-width' | 'auto-width' = 'full-width';\n\n  /**\n   * Whether to enable smooth animations for inkbar and transitions\n   */\n  @Prop({ reflect: true })\n  smooth: boolean = true;\n  /**\n   * Tailwind variants configuration for styling the tabs list container and inkbar\n   */\n  private class = tv({\n    slots: {\n      /**\n       * Main container that holds both the tablist and inkbar\n       */\n      container: 'flex flex-row items-center relative',\n\n      /**\n       * The sliding indicator that appears under the active tab\n       */\n      inkbar: 'inkbar absolute bottom-0 left-0 h-0.5 bg-[--bcm-ui-color-text-primary] z-10 opacity-0',\n\n      /**\n       * The container for tab trigger elements\n       */\n      tabList: 'tabs-list flex flex-row items-center relative',\n\n      /**\n       * Background line for auto-width variant\n       */\n      backgroundLine: 'absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-placeholder]',\n    },\n    variants: {\n      variant: {\n        'full-width': {\n          container: 'w-full',\n          tabList: 'w-full',\n          inkbar: 'right-0',\n          backgroundLine: 'hidden',\n        },\n        'auto-width': {\n          container: 'w-auto',\n          tabList: 'w-auto',\n          inkbar: 'right-0',\n          backgroundLine: 'block',\n        },\n      },\n      smooth: {\n        true: {\n          inkbar: 'transition-all duration-200 ease-in-out',\n        },\n        false: {\n          inkbar: '',\n        },\n      },\n    },\n    defaultVariants: {\n      variant: 'full-width',\n      smooth: true,\n    },\n  });\n\n  render() {\n    const { container, inkbar, tabList, backgroundLine } = this.class({\n      variant: this.variant,\n      smooth: this.smooth,\n    });\n    return (\n      <div class={container()} slot=\"tabs-list\">\n        <div class={backgroundLine()}></div>\n        <div class={inkbar()}></div>\n        <div class={tabList()} role=\"tablist\">\n          <slot></slot>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,WAAW,GAAG,41CAA41C;;MCYn2C,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAgC,YAAY;AAEnD;;AAEG;AAEH,QAAA,IAAM,CAAA,MAAA,GAAY,IAAI;AACtB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE,CAAC;AACjB,YAAA,KAAK,EAAE;AACL;;AAEG;AACH,gBAAA,SAAS,EAAE,qCAAqC;AAEhD;;AAEG;AACH,gBAAA,MAAM,EAAE,uFAAuF;AAE/F;;AAEG;AACH,gBAAA,OAAO,EAAE,+CAA+C;AAExD;;AAEG;AACH,gBAAA,cAAc,EAAE,6EAA6E;AAC9F,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,OAAO,EAAE;AACP,oBAAA,YAAY,EAAE;AACZ,wBAAA,SAAS,EAAE,QAAQ;AACnB,wBAAA,OAAO,EAAE,QAAQ;AACjB,wBAAA,MAAM,EAAE,SAAS;AACjB,wBAAA,cAAc,EAAE,QAAQ;AACzB,qBAAA;AACD,oBAAA,YAAY,EAAE;AACZ,wBAAA,SAAS,EAAE,QAAQ;AACnB,wBAAA,OAAO,EAAE,QAAQ;AACjB,wBAAA,MAAM,EAAE,SAAS;AACjB,wBAAA,cAAc,EAAE,OAAO;AACxB,qBAAA;AACF,iBAAA;AACD,gBAAA,MAAM,EAAE;AACN,oBAAA,IAAI,EAAE;AACJ,wBAAA,MAAM,EAAE,yCAAyC;AAClD,qBAAA;AACD,oBAAA,KAAK,EAAE;AACL,wBAAA,MAAM,EAAE,EAAE;AACX,qBAAA;AACF,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,OAAO,EAAE,YAAY;AACrB,gBAAA,MAAM,EAAE,IAAI;AACb,aAAA;AACF,SAAA,CAAC;AAiBH;IAfC,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YAChE,OAAO,EAAE,IAAI,CAAC,OAAO;YACrB,MAAM,EAAE,IAAI,CAAC,MAAM;AACpB,SAAA,CAAC;AACF,QAAA,QACE,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW,EAAA,EACvC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,cAAc,EAAE,EAAQ,CAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,MAAM,EAAE,EAAQ,CAAA,EAC5B,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,EAAA,EACnC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;"}

package/dist/esm/bcm-tabs-trigger.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B84DzIAh.js';
 import { t as tv } from './tv-CEcVC0yX.js';
 
-const tabsTriggerCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-default\\]{background-color:var(--bcm-ui-color-text-default)}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
+const tabsTriggerCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative}:host([variant=full-width]){width:100%}:host([variant=auto-width]){width:auto}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-auto{width:auto}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-\\[--bcm-ui-color-text-placeholder\\]{background-color:var(--bcm-ui-color-text-placeholder)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
 
 const BcmTabsTrigger = class {
     constructor(hostRef) {
@@ -19,13 +19,21 @@ const BcmTabsTrigger = class {
          * Whether the tab is disabled
          */
         this.disabled = false;
+        /**
+         * Tab variant - controls width behavior
+         */
+        this.variant = 'full-width';
+        /**
+         * Whether to enable smooth animations for transitions
+         */
+        this.smooth = true;
         /**
          * Tailwind variants configuration for styling
          */
         this.class = tv({
             slots: {
-                tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',
-                borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',
+                tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium py-1 px-3 bg-white border-none',
+                borderLine: 'bottom-0 left-0 right-0 h-[2px]',
             },
             variants: {
                 size: {
@@ -38,7 +46,7 @@ const BcmTabsTrigger = class {
                         tab: 'text-color-primary',
                     },
                     false: {
-                        tab: 'text-color-default',
+                        tab: 'text-color-placeholder',
                     },
                 },
                 disabled: {
@@ -48,7 +56,27 @@ const BcmTabsTrigger = class {
                     },
                     false: {
                         tab: 'cursor-pointer text-color hover:text-color-primary',
-                        borderLine: 'bg-[--bcm-ui-color-text-default]',
+                        borderLine: 'bg-[--bcm-ui-color-text-placeholder]',
+                    },
+                },
+                variant: {
+                    'full-width': {
+                        tab: 'w-full',
+                        borderLine: 'w-full',
+                    },
+                    'auto-width': {
+                        tab: 'w-auto',
+                        borderLine: 'w-full',
+                    },
+                },
+                smooth: {
+                    true: {
+                        tab: 'transition-all duration-200 ease-in-out',
+                        borderLine: 'transition-all duration-200 ease-in-out',
+                    },
+                    false: {
+                        tab: '',
+                        borderLine: '',
                     },
                 },
             },
@@ -56,6 +84,8 @@ const BcmTabsTrigger = class {
                 size: 'medium',
                 active: false,
                 disabled: false,
+                variant: 'full-width',
+                smooth: true,
             },
         }, {
             twMerge: false,
@@ -75,8 +105,10 @@ const BcmTabsTrigger = class {
             size: this.size,
             active: this.active,
             disabled: this.disabled,
+            variant: this.variant,
+            smooth: this.smooth,
         });
-        return (h(Host, { key: 'd8d56bc1536edf98cda1f2a2499d2c2442dc10f3', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'd943223c1fcc2876b3360af9ab4913f4dc4dd8e9', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '499f0f1586cc55e451396b588720aa81a488e253' })), h("div", { key: '73e8da795af83ced549dd45a118e72b23a84daed', class: borderLine() })));
+        return (h(Host, { key: '5424cb7174c82878a415bab34e35b8f738580f89', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: '3222e26cd8d148547c80b917e039c46852696cbf', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '11ec64418405358f95f0bfb8c6cb6c4b6f099a1e' })), h("div", { key: '8ebda693389b88ff87859907aca5c00f6277e243', class: borderLine() })));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/bcm-tabs-trigger.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-tabs-trigger.entry.js","sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n  tag: 'bcm-tabs-trigger',\n  styleUrl: 'tabs-trigger.css',\n  shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n  /**\n   * Reference to the host element\n   */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier value for the tab\n   */\n  @Prop({ reflect: true })\n  value: string;\n\n  /**\n   * Whether the tab is currently active\n   */\n  @Prop({ reflect: true })\n  active: boolean = false;\n\n  /**\n   * Size of the tab\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Event emitted when this tab is selected\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabSelected',\n  })\n  bcmTabSelected: EventEmitter<string>;\n\n  /**\n   * Handles click events on the tab\n   * Emits bcmTabSelected event with tab value if not disabled\n   */\n  private handleClick() {\n    if (this.disabled) return;\n    this.bcmTabSelected.emit(this.value);\n  }\n\n  /**\n   * Tailwind variants configuration for styling\n   */\n  private class = tv(\n    {\n      slots: {\n        tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium transition-all duration-200 ease-in-out py-1 px-3 w-full bg-white border-none',\n        borderLine: 'bottom-0 w-full left-0 right-0 h-[2px] transition-all duration-200 ease-in-out',\n      },\n      variants: {\n        size: {\n          small: { tab: 'text-size-4 gap-2' },\n          medium: { tab: 'text-size-5 gap-2.5' },\n          large: { tab: 'text-size-6 gap-3' },\n        },\n        active: {\n          true: {\n            tab: 'text-color-primary',\n          },\n          false: {\n            tab: 'text-color-default',\n          },\n        },\n        disabled: {\n          true: {\n            tab: 'cursor-not-allowed text-color-disabled',\n            borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n          },\n          false: {\n            tab: 'cursor-pointer text-color hover:text-color-primary',\n            borderLine: 'bg-[--bcm-ui-color-text-default]',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        active: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { tab, borderLine } = this.class({\n      size: this.size,\n      active: this.active,\n      disabled: this.disabled,\n    });\n    return (\n      <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n        <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n          <slot />\n        </button>\n        <div class={borderLine()}></div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,g9DAAg9D;;MCY19D,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAiBE;;AAEG;AAEH,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AAEvB;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAE7C;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAsBzB;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAAG,EAAE,CAChB;AACE,YAAA,KAAK,EAAE;AACL,gBAAA,GAAG,EAAE,gKAAgK;AACrK,gBAAA,UAAU,EAAE,gFAAgF;AAC7F,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;AACnC,oBAAA,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;AACtC,oBAAA,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;AACpC,iBAAA;AACD,gBAAA,MAAM,EAAE;AACN,oBAAA,IAAI,EAAE;AACJ,wBAAA,GAAG,EAAE,oBAAoB;AAC1B,qBAAA;AACD,oBAAA,KAAK,EAAE;AACL,wBAAA,GAAG,EAAE,oBAAoB;AAC1B,qBAAA;AACF,iBAAA;AACD,gBAAA,QAAQ,EAAE;AACR,oBAAA,IAAI,EAAE;AACJ,wBAAA,GAAG,EAAE,wCAAwC;AAC7C,wBAAA,UAAU,EAAE,mCAAmC;AAChD,qBAAA;AACD,oBAAA,KAAK,EAAE;AACL,wBAAA,GAAG,EAAE,oDAAoD;AACzD,wBAAA,UAAU,EAAE,kCAAkC;AAC/C,qBAAA;AACF,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,MAAM,EAAE,KAAK;AACb,gBAAA,QAAQ,EAAE,KAAK;AAChB,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAiBF;AArEC;;;AAGG;IACK,WAAW,GAAA;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE;QACnB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;;IAgDtC,MAAM,GAAA;QACJ,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACrC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;QACF,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,KAAK,EAAA,eAAA,EAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,EAAiB,eAAA,EAAA,IAAI,CAAC,QAAQ,EAAA,EAClF,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EACzF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACD,EACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,UAAU,EAAE,EAAQ,CAAA,CAC3B;;;;;;;;"}
+{"version":3,"file":"bcm-tabs-trigger.entry.js","sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n}\n\n:host([variant='full-width']) {\n  width: 100%;\n}\n\n:host([variant='auto-width']) {\n  width: auto;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab trigger component that functions as a clickable tab button\n * @slot - Default slot for tab label content\n */\n@Component({\n  tag: 'bcm-tabs-trigger',\n  styleUrl: 'tabs-trigger.css',\n  shadow: true,\n})\nexport class BcmTabsTrigger implements ComponentInterface {\n  /**\n   * Reference to the host element\n   */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier value for the tab\n   */\n  @Prop({ reflect: true })\n  value: string;\n\n  /**\n   * Whether the tab is currently active\n   */\n  @Prop({ reflect: true })\n  active: boolean = false;\n\n  /**\n   * Size of the tab\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the tab is disabled\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Tab variant - controls width behavior\n   */\n  @Prop({ reflect: true })\n  variant: 'full-width' | 'auto-width' = 'full-width';\n\n  /**\n   * Whether to enable smooth animations for transitions\n   */\n  @Prop({ reflect: true })\n  smooth: boolean = true;\n\n  /**\n   * Event emitted when this tab is selected\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabSelected',\n  })\n  bcmTabSelected: EventEmitter<string>;\n\n  /**\n   * Handles click events on the tab\n   * Emits bcmTabSelected event with tab value if not disabled\n   */\n  private handleClick() {\n    if (this.disabled) return;\n    this.bcmTabSelected.emit(this.value);\n  }\n\n  /**\n   * Tailwind variants configuration for styling\n   */\n  private class = tv(\n    {\n      slots: {\n        tab: 'bcm-ui-element text-center flex flex-row justify-center items-center font-medium py-1 px-3 bg-white border-none',\n        borderLine: 'bottom-0 left-0 right-0 h-[2px]',\n      },\n      variants: {\n        size: {\n          small: { tab: 'text-size-4 gap-2' },\n          medium: { tab: 'text-size-5 gap-2.5' },\n          large: { tab: 'text-size-6 gap-3' },\n        },\n        active: {\n          true: {\n            tab: 'text-color-primary',\n          },\n          false: {\n            tab: 'text-color-placeholder',\n          },\n        },\n        disabled: {\n          true: {\n            tab: 'cursor-not-allowed text-color-disabled',\n            borderLine: 'bg-[--bcm-ui-color-text-disabled]',\n          },\n          false: {\n            tab: 'cursor-pointer text-color hover:text-color-primary',\n            borderLine: 'bg-[--bcm-ui-color-text-placeholder]',\n          },\n        },\n        variant: {\n          'full-width': {\n            tab: 'w-full',\n            borderLine: 'w-full',\n          },\n          'auto-width': {\n            tab: 'w-auto',\n            borderLine: 'w-full',\n          },\n        },\n        smooth: {\n          true: {\n            tab: 'transition-all duration-200 ease-in-out',\n            borderLine: 'transition-all duration-200 ease-in-out',\n          },\n          false: {\n            tab: '',\n            borderLine: '',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        active: false,\n        disabled: false,\n        variant: 'full-width',\n        smooth: true,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { tab, borderLine } = this.class({\n      size: this.size,\n      active: this.active,\n      disabled: this.disabled,\n      variant: this.variant,\n      smooth: this.smooth,\n    });\n    return (\n      <Host role=\"tab\" aria-selected={this.active.toString()} aria-disabled={this.disabled}>\n        <button class={tab()} disabled={this.disabled} part=\"tab\" onClick={() => this.handleClick()}>\n          <slot />\n        </button>\n        <div class={borderLine()}></div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bcm-tabs.entry.js

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-B84DzIAh.js';
 import { t as tv } from './tv-CEcVC0yX.js';
 
-const bcmTabsCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.contents{display:contents}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const bcmTabsCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative}:host([variant=full-width]){width:100%}:host([variant=auto-width]){width:auto}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.contents{display:contents}.w-auto{width:auto}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}";
 
 const BcmTabs = class {
     constructor(hostRef) {
@@ -11,13 +11,30 @@ const BcmTabs = class {
          * Tab size
          */
         this.size = 'medium';
+        /**
+         * Tab variant - controls width behavior
+         */
+        this.variant = 'full-width';
+        /**
+         * Whether to enable smooth animations for inkbar and transitions
+         */
+        this.smooth = true;
         this.triggers = [];
         this.contents = [];
         /**
          * Tab container class
          */
         this.tabClass = tv({
-            base: 'tabs-container bcm-ui-element flex flex-col w-full',
+            base: 'tabs-container bcm-ui-element flex flex-col',
+            variants: {
+                variant: {
+                    'full-width': 'w-full',
+                    'auto-width': 'w-auto',
+                },
+            },
+            defaultVariants: {
+                variant: 'full-width',
+            },
         });
     }
     componentWillLoad() {
@@ -26,9 +43,23 @@ const BcmTabs = class {
     componentDidLoad() {
         this.refreshElementReferences();
         this.updateTriggerProperties();
+        this.updateTabsListProperties();
         this.setupRelations();
-        this.updateInkbar();
-        this.updateContentVisibility();
+        // Eğer defaultValue yoksa ilk tab'ı aktif yap
+        if (!this.defaultValue && this.triggers.length > 0) {
+            this.activeTab = this.triggers[0].value;
+        }
+        // auto-width variant'ında inkbar hesaplaması için ek gecikme
+        if (this.variant === 'auto-width') {
+            requestAnimationFrame(() => {
+                this.updateInkbar();
+                this.updateContentVisibility();
+            });
+        }
+        else {
+            this.updateInkbar();
+            this.updateContentVisibility();
+        }
     }
     /**
      * Refreshes DOM element references
@@ -59,12 +90,37 @@ const BcmTabs = class {
         if (((_a = this.triggers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
             this.triggers.forEach(trigger => {
                 trigger.size = this.size;
+                trigger.variant = this.variant;
+                trigger.smooth = this.smooth;
             });
         }
     }
+    updateTabsListProperties() {
+        if (this.tabsList) {
+            this.tabsList.variant = this.variant;
+            this.tabsList.smooth = this.smooth;
+        }
+    }
     handleSizeChange() {
         this.updateTriggerProperties();
     }
+    handleVariantChange() {
+        this.updateTriggerProperties();
+        this.updateTabsListProperties();
+        // auto-width variant'ında inkbar hesaplaması için ek gecikme
+        if (this.variant === 'auto-width') {
+            requestAnimationFrame(() => {
+                this.updateInkbar();
+            });
+        }
+        else {
+            this.updateInkbar();
+        }
+    }
+    handleSmoothChange() {
+        this.updateTriggerProperties();
+        this.updateTabsListProperties();
+    }
     async disableTab(value) {
         const trigger = this.triggers.find(t => t.value === value);
         if (trigger) {
@@ -161,7 +217,7 @@ const BcmTabs = class {
      * Updates inkbar position
      */
     updateInkbar() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b;
         if (!this.tabsList) {
             console.warn('bcm-tabs-list not found');
             return;
@@ -172,18 +228,15 @@ const BcmTabs = class {
         const inkbar = (_b = (_a = this.tabsList) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.inkbar');
         const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);
         if (activeTrigger && inkbar) {
-            const triggerRect = activeTrigger.getBoundingClientRect();
-            const groupRect = (_e = (_d = (_c = this.tabsList) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.tabs-list')) === null || _e === void 0 ? void 0 : _e.getBoundingClientRect();
-            if (triggerRect && groupRect) {
-                const left = triggerRect.left - groupRect.left;
-                const width = triggerRect.width;
-                inkbar.style.width = `${width}px`;
-                inkbar.style.transform = `translateX(${left}px)`;
-                inkbar.style.opacity = '1';
+            // auto-width variant'ında container genişliği henüz hesaplanmamış olabilir
+            // Bu durumda bir sonraki frame'de tekrar deneyelim
+            if (this.variant === 'auto-width') {
+                requestAnimationFrame(() => {
+                    this.updateInkbarPosition(inkbar, activeTrigger);
+                });
             }
             else {
-                console.warn('Group or trigger rect calculation failed');
-                inkbar.style.opacity = '0';
+                this.updateInkbarPosition(inkbar, activeTrigger);
             }
         }
         else {
@@ -191,12 +244,48 @@ const BcmTabs = class {
                 inkbar.style.opacity = '0';
         }
     }
+    /**
+     * Updates inkbar position and size
+     */
+    updateInkbarPosition(inkbar, activeTrigger) {
+        var _a, _b, _c;
+        const triggerRect = activeTrigger.getBoundingClientRect();
+        const groupRect = (_c = (_b = (_a = this.tabsList) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.tabs-list')) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+        if (triggerRect && groupRect) {
+            const left = triggerRect.left - groupRect.left;
+            const width = triggerRect.width;
+            // Her iki variant için de aynı davranış: sadece aktif tab altında göster
+            inkbar.style.width = `${width}px`;
+            inkbar.style.transform = `translateX(${left}px)`;
+            inkbar.style.left = '0';
+            inkbar.style.right = 'auto';
+            // smooth prop'una göre opacity geçişi
+            if (this.smooth) {
+                inkbar.style.opacity = '1';
+            }
+            else {
+                // Animasyon olmadan anında göster
+                inkbar.style.transition = 'none';
+                inkbar.style.opacity = '1';
+                // Bir sonraki frame'de transition'ı geri yükle
+                requestAnimationFrame(() => {
+                    inkbar.style.transition = '';
+                });
+            }
+        }
+        else {
+            console.warn('Group or trigger rect calculation failed');
+            inkbar.style.opacity = '0';
+        }
+    }
     render() {
-        return (h(Host, { key: '2bc33f644ca746b98c5be1b630471f2d2812a4e3' }, h("div", { key: '29c8e9bb573d2944cf2ece084036c6a5582fe6ca', class: this.tabClass() }, h("slot", { key: '2c302a219cadc0141dbd00cd489676796a684125', name: "tabs-list" }), h("slot", { key: '66f0612d4294eea35f19eee59742db7c9e973a58' }))));
+        return (h(Host, { key: '74e8ebe53363fd2357d6f054277e3fc3f3d3e83c' }, h("div", { key: '0d060bcb6b378dc9ba7523482c69c0b786782d96', class: this.tabClass({ variant: this.variant }) }, h("slot", { key: '626fcde55ce47453b4d5252444cf046ca723c1c0', name: "tabs-list" }), h("slot", { key: 'a9fc0887203531d3ea72cba945f4665d98546512' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
-        "size": ["handleSizeChange"]
+        "size": ["handleSizeChange"],
+        "variant": ["handleVariantChange"],
+        "smooth": ["handleSmoothChange"]
     }; }
 };
 BcmTabs.style = bcmTabsCss;

package/dist/esm/bcm-tabs.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-tabs.entry.js","sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n","import { Component, State, Prop, Element, h, Host, Listen, ComponentInterface, Event, EventEmitter, Watch, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab interface component\n * @slot - Default slot for content area\n * @slot tabs-list - Special slot for tab list\n */\n@Component({\n  tag: 'bcm-tabs',\n  styleUrl: 'bcm-tabs.css',\n  shadow: true,\n})\nexport class BcmTabs implements ComponentInterface {\n  @Element() el: HTMLElement;\n\n  /**\n   * Default active tab value\n   */\n  @Prop({ reflect: true })\n  defaultValue: string;\n\n  /**\n   * Tab size\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Triggers when tab changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabChange',\n  })\n  bcmTabChange: EventEmitter<{\n    activeTab: string;\n    element: HTMLBcmTabsTriggerElement;\n    previousTab?: string;\n  }>;\n\n  /**\n   * Active tab value\n   */\n  @State() activeTab: string;\n\n  /**\n   * Previous active tab value\n   */\n  @State() previousTab: string;\n\n  private triggers: HTMLBcmTabsTriggerElement[] = [];\n  private contents: HTMLBcmTabsContentElement[] = [];\n  private tabsList: HTMLBcmTabsListElement;\n\n  componentWillLoad() {\n    this.activeTab = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    this.refreshElementReferences();\n    this.updateTriggerProperties();\n    this.setupRelations();\n    this.updateInkbar();\n    this.updateContentVisibility();\n  }\n\n  /**\n   * Refreshes DOM element references\n   */\n  private refreshElementReferences() {\n    this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));\n    this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));\n    this.tabsList = this.el.querySelector('bcm-tabs-list');\n  }\n\n  /**\n   * Establishes relationships between tabs and content\n   */\n  private setupRelations() {\n    this.triggers.forEach(trigger => {\n      trigger.active = trigger.value === this.activeTab;\n      const panel = this.contents.find(content => content.value === trigger.value);\n      if (panel) {\n        const panelId = `panel-${trigger.value}`;\n        panel.id = panelId;\n        trigger.setAttribute('aria-controls', panelId);\n        panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);\n        trigger.id = `trigger-${trigger.value}`;\n      }\n    });\n  }\n\n  private updateTriggerProperties() {\n    if (this.triggers?.length > 0) {\n      this.triggers.forEach(trigger => {\n        trigger.size = this.size;\n      });\n    }\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.updateTriggerProperties();\n  }\n\n  @Method()\n  async disableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = true;\n    }\n  }\n\n  @Method()\n  async enableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = false;\n    }\n  }\n\n  /**\n   * Disables all tabs\n   */\n  @Method()\n  async disableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = true;\n    });\n  }\n\n  /**\n   * Enables all tabs\n   */\n  @Method()\n  async enableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = false;\n    });\n  }\n\n  /**\n   * Returns the active tab value\n   */\n  @Method()\n  async getActiveTab(): Promise<string> {\n    return this.activeTab;\n  }\n\n  /**\n   * Sets the active tab\n   */\n  @Method()\n  async setActiveTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger && !trigger.disabled) {\n      this.previousTab = this.activeTab;\n      this.activeTab = value;\n      this.updateInkbar();\n      this.updateContentVisibility();\n      this.updateTabStatus();\n\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: trigger,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates tab status\n   */\n  private updateTabStatus() {\n    this.triggers.forEach(trigger => {\n      const isActive = trigger.value === this.activeTab;\n      trigger.active = isActive;\n    });\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.updateInkbar();\n  }\n\n  /**\n   * Triggered when a tab is selected\n   */\n  @Listen('bcmTabSelected', { capture: true })\n  handleTabSelected(event: CustomEvent<string>) {\n    this.previousTab = this.activeTab;\n    this.activeTab = event.detail;\n\n    this.updateTabStatus();\n    this.updateInkbar();\n    this.updateContentVisibility();\n\n    const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);\n    if (activeElement) {\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: activeElement,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates content visibility\n   */\n  private updateContentVisibility() {\n    this.contents.forEach(content => {\n      const isVisible = content.value === this.activeTab;\n      content.style.display = isVisible ? 'block' : 'none';\n      content.setAttribute('aria-hidden', (!isVisible).toString());\n    });\n  }\n\n  /**\n   * Updates inkbar position\n   */\n  private updateInkbar() {\n    if (!this.tabsList) {\n      console.warn('bcm-tabs-list not found');\n      return;\n    }\n\n    const totalTriggers = this.triggers.length;\n    if (totalTriggers === 0) return;\n\n    const inkbar = this.tabsList?.shadowRoot?.querySelector('.inkbar') as HTMLElement;\n    const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);\n\n    if (activeTrigger && inkbar) {\n      const triggerRect = activeTrigger.getBoundingClientRect();\n      const groupRect = this.tabsList?.shadowRoot?.querySelector('.tabs-list')?.getBoundingClientRect();\n\n      if (triggerRect && groupRect) {\n        const left = triggerRect.left - groupRect.left;\n        const width = triggerRect.width;\n\n        inkbar.style.width = `${width}px`;\n        inkbar.style.transform = `translateX(${left}px)`;\n        inkbar.style.opacity = '1';\n      } else {\n        console.warn('Group or trigger rect calculation failed');\n        inkbar.style.opacity = '0';\n      }\n    } else {\n      if (inkbar) inkbar.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Tab container class\n   */\n  private tabClass = tv({\n    base: 'tabs-container bcm-ui-element flex flex-col w-full',\n  });\n\n  render() {\n    return (\n      <Host>\n        <div class={this.tabClass()}>\n          <slot name=\"tabs-list\" />\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-tabs.entry.js","sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n:host([variant='full-width']) {\n  width: 100%;\n}\n\n:host([variant='auto-width']) {\n  width: auto;\n}\n","import { Component, State, Prop, Element, h, Host, Listen, ComponentInterface, Event, EventEmitter, Watch, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab interface component\n * @slot - Default slot for content area\n * @slot tabs-list - Special slot for tab list\n */\n@Component({\n  tag: 'bcm-tabs',\n  styleUrl: 'bcm-tabs.css',\n  shadow: true,\n})\nexport class BcmTabs implements ComponentInterface {\n  @Element() el: HTMLElement;\n\n  /**\n   * Default active tab value\n   */\n  @Prop({ reflect: true })\n  defaultValue: string;\n\n  /**\n   * Tab size\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Tab variant - controls width behavior\n   */\n  @Prop({ reflect: true })\n  variant: 'full-width' | 'auto-width' = 'full-width';\n\n  /**\n   * Whether to enable smooth animations for inkbar and transitions\n   */\n  @Prop({ reflect: true })\n  smooth: boolean = true;\n\n  /**\n   * Triggers when tab changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabChange',\n  })\n  bcmTabChange: EventEmitter<{\n    activeTab: string;\n    element: HTMLBcmTabsTriggerElement;\n    previousTab?: string;\n  }>;\n\n  /**\n   * Active tab value\n   */\n  @State() activeTab: string;\n\n  /**\n   * Previous active tab value\n   */\n  @State() previousTab: string;\n\n  private triggers: HTMLBcmTabsTriggerElement[] = [];\n  private contents: HTMLBcmTabsContentElement[] = [];\n  private tabsList: HTMLBcmTabsListElement;\n\n  componentWillLoad() {\n    this.activeTab = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    this.refreshElementReferences();\n    this.updateTriggerProperties();\n    this.updateTabsListProperties();\n    this.setupRelations();\n\n    // Eğer defaultValue yoksa ilk tab'ı aktif yap\n    if (!this.defaultValue && this.triggers.length > 0) {\n      this.activeTab = this.triggers[0].value;\n    }\n\n    // auto-width variant'ında inkbar hesaplaması için ek gecikme\n    if (this.variant === 'auto-width') {\n      requestAnimationFrame(() => {\n        this.updateInkbar();\n        this.updateContentVisibility();\n      });\n    } else {\n      this.updateInkbar();\n      this.updateContentVisibility();\n    }\n  }\n\n  /**\n   * Refreshes DOM element references\n   */\n  private refreshElementReferences() {\n    this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));\n    this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));\n    this.tabsList = this.el.querySelector('bcm-tabs-list');\n  }\n\n  /**\n   * Establishes relationships between tabs and content\n   */\n  private setupRelations() {\n    this.triggers.forEach(trigger => {\n      trigger.active = trigger.value === this.activeTab;\n      const panel = this.contents.find(content => content.value === trigger.value);\n      if (panel) {\n        const panelId = `panel-${trigger.value}`;\n        panel.id = panelId;\n        trigger.setAttribute('aria-controls', panelId);\n        panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);\n        trigger.id = `trigger-${trigger.value}`;\n      }\n    });\n  }\n\n  private updateTriggerProperties() {\n    if (this.triggers?.length > 0) {\n      this.triggers.forEach(trigger => {\n        trigger.size = this.size;\n        trigger.variant = this.variant;\n        trigger.smooth = this.smooth;\n      });\n    }\n  }\n\n  private updateTabsListProperties() {\n    if (this.tabsList) {\n      this.tabsList.variant = this.variant;\n      this.tabsList.smooth = this.smooth;\n    }\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.updateTriggerProperties();\n  }\n\n  @Watch('variant')\n  handleVariantChange() {\n    this.updateTriggerProperties();\n    this.updateTabsListProperties();\n\n    // auto-width variant'ında inkbar hesaplaması için ek gecikme\n    if (this.variant === 'auto-width') {\n      requestAnimationFrame(() => {\n        this.updateInkbar();\n      });\n    } else {\n      this.updateInkbar();\n    }\n  }\n\n  @Watch('smooth')\n  handleSmoothChange() {\n    this.updateTriggerProperties();\n    this.updateTabsListProperties();\n  }\n\n  @Method()\n  async disableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = true;\n    }\n  }\n\n  @Method()\n  async enableTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger) {\n      trigger.disabled = false;\n    }\n  }\n\n  /**\n   * Disables all tabs\n   */\n  @Method()\n  async disableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = true;\n    });\n  }\n\n  /**\n   * Enables all tabs\n   */\n  @Method()\n  async enableAllTabs() {\n    this.triggers.forEach(trigger => {\n      trigger.disabled = false;\n    });\n  }\n\n  /**\n   * Returns the active tab value\n   */\n  @Method()\n  async getActiveTab(): Promise<string> {\n    return this.activeTab;\n  }\n\n  /**\n   * Sets the active tab\n   */\n  @Method()\n  async setActiveTab(value: string): Promise<void> {\n    const trigger = this.triggers.find(t => t.value === value);\n    if (trigger && !trigger.disabled) {\n      this.previousTab = this.activeTab;\n      this.activeTab = value;\n      this.updateInkbar();\n      this.updateContentVisibility();\n      this.updateTabStatus();\n\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: trigger,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates tab status\n   */\n  private updateTabStatus() {\n    this.triggers.forEach(trigger => {\n      const isActive = trigger.value === this.activeTab;\n      trigger.active = isActive;\n    });\n  }\n\n  @Listen('resize', { target: 'window' })\n  handleResize() {\n    this.updateInkbar();\n  }\n\n  /**\n   * Triggered when a tab is selected\n   */\n  @Listen('bcmTabSelected', { capture: true })\n  handleTabSelected(event: CustomEvent<string>) {\n    this.previousTab = this.activeTab;\n    this.activeTab = event.detail;\n\n    this.updateTabStatus();\n    this.updateInkbar();\n    this.updateContentVisibility();\n\n    const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);\n    if (activeElement) {\n      this.bcmTabChange.emit({\n        activeTab: this.activeTab,\n        element: activeElement,\n        previousTab: this.previousTab,\n      });\n    }\n  }\n\n  /**\n   * Updates content visibility\n   */\n  private updateContentVisibility() {\n    this.contents.forEach(content => {\n      const isVisible = content.value === this.activeTab;\n      content.style.display = isVisible ? 'block' : 'none';\n      content.setAttribute('aria-hidden', (!isVisible).toString());\n    });\n  }\n\n  /**\n   * Updates inkbar position\n   */\n  private updateInkbar() {\n    if (!this.tabsList) {\n      console.warn('bcm-tabs-list not found');\n      return;\n    }\n\n    const totalTriggers = this.triggers.length;\n    if (totalTriggers === 0) return;\n\n    const inkbar = this.tabsList?.shadowRoot?.querySelector('.inkbar') as HTMLElement;\n    const activeTrigger = this.triggers.find(trigger => trigger.value === this.activeTab);\n\n    if (activeTrigger && inkbar) {\n      // auto-width variant'ında container genişliği henüz hesaplanmamış olabilir\n      // Bu durumda bir sonraki frame'de tekrar deneyelim\n      if (this.variant === 'auto-width') {\n        requestAnimationFrame(() => {\n          this.updateInkbarPosition(inkbar, activeTrigger);\n        });\n      } else {\n        this.updateInkbarPosition(inkbar, activeTrigger);\n      }\n    } else {\n      if (inkbar) inkbar.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Updates inkbar position and size\n   */\n  private updateInkbarPosition(inkbar: HTMLElement, activeTrigger: HTMLElement) {\n    const triggerRect = activeTrigger.getBoundingClientRect();\n    const groupRect = this.tabsList?.shadowRoot?.querySelector('.tabs-list')?.getBoundingClientRect();\n\n    if (triggerRect && groupRect) {\n      const left = triggerRect.left - groupRect.left;\n      const width = triggerRect.width;\n\n      // Her iki variant için de aynı davranış: sadece aktif tab altında göster\n      inkbar.style.width = `${width}px`;\n      inkbar.style.transform = `translateX(${left}px)`;\n      inkbar.style.left = '0';\n      inkbar.style.right = 'auto';\n\n      // smooth prop'una göre opacity geçişi\n      if (this.smooth) {\n        inkbar.style.opacity = '1';\n      } else {\n        // Animasyon olmadan anında göster\n        inkbar.style.transition = 'none';\n        inkbar.style.opacity = '1';\n        // Bir sonraki frame'de transition'ı geri yükle\n        requestAnimationFrame(() => {\n          inkbar.style.transition = '';\n        });\n      }\n    } else {\n      console.warn('Group or trigger rect calculation failed');\n      inkbar.style.opacity = '0';\n    }\n  }\n\n  /**\n   * Tab container class\n   */\n  private tabClass = tv({\n    base: 'tabs-container bcm-ui-element flex flex-col',\n    variants: {\n      variant: {\n        'full-width': 'w-full',\n        'auto-width': 'w-auto',\n      },\n    },\n    defaultVariants: {\n      variant: 'full-width',\n    },\n  });\n\n  render() {\n    return (\n      <Host>\n        <div class={this.tabClass({ variant: this.variant })}>\n          <slot name=\"tabs-list\" />\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/bcm-text.entry.js

@@ -0,0 +1,122 @@
+import { r as registerInstance, h } from './index-B84DzIAh.js';
+import { c as classNames } from './index-BfTCfPZ1.js';
+
+const variantTagMap = {
+    display: 'h1',
+    heading1: 'h2',
+    heading2: 'h3',
+    title1: 'h4',
+    title2: 'h5',
+    title3: 'h6',
+    body: 'p',
+    bodyAccent: 'p',
+    helper: 'p',
+    caption: 'p',
+    label: 'label',
+    placeholder: 'p',
+    link: 'a',
+    info: 'p',
+    infoAccent: 'p',
+};
+
+const textCss = ".static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+
+const BcmText = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        /** Text variant */
+        this.variant = 'body';
+        /** Text size */
+        this.size = 'medium';
+        /** Text overflow behavior */
+        this.overflow = false;
+        this.variantClassMap = {
+            display: 'font-semibold text-size-12 text-color-header',
+            heading1: 'font-semibold text-size-7 text-color-header',
+            heading2: 'font-semibold text-size-6 text-color-header',
+            title1: {
+                small: 'font-semibold text-size-5 text-color-header',
+                medium: 'font-semibold text-size-6 text-color-header',
+                large: 'font-semibold text-size-7 text-color-header',
+            },
+            title2: {
+                small: 'font-semibold text-size-4 text-color-default',
+                medium: 'font-semibold text-size-5 text-color-default',
+                large: 'font-semibold text-size-6 text-color-default',
+            },
+            title3: {
+                small: 'font-semibold text-size-3 text-color-disabled',
+                medium: 'font-semibold text-size-4 text-color-disabled',
+                large: 'font-semibold text-size-5 text-color-disabled',
+            },
+            body: {
+                small: 'font-regular text-size-4 text-color-default',
+                medium: 'font-regular text-size-5 text-color-default',
+                large: 'font-regular text-size-6 text-color-default',
+            },
+            bodyAccent: {
+                small: 'font-medium text-size-4 text-color-default',
+                medium: 'font-medium text-size-5 text-color-default',
+                large: 'font-medium text-size-6 text-color-default',
+            },
+            helper: {
+                small: 'font-regular text-size-4 text-color-helper',
+                medium: 'font-regular text-size-5 text-color-helper',
+                large: 'font-regular text-size-6 text-color-helper',
+            },
+            caption: {
+                small: 'font-regular text-size-3 text-color-caption',
+                medium: 'font-regular text-size-4 text-color-caption',
+                large: 'font-regular text-size-5 text-color-caption',
+            },
+            link: {
+                small: 'font-medium text-size-4 underline text-color-primary',
+                medium: 'font-medium text-size-5 underline text-color-primary',
+                large: 'font-medium text-size-6 underline text-color-primary',
+            },
+            label: {
+                small: 'font-medium text-size-3 text-color-label',
+                medium: 'font-medium text-size-4 text-color-label',
+                large: 'font-medium text-size-5 text-color-label',
+            },
+            placeholder: {
+                small: 'font-regular text-size-4 text-color-placeholder',
+                medium: 'font-regular text-size-5 text-color-placeholder',
+                large: 'font-regular text-size-6 text-color-placeholder',
+            },
+            info: {
+                small: 'font-regular text-size-3 text-color-default',
+                medium: 'font-regular text-size-4 text-color-default',
+                large: 'font-regular text-size-5 text-color-default',
+            },
+            infoAccent: {
+                small: 'font-medium text-size-3 text-color-header',
+                medium: 'font-medium text-size-4 text-color-header',
+                large: 'font-medium text-size-5 text-color-header',
+            },
+        };
+        this.getTextClass = (variant, size) => {
+            const variantClasses = this.variantClassMap[variant];
+            if (typeof variantClasses === 'string') {
+                return variantClasses;
+            }
+            return variantClasses[size];
+        };
+        this.getOverflowClass = (overflow) => {
+            return overflow ? 'truncate' : '';
+        };
+    }
+    render() {
+        var _a;
+        const Tag = variantTagMap[this.variant];
+        const variantClass = this.getTextClass(this.variant, this.size);
+        const overflowClass = this.getOverflowClass((_a = this.overflow) !== null && _a !== void 0 ? _a : false);
+        return (h(Tag, { key: 'cb3c78143a1f52fdadd9458219ef5f12eace04e6', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: '7ab30bbf72b0fe1be98089b6c452662a382363e1' }, this.text)));
+    }
+};
+BcmText.style = textCss;
+
+export { BcmText as bcm_text };
+//# sourceMappingURL=bcm-text.entry.js.map
+
+//# sourceMappingURL=bcm-text.entry.js.map