bromcom-ui-next 0.1.24 → 0.1.26

package/dist/collection/components/tabs/tabs-list.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-list.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;WAEG;QACK,UAAK,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;gBACL;;mBAEG;gBACH,SAAS,EAAE,4CAA4C;gBAEvD;;mBAEG;gBACH,MAAM,EAAE,uIAAuI;gBAE/I;;mBAEG;gBACH,OAAO,EAAE,sDAAsD;aAChE;SACF,CAAC,CAAC;KAaJ;IAXC,MAAM;QACJ,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACpD,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW;YACvC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ;YAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS;gBACnC,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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"]}
+{"version":3,"file":"tabs-list.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-list.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAsB,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,WAAW;IALxB;QAME;;WAEG;QAEH,YAAO,GAAgC,YAAY,CAAC;QAEpD;;WAEG;QAEH,WAAM,GAAY,IAAI,CAAC;QACvB;;WAEG;QACK,UAAK,GAAG,EAAE,CAAC;YACjB,KAAK,EAAE;gBACL;;mBAEG;gBACH,SAAS,EAAE,qCAAqC;gBAEhD;;mBAEG;gBACH,MAAM,EAAE,uFAAuF;gBAE/F;;mBAEG;gBACH,OAAO,EAAE,+CAA+C;gBAExD;;mBAEG;gBACH,cAAc,EAAE,6EAA6E;aAC9F;YACD,QAAQ,EAAE;gBACR,OAAO,EAAE;oBACP,YAAY,EAAE;wBACZ,SAAS,EAAE,QAAQ;wBACnB,OAAO,EAAE,QAAQ;wBACjB,MAAM,EAAE,SAAS;wBACjB,cAAc,EAAE,QAAQ;qBACzB;oBACD,YAAY,EAAE;wBACZ,SAAS,EAAE,QAAQ;wBACnB,OAAO,EAAE,QAAQ;wBACjB,MAAM,EAAE,SAAS;wBACjB,cAAc,EAAE,OAAO;qBACxB;iBACF;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,MAAM,EAAE,yCAAyC;qBAClD;oBACD,KAAK,EAAE;wBACL,MAAM,EAAE,EAAE;qBACX;iBACF;aACF;YACD,eAAe,EAAE;gBACf,OAAO,EAAE,YAAY;gBACrB,MAAM,EAAE,IAAI;aACb;SACF,CAAC,CAAC;KAiBJ;IAfC,MAAM;QACJ,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;SACpB,CAAC,CAAC;QACH,OAAO,CACL,4DAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW;YACvC,4DAAK,KAAK,EAAE,cAAc,EAAE,GAAQ;YACpC,4DAAK,KAAK,EAAE,MAAM,EAAE,GAAQ;YAC5B,4DAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS;gBACnC,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/tabs/tabs-list.css

@@ -1 +1 @@
-.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)}
+.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)}

package/dist/collection/components/tabs/tabs-trigger.component.js

@@ -18,13 +18,21 @@ export class BcmTabsTrigger {
          * 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 border-none bg-transparent',
+                borderLine: 'bottom-0 left-0 right-0 h-[2px]',
             },
             variants: {
                 size: {
@@ -37,7 +45,7 @@ export class BcmTabsTrigger {
                         tab: 'text-color-primary',
                     },
                     false: {
-                        tab: 'text-color-default',
+                        tab: 'text-color-placeholder',
                     },
                 },
                 disabled: {
@@ -47,7 +55,27 @@ export class BcmTabsTrigger {
                     },
                     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: '',
                     },
                 },
             },
@@ -55,6 +83,8 @@ export class BcmTabsTrigger {
                 size: 'medium',
                 active: false,
                 disabled: false,
+                variant: 'full-width',
+                smooth: true,
             },
         }, {
             twMerge: false,
@@ -74,8 +104,10 @@ export class BcmTabsTrigger {
             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: 'dac345717b1f19fe5e92fdf42dd6573e61ffd5a7', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'f6a287751689d7d672a4c7dd642394005d86a1a7', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '96c180785246ddad5ab6d92ec5be1c66a975bfc1' })), h("div", { key: '60a0d79d457856101022e2645e1e319f26e7087e', class: borderLine() })));
     }
     static get is() { return "bcm-tabs-trigger"; }
     static get encapsulation() { return "shadow"; }
@@ -169,6 +201,46 @@ export class BcmTabsTrigger {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full-width' | 'auto-width'",
+                    "resolved": "\"auto-width\" | \"full-width\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab variant - controls width behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'full-width'"
+            },
+            "smooth": {
+                "type": "boolean",
+                "attribute": "smooth",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to enable smooth animations for transitions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/tabs/tabs-trigger.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-trigger.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-trigger.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAoC,MAAM,eAAe,CAAC;AAC3G,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAiBE;;WAEG;QAEH,WAAM,GAAY,KAAK,CAAC;QAExB;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAE9C;;WAEG;QAEH,aAAQ,GAAY,KAAK,CAAC;QAsB1B;;WAEG;QACK,UAAK,GAAG,EAAE,CAChB;YACE,KAAK,EAAE;gBACL,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,gFAAgF;aAC7F;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACpC;gBACD,MAAM,EAAE;oBACN,IAAI,EAAE;wBACJ,GAAG,EAAE,oBAAoB;qBAC1B;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oBAAoB;qBAC1B;iBACF;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE;wBACJ,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAChD;oBACD,KAAK,EAAE;wBACL,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBAC/C;iBACF;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAChB;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAiBH;IArEC;;;OAGG;IACK,WAAW;QACjB,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IA+CD,MAAM;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;SACxB,CAAC,CAAC;QACH,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ;YAClF,+DAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,WAAW,EAAE;gBACzF,8DAAQ,CACD;YACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC3B,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
+{"version":3,"file":"tabs-trigger.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs-trigger.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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 border-none bg-transparent',\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"]}

package/dist/collection/components/tabs/tabs-trigger.css

@@ -1 +1 @@
-.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)}
+.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-transparent{background-color:transparent}.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)}

package/dist/collection/components/tabs/tabs.component.js

@@ -11,13 +11,30 @@ export class BcmTabs {
          * 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 @@ export class BcmTabs {
     componentDidLoad() {
         this.refreshElementReferences();
         this.updateTriggerProperties();
-        this.setupRelations();
-        this.updateInkbar();
-        this.updateContentVisibility();
+        this.updateTabsListProperties();
+        // Eğer defaultValue yoksa ilk tab'ı aktif yap
+        if (!this.defaultValue && this.triggers.length > 0) {
+            this.activeTab = this.triggers[0].value;
+        }
+        this.setupRelations(); // activeTab ayarlandıktan sonra relations'ı kur
+        // 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 @@ export class BcmTabs {
         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 @@ export class BcmTabs {
      * 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 @@ export class BcmTabs {
         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,8 +244,42 @@ export class BcmTabs {
                 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: '8ae1e76b89ba36c6e1e58363938a12c91f55a495' }, h("div", { key: 'a3608cf2b81e19d04a0b0dfd83740ee34d6e9cff', class: this.tabClass({ variant: this.variant }) }, h("slot", { key: '209f2bc32b116d68647ca3358b331fa87177adb6', name: "tabs-list" }), h("slot", { key: '10b5c726a8a390c5592fda3ee85cf7461ce3efb9' }))));
     }
     static get is() { return "bcm-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -246,6 +333,46 @@ export class BcmTabs {
                 "setter": false,
                 "reflect": true,
                 "defaultValue": "'medium'"
+            },
+            "variant": {
+                "type": "string",
+                "attribute": "variant",
+                "mutable": false,
+                "complexType": {
+                    "original": "'full-width' | 'auto-width'",
+                    "resolved": "\"auto-width\" | \"full-width\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab variant - controls width behavior"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "'full-width'"
+            },
+            "smooth": {
+                "type": "boolean",
+                "attribute": "smooth",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to enable smooth animations for inkbar and transitions"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
             }
         };
     }
@@ -401,6 +528,12 @@ export class BcmTabs {
         return [{
                 "propName": "size",
                 "methodName": "handleSizeChange"
+            }, {
+                "propName": "variant",
+                "methodName": "handleVariantChange"
+            }, {
+                "propName": "smooth",
+                "methodName": "handleSmoothChange"
             }];
     }
     static get listeners() {

package/dist/collection/components/tabs/tabs.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"tabs.component.js","sourceRoot":"","sources":["../../../src/components/tabs/tabs.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,EAAsB,KAAK,EAAgB,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACzI,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;;GAIG;AAMH,MAAM,OAAO,OAAO;IALpB;QAcE;;WAEG;QAEH,SAAI,GAAiC,QAAQ,CAAC;QAE9C;;WAEG;QAEH,YAAO,GAAgC,YAAY,CAAC;QAEpD;;WAEG;QAEH,WAAM,GAAY,IAAI,CAAC;QA2Bf,aAAQ,GAAgC,EAAE,CAAC;QAC3C,aAAQ,GAAgC,EAAE,CAAC;QAsRnD;;WAEG;QACK,aAAQ,GAAG,EAAE,CAAC;YACpB,IAAI,EAAE,6CAA6C;YACnD,QAAQ,EAAE;gBACR,OAAO,EAAE;oBACP,YAAY,EAAE,QAAQ;oBACtB,YAAY,EAAE,QAAQ;iBACvB;aACF;YACD,eAAe,EAAE;gBACf,OAAO,EAAE,YAAY;aACtB;SACF,CAAC,CAAC;KAYJ;IA7SC,iBAAiB;QACf,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;IACrC,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAChC,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAEhC,8CAA8C;QAC9C,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACnD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;QAC1C,CAAC;QAED,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC,gDAAgD;QAEvE,6DAA6D;QAC7D,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;YAClC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;YACjC,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,wBAAwB;QAC9B,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,gBAAgB,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACzE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;IACzD,CAAC;IAED;;OAEG;IACK,cAAc;QACpB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC9B,OAAO,CAAC,MAAM,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;YAClD,MAAM,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,KAAK,OAAO,CAAC,KAAK,CAAC,CAAC;YAC7E,IAAI,KAAK,EAAE,CAAC;gBACV,MAAM,OAAO,GAAG,SAAS,OAAO,CAAC,KAAK,EAAE,CAAC;gBACzC,KAAK,CAAC,EAAE,GAAG,OAAO,CAAC;gBACnB,OAAO,CAAC,YAAY,CAAC,eAAe,EAAE,OAAO,CAAC,CAAC;gBAC/C,KAAK,CAAC,YAAY,CAAC,iBAAiB,EAAE,WAAW,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;gBAClE,OAAO,CAAC,EAAE,GAAG,WAAW,OAAO,CAAC,KAAK,EAAE,CAAC;YAC1C,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,uBAAuB;;QAC7B,IAAI,CAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,MAAM,IAAG,CAAC,EAAE,CAAC;YAC9B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBAC9B,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC,IAAI,CAAC;gBACzB,OAAO,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;gBAC/B,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;YAC/B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEO,wBAAwB;QAC9B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;YACrC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;QACrC,CAAC;IACH,CAAC;IAGD,gBAAgB;QACd,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAGD,mBAAmB;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAEhC,6DAA6D;QAC7D,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;YAClC,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;IACH,CAAC;IAGD,kBAAkB;QAChB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/B,IAAI,CAAC,wBAAwB,EAAE,CAAC;IAClC,CAAC;IAGD,KAAK,CAAC,UAAU,CAAC,KAAa;QAC5B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC3D,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC1B,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,SAAS,CAAC,KAAa;QAC3B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC3D,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC3B,CAAC;IACH,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,cAAc;QAClB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC9B,OAAO,CAAC,QAAQ,GAAG,IAAI,CAAC;QAC1B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC9B,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,YAAY;QAChB,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAED;;OAEG;IAEH,KAAK,CAAC,YAAY,CAAC,KAAa;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;QAC3D,IAAI,OAAO,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC;YACjC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;YAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YACvB,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/B,IAAI,CAAC,eAAe,EAAE,CAAC;YAEvB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,OAAO;gBAChB,WAAW,EAAE,IAAI,CAAC,WAAW;aAC9B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC9B,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;YAClD,OAAO,CAAC,MAAM,GAAG,QAAQ,CAAC;QAC5B,CAAC,CAAC,CAAC;IACL,CAAC;IAGD,YAAY;QACV,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED;;OAEG;IAEH,iBAAiB,CAAC,KAA0B;QAC1C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,SAAS,CAAC;QAClC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAE/B,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC;QACtF,IAAI,aAAa,EAAE,CAAC;YAClB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;gBACrB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,aAAa;gBACtB,WAAW,EAAE,IAAI,CAAC,WAAW;aAC9B,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;OAEG;IACK,uBAAuB;QAC7B,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;YAC9B,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC;YACnD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC;YACrD,OAAO,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;OAEG;IACK,YAAY;;QAClB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,OAAO,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC;YACxC,OAAO;QACT,CAAC;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC;QAC3C,IAAI,aAAa,KAAK,CAAC;YAAE,OAAO;QAEhC,MAAM,MAAM,GAAG,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,0CAAE,aAAa,CAAC,SAAS,CAAgB,CAAC;QAClF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,KAAK,IAAI,CAAC,SAAS,CAAC,CAAC;QAEtF,IAAI,aAAa,IAAI,MAAM,EAAE,CAAC;YAC5B,2EAA2E;YAC3E,mDAAmD;YACnD,IAAI,IAAI,CAAC,OAAO,KAAK,YAAY,EAAE,CAAC;gBAClC,qBAAqB,CAAC,GAAG,EAAE;oBACzB,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;gBACnD,CAAC,CAAC,CAAC;YACL,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,oBAAoB,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;aAAM,CAAC;YACN,IAAI,MAAM;gBAAE,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QACzC,CAAC;IACH,CAAC;IAED;;OAEG;IACK,oBAAoB,CAAC,MAAmB,EAAE,aAA0B;;QAC1E,MAAM,WAAW,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC;QAC1D,MAAM,SAAS,GAAG,MAAA,MAAA,MAAA,IAAI,CAAC,QAAQ,0CAAE,UAAU,0CAAE,aAAa,CAAC,YAAY,CAAC,0CAAE,qBAAqB,EAAE,CAAC;QAElG,IAAI,WAAW,IAAI,SAAS,EAAE,CAAC;YAC7B,MAAM,IAAI,GAAG,WAAW,CAAC,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;YAC/C,MAAM,KAAK,GAAG,WAAW,CAAC,KAAK,CAAC;YAEhC,yEAAyE;YACzE,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,KAAK,IAAI,CAAC;YAClC,MAAM,CAAC,KAAK,CAAC,SAAS,GAAG,cAAc,IAAI,KAAK,CAAC;YACjD,MAAM,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC;YACxB,MAAM,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,CAAC;YAE5B,sCAAsC;YACtC,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;gBAChB,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;YAC7B,CAAC;iBAAM,CAAC;gBACN,kCAAkC;gBAClC,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;gBACjC,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;gBAC3B,+CAA+C;gBAC/C,qBAAqB,CAAC,GAAG,EAAE;oBACzB,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;gBAC/B,CAAC,CAAC,CAAC;YACL,CAAC;QACH,CAAC;aAAM,CAAC;YACN,OAAO,CAAC,IAAI,CAAC,0CAA0C,CAAC,CAAC;YACzD,MAAM,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;QAC7B,CAAC;IACH,CAAC;IAkBD,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC;gBAClD,6DAAM,IAAI,EAAC,WAAW,GAAG;gBACzB,8DAAa,CACT,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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\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    this.setupRelations(); // activeTab ayarlandıktan sonra relations'ı kur\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"]}

package/dist/collection/components/text/text.component.js

@@ -90,7 +90,7 @@ export class BcmText {
         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: '152d737752eea962ac3c5086011da69578ef0920', class: cs('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'e8c8c89a5925936a2e22a75265b7f42317eab983' }, this.text)));
+        return (h(Tag, { key: 'cb3c78143a1f52fdadd9458219ef5f12eace04e6', class: cs('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: '7ab30bbf72b0fe1be98089b6c452662a382363e1' }, this.text)));
     }
     static get is() { return "bcm-text"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/textarea/textarea.component.js

@@ -261,14 +261,14 @@ export class BcmTextarea {
             disabled: this.disabled,
             focused: this.isFocused,
         });
-        return (h("div", { key: 'cce4483a5f44eed885b80802ae5ee2095f4cba41', class: "bcm-ui-element" }, this.label && (h("label", { key: 'd9a4ac16ba8b98b46c2b2ac64840666ae837de2a', class: classNames('textarea-label font-medium', {
+        return (h("div", { key: 'fefeeddf26ed03353df28add5cf3316ae975b01e', class: "bcm-ui-element" }, this.label && (h("label", { key: '98990540571481bd0d800de1cb4f62543c879b19', class: classNames('textarea-label font-medium', {
                 'text-color-label': !this.disabled,
                 'text-color-disabled': this.disabled,
             }, {
                 'text-size-3': this.size === 'small',
                 'text-size-4': this.size === 'medium',
                 'text-size-5': this.size === 'large',
-            }), htmlFor: textareaId }, h("slot", { key: '6ce983052a2dbacfdf5dc6321a9812b3761d58a2', name: "label" }, this.label), this.required && h("span", { key: '4b01f610ee619d2143aa320a367e0acc2b8c1e94' }, "*"))), h("div", { key: '77ec8de4e301cf57e1a9de845bfe2402ebaa4f2e', class: base() }, h("textarea", { key: 'e2cd335bf9d9da8485a45dd5a3cc14052644ca43', ref: el => (this.textareaRef = el), id: textareaId, class: textareaClass(), name: this.name, rows: this.rows, cols: this.cols, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minLength: this.minLength, maxLength: this.maxLength, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: event => {
+            }), htmlFor: textareaId }, h("slot", { key: '73979bd46640de8573d63e75d31ae26ce36b890d', name: "label" }, this.label), this.required && h("span", { key: 'dfe9ba4b33e1e3cd2c88e917887757b1c6bcb383' }, "*"))), h("div", { key: '81dad3fff00c8c31f59d026411b9e0cc3926c72f', class: base() }, h("textarea", { key: '5a36b4eec939c61ee2a5bf884ad7cfabad365911', ref: el => (this.textareaRef = el), id: textareaId, class: textareaClass(), name: this.name, rows: this.rows, cols: this.cols, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, minLength: this.minLength, maxLength: this.maxLength, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: event => {
                 const target = event.target;
                 this.value = target.value;
                 this.bcmInput.emit(event);
@@ -276,7 +276,7 @@ export class BcmTextarea {
                 if (this.autoGrow) {
                     this.adjustHeight();
                 }
-            }, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: '151edc84e8faceee551b2de16c3dc81a5016240c', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: 'd188a0d8dc28c80c73e66884473c2fa3c5cab514', class: classNames('textarea-caption-text font-regular mt-1', {
+            }, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), this.showCounter && (h("div", { key: 'bcb3f8ca8ca6db30202b59774404d806250f52b5', class: counterText() }, this.value.length, this.maxLength ? `/${this.maxLength}` : ''))), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '4b0134d3a3a16c0b32d928fb27a802a4a2e21d35', class: classNames('textarea-caption-text font-regular mt-1', {
                 'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
                 'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
                 'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',

package/dist/collection/components/tooltip/tooltip.component.js

@@ -188,7 +188,7 @@ export class Tooltip {
             size: this.size,
             isOpen: this.open,
         });
-        return (h("div", { key: 'dcc6e18aa58d06cb88e74d47379476c6319bdc2a', class: "relative" }, h("slot", { key: 'c71d60cff006d2da8e7eadb372aa854c18cf78d4', onSlotchange: () => this.handleSlotChange() }), h("div", { key: '3809fa4c4431ace38173db76013742a5b9aba2da', role: "tooltip", class: tooltip(), ref: el => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: 'b9a21a339baaa3f37cad4477d990f4028cfb4e91', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("slot", { key: '64622a02cfd571b2cff5b51dc1c412d0b3e48396', name: "tooltip" }, this.message))));
+        return (h("div", { key: '4f56a4f689b53133813d3f137cffe76681a55507', class: "relative" }, h("slot", { key: 'b4d9bff63de72e1983ed98d876e9d3e3087bb8af', onSlotchange: () => this.handleSlotChange() }), h("div", { key: 'e0e8268e16210582970d43124057fc16bd0dae6b', role: "tooltip", class: tooltip(), ref: el => (this.tooltipElement = el), part: "tooltip" }, h("div", { key: 'bcdf720805c95c1a2ca3f734ea34473f5cf789a0', class: arrow(), ref: el => (this.arrowElement = el), part: "arrow" }), h("slot", { key: 'c008c7ab349cbc03f7444edf80afce16795aa663', name: "tooltip" }, this.message))));
     }
     static get is() { return "bcm-tooltip"; }
     static get encapsulation() { return "shadow"; }