bromcom-ui-next 0.1.30 → 0.1.31

package/dist/components/bcm-tab.js

@@ -0,0 +1,71 @@
+import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
+
+const bcmTabCss = ".block{display:block}:host{display:none}:host([active]){display:block}.tab-panel{animation:fadeIn .2s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.static{position:static}.p-4{padding:1rem}.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 BcmTab$1 = /*@__PURE__*/ proxyCustomElement(class BcmTab extends H {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.bcmTabClick = createEvent(this, "bcmTabClick", 5);
+    }
+    get el() { return this; }
+    /**
+     * Unique identifier for this tab
+     */
+    value;
+    /**
+     * Label text to display in tab button
+     */
+    label;
+    /**
+     * Disabled state
+     */
+    disabled = false;
+    /**
+     * Active state (controlled by parent)
+     */
+    active = false;
+    /**
+     * Size variant (inherited from parent)
+     */
+    size = 'md';
+    /**
+     * Internal event emitted when tab button is clicked
+     */
+    bcmTabClick;
+    render() {
+        return (h(Host, { key: '738093c7bae97cdbf80ad64431777a017797437e', role: "tabpanel", "aria-labelledby": `tab-${this.value}`, id: `panel-${this.value}`, "aria-hidden": (!this.active).toString(), style: { display: this.active ? 'block' : 'none' } }, h("div", { key: 'f19a9b3fed8c388b368cd411f429d9f01fb704bc', class: "tab-panel p-4" }, h("slot", { key: '6087e6a56403adff89b34d7ac1bd8419d9fc1895' }))));
+    }
+    static get style() { return bcmTabCss; }
+}, [257, "bcm-tab", {
+        "value": [513],
+        "label": [513],
+        "disabled": [516],
+        "active": [1540],
+        "size": [1025]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-tab"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-tab":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BcmTab$1);
+            }
+            break;
+    } });
+}
+defineCustomElement$1();
+
+const BcmTab = BcmTab$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { BcmTab, defineCustomElement };
+//# sourceMappingURL=bcm-tab.js.map
+
+//# sourceMappingURL=bcm-tab.js.map

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

@@ -0,0 +1 @@
+{"file":"bcm-tab.js","mappings":";;AAAA,MAAM,SAAS,GAAG,wZAAwZ;;MCW7ZA,QAAM,iBAAAC,kBAAA,CAAA,MAAA,MAAA,SAAAC,CAAA,CAAA;;;;;;;;;;AAGjB;;AAEG;AAEH,IAAA,KAAK;AAEL;;AAEG;AAEH,IAAA,KAAK;AAEL;;AAEG;IAEH,QAAQ,GAAY,KAAK;AAEzB;;AAEG;IAEH,MAAM,GAAY,KAAK;AAEvB;;AAEG;IAEH,IAAI,GAAuB,IAAI;AAE/B;;AAEG;AAOH,IAAA,WAAW;IAEX,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,IAAI,EAAC,UAAU,EACE,iBAAA,EAAA,CAAO,IAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EACpC,EAAE,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,aAAA,EACZ,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,EACtC,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,EAAA,EAElD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["BcmTab","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/tabs/bcm-tab.css?tag=bcm-tab&encapsulation=shadow","src/components/tabs/tab.component.tsx"],"sourcesContent":[":host {\n  display: none;\n}\n\n:host([active]) {\n  display: block;\n}\n\n.tab-panel {\n  animation: fadeIn 200ms ease-in-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter } from '@stencil/core';\n\n/**\n * Individual tab component - self-contained with label and content panel\n * @slot - Default slot for tab content\n */\n@Component({\n  tag: 'bcm-tab',\n  styleUrl: 'bcm-tab.css',\n  shadow: true,\n})\nexport class BcmTab {\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique identifier for this tab\n   */\n  @Prop({ reflect: true })\n  value!: string;\n\n  /**\n   * Label text to display in tab button\n   */\n  @Prop({ reflect: true })\n  label!: string;\n\n  /**\n   * Disabled state\n   */\n  @Prop({ reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Active state (controlled by parent)\n   */\n  @Prop({ mutable: true, reflect: true })\n  active: boolean = false;\n\n  /**\n   * Size variant (inherited from parent)\n   */\n  @Prop({ mutable: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Internal event emitted when tab button is clicked\n   */\n  @Event({\n    composed: false,\n    bubbles: true,\n    cancelable: true,\n    eventName: 'bcmTabClick',\n  })\n  bcmTabClick: EventEmitter<string>;\n\n  render() {\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-labelledby={`tab-${this.value}`}\n        id={`panel-${this.value}`}\n        aria-hidden={(!this.active).toString()}\n        style={{ display: this.active ? 'block' : 'none' }}\n      >\n        <div class=\"tab-panel p-4\">\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-tabs.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
 import { t as tv } from './p-CEcVC0yX.js';
 
-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 bcmTabsCss = ".block{display:block}:host{display:block;width:100%}.tabs-container{--active-index:0;--tab-count:1}.inkbar{transition-timing-function:cubic-bezier(.4,0,.2,1)}.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}}.pointer-events-none{pointer-events:none}.static{position:static}.absolute{position:absolute}.relative{position:relative}.bottom-0{bottom:0}.left-0{left:0}.flex{display:flex}.hidden{display:none}.h-0\\.5{height:.125rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.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))}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.rounded-t-lg{border-top-left-radius:var(--bcm-ui-border-radius-lg,8px);border-top-right-radius:var(--bcm-ui-border-radius-lg,8px)}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-center{text-align:center}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-sm{font-size:.875rem;line-height:1.25rem}.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)}.opacity-50{opacity:.5}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-md{--tw-shadow:var(--bcm-ui-box-shadow-md);--tw-shadow-colored:var(--bcm-ui-box-shadow-md)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
 
 const BcmTabs$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabs extends H {
     constructor(registerHost) {
@@ -11,304 +11,253 @@ const BcmTabs$1 = /*@__PURE__*/ proxyCustomElement(class BcmTabs extends H {
         }
         this.__attachShadow();
         this.bcmTabChange = createEvent(this, "bcmTabChange", 1);
-        /**
-         * 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',
-            variants: {
-                variant: {
-                    'full-width': 'w-full',
-                    'auto-width': 'w-auto',
-                },
-            },
-            defaultVariants: {
-                variant: 'full-width',
-            },
-        });
     }
+    get el() { return this; }
+    /**
+     * Active tab value
+     */
+    value;
+    /**
+     * Tab size variant
+     */
+    size = 'md';
+    /**
+     * Visual variant
+     */
+    variant = 'line';
+    /**
+     * Enable shadow on main container
+     */
+    shadow = false;
+    /**
+     * Emits when active tab changes
+     */
+    bcmTabChange;
+    tabs = [];
+    activeIndex = 0;
+    tabElements = [];
     componentWillLoad() {
-        this.activeTab = this.defaultValue;
+        this.discoverTabs();
     }
     componentDidLoad() {
-        this.refreshElementReferences();
-        this.updateTriggerProperties();
-        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();
+        this.updateActiveIndex();
+        this.updateTabStates();
+    }
+    /**
+     * Discovers all bcm-tab children
+     */
+    discoverTabs() {
+        this.tabElements = Array.from(this.el.querySelectorAll('bcm-tab'));
+        this.tabs = this.tabElements.map((tab) => ({
+            value: tab.value,
+            label: tab.label || tab.value,
+            disabled: tab.disabled || false,
+        }));
+        // Set initial value if not provided
+        if (!this.value && this.tabs.length > 0) {
+            const firstEnabledTab = this.tabs.find(t => !t.disabled);
+            if (firstEnabledTab) {
+                this.value = firstEnabledTab.value;
+            }
         }
     }
     /**
-     * Refreshes DOM element references
+     * Updates the active index based on current value
      */
-    refreshElementReferences() {
-        this.triggers = Array.from(this.el.querySelectorAll('bcm-tabs-trigger'));
-        this.contents = Array.from(this.el.querySelectorAll('bcm-tabs-content'));
-        this.tabsList = this.el.querySelector('bcm-tabs-list');
+    updateActiveIndex() {
+        const index = this.tabs.findIndex(t => t.value === this.value);
+        this.activeIndex = index >= 0 ? index : 0;
     }
     /**
-     * Establishes relationships between tabs and content
+     * Updates active/inactive state of all tab elements
      */
-    setupRelations() {
-        this.triggers.forEach(trigger => {
-            trigger.active = trigger.value === this.activeTab;
-            const panel = this.contents.find(content => content.value === trigger.value);
-            if (panel) {
-                const panelId = `panel-${trigger.value}`;
-                panel.id = panelId;
-                trigger.setAttribute('aria-controls', panelId);
-                panel.setAttribute('aria-labelledby', `trigger-${trigger.value}`);
-                trigger.id = `trigger-${trigger.value}`;
-            }
+    updateTabStates() {
+        this.tabElements.forEach((tab) => {
+            tab.active = tab.value === this.value;
         });
     }
-    updateTriggerProperties() {
-        var _a;
-        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;
+    handleValueChange(newValue, oldValue) {
+        this.updateActiveIndex();
+        this.updateTabStates();
+        this.updateCSSVariables();
+        if (oldValue !== newValue) {
+            this.bcmTabChange.emit({
+                value: newValue,
+                previousValue: oldValue,
             });
         }
     }
-    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) {
-            trigger.disabled = true;
-        }
-    }
-    async enableTab(value) {
-        const trigger = this.triggers.find(t => t.value === value);
-        if (trigger) {
-            trigger.disabled = false;
-        }
+        this.propagatePropsToTabs();
     }
     /**
-     * Disables all tabs
+     * Propagates parent props to child tabs
      */
-    async disableAllTabs() {
-        this.triggers.forEach(trigger => {
-            trigger.disabled = true;
+    propagatePropsToTabs() {
+        this.tabElements.forEach((tab) => {
+            tab.size = this.size;
         });
     }
     /**
-     * Enables all tabs
+     * Updates CSS custom properties for inkbar positioning
      */
-    async enableAllTabs() {
-        this.triggers.forEach(trigger => {
-            trigger.disabled = false;
-        });
+    updateCSSVariables() {
+        const tabsContainer = this.el.shadowRoot?.querySelector('.tabs-container');
+        if (tabsContainer) {
+            tabsContainer.style.setProperty('--active-index', this.activeIndex.toString());
+            tabsContainer.style.setProperty('--tab-count', this.tabs.length.toString());
+        }
     }
     /**
-     * Returns the active tab value
+     * Handles tab click events from children
      */
-    async getActiveTab() {
-        return this.activeTab;
+    handleTabClick(event) {
+        const clickedValue = event.detail;
+        const tab = this.tabs.find(t => t.value === clickedValue);
+        if (tab && !tab.disabled) {
+            this.value = clickedValue;
+        }
     }
     /**
-     * Sets the active tab
+     * Keyboard navigation support
      */
-    async setActiveTab(value) {
-        const trigger = this.triggers.find(t => t.value === value);
-        if (trigger && !trigger.disabled) {
-            this.previousTab = this.activeTab;
-            this.activeTab = value;
-            this.updateInkbar();
-            this.updateContentVisibility();
-            this.updateTabStatus();
-            this.bcmTabChange.emit({
-                activeTab: this.activeTab,
-                element: trigger,
-                previousTab: this.previousTab,
-            });
+    handleKeyDown(ev) {
+        const target = ev.target;
+        if (!target.classList.contains('tab-button'))
+            return;
+        let newIndex = this.activeIndex;
+        switch (ev.key) {
+            case 'ArrowRight':
+            case 'ArrowDown':
+                ev.preventDefault();
+                newIndex = this.getNextEnabledTabIndex(this.activeIndex);
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                ev.preventDefault();
+                newIndex = this.getPreviousEnabledTabIndex(this.activeIndex);
+                break;
+            case 'Home':
+                ev.preventDefault();
+                newIndex = this.getFirstEnabledTabIndex();
+                break;
+            case 'End':
+                ev.preventDefault();
+                newIndex = this.getLastEnabledTabIndex();
+                break;
+            default:
+                return;
+        }
+        if (newIndex !== this.activeIndex) {
+            this.value = this.tabs[newIndex].value;
+            this.focusTabAtIndex(newIndex);
         }
     }
-    /**
-     * Updates tab status
-     */
-    updateTabStatus() {
-        this.triggers.forEach(trigger => {
-            const isActive = trigger.value === this.activeTab;
-            trigger.active = isActive;
-        });
+    getNextEnabledTabIndex(currentIndex) {
+        for (let i = currentIndex + 1; i < this.tabs.length; i++) {
+            if (!this.tabs[i].disabled)
+                return i;
+        }
+        return currentIndex;
     }
-    handleResize() {
-        this.updateInkbar();
+    getPreviousEnabledTabIndex(currentIndex) {
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            if (!this.tabs[i].disabled)
+                return i;
+        }
+        return currentIndex;
     }
-    /**
-     * Triggered when a tab is selected
-     */
-    handleTabSelected(event) {
-        this.previousTab = this.activeTab;
-        this.activeTab = event.detail;
-        this.updateTabStatus();
-        this.updateInkbar();
-        this.updateContentVisibility();
-        const activeElement = this.triggers.find(trigger => trigger.value === this.activeTab);
-        if (activeElement) {
-            this.bcmTabChange.emit({
-                activeTab: this.activeTab,
-                element: activeElement,
-                previousTab: this.previousTab,
-            });
+    getFirstEnabledTabIndex() {
+        const index = this.tabs.findIndex(t => !t.disabled);
+        return index >= 0 ? index : 0;
+    }
+    getLastEnabledTabIndex() {
+        for (let i = this.tabs.length - 1; i >= 0; i--) {
+            if (!this.tabs[i].disabled)
+                return i;
         }
+        return this.tabs.length - 1;
     }
-    /**
-     * Updates content visibility
-     */
-    updateContentVisibility() {
-        this.contents.forEach(content => {
-            const isVisible = content.value === this.activeTab;
-            content.style.display = isVisible ? 'block' : 'none';
-            content.setAttribute('aria-hidden', (!isVisible).toString());
-        });
+    focusTabAtIndex(index) {
+        const buttons = this.el.shadowRoot?.querySelectorAll('.tab-button');
+        if (buttons && buttons[index]) {
+            buttons[index].focus();
+        }
     }
     /**
-     * Updates inkbar position
+     * Public method to programmatically set active tab
      */
-    updateInkbar() {
-        var _a, _b;
-        if (!this.tabsList) {
-            console.warn('bcm-tabs-list not found');
-            return;
-        }
-        const totalTriggers = this.triggers.length;
-        if (totalTriggers === 0)
-            return;
-        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) {
-            // 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 {
-                this.updateInkbarPosition(inkbar, activeTrigger);
-            }
-        }
-        else {
-            if (inkbar)
-                inkbar.style.opacity = '0';
+    async setActiveTab(value) {
+        const tab = this.tabs.find(t => t.value === value);
+        if (tab && !tab.disabled) {
+            this.value = value;
         }
     }
     /**
-     * Updates inkbar position and size
+     * Public method to get active tab value
      */
-    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';
-        }
+    async getActiveTab() {
+        return this.value;
     }
+    /**
+     * Tailwind class configuration
+     */
+    containerClass = tv({
+        base: 'tabs-container flex flex-col w-full',
+        variants: {
+            shadow: {
+                true: 'shadow-md rounded-lg',
+                false: '',
+            },
+        },
+    });
+    tabsListClass = tv({
+        base: 'tabs-list relative flex border-b border-color-default',
+        variants: {
+            variant: {
+                line: 'bg-transparent',
+                enclosed: 'bg-color-background-subtle border border-color-default rounded-t-lg',
+            },
+        },
+    });
+    inkbarClass = tv({
+        base: 'inkbar absolute bottom-0 left-0 h-0.5 bg-color-primary pointer-events-none',
+        variants: {
+            variant: {
+                line: 'transition-transform duration-200 ease-smooth',
+                enclosed: 'hidden',
+            },
+        },
+    });
     render() {
-        return (h(Host, { key: '8d187c500759ab443717c0c8f8c965bf5b608a49' }, h("div", { key: '45de462ff12012abb2f3bad8a7c31976ee839ef9', class: this.tabClass({ variant: this.variant }) }, h("slot", { key: 'b4f945118e8606b1276aee568c029d20d05a40a2', name: "tabs-list" }), h("slot", { key: '23d055af5abd2ab9dde916d625795d448baf68a0' }))));
+        this.updateCSSVariables();
+        this.propagatePropsToTabs();
+        return (h(Host, { key: '43ca51341fed91a75222627b7050975ff00d774b' }, h("div", { key: '537add7dc0fc2905ee7e6d29570984b3edc6070c', class: this.containerClass({ shadow: this.shadow }) }, h("div", { key: 'f26fc4c052121b2cd7c94a07ed4fa3ca24d86f6e', class: this.tabsListClass({ variant: this.variant }), role: "tablist" }, this.tabs.map((tab, index) => (h("button", { key: tab.value, class: `tab-button flex-1 px-4 py-2 text-center font-medium transition-colors border-none ${tab.value === this.value
+                ? 'text-color-primary'
+                : tab.disabled
+                    ? 'text-color-disabled cursor-not-allowed opacity-50'
+                    : 'text-color-placeholder hover:text-color-primary cursor-pointer'} ${this.size === 'sm' ? 'text-sm py-1.5 px-3' : this.size === 'lg' ? 'text-lg py-3 px-5' : 'text-base py-2 px-4'} bg-transparent`, role: "tab", "aria-selected": (tab.value === this.value).toString(), "aria-controls": `panel-${tab.value}`, id: `tab-${tab.value}`, disabled: tab.disabled, onClick: () => !tab.disabled && (this.value = tab.value), tabindex: index === this.activeIndex ? 0 : -1 }, tab.label))), this.variant === 'line' && (h("div", { key: '74bc405d20efdb73858ddc52e9d7a1e40260de8d', class: this.inkbarClass({ variant: this.variant }), style: {
+                transform: `translateX(calc(${this.activeIndex} * 100% / ${this.tabs.length}))`,
+                width: `calc(100% / ${this.tabs.length})`,
+            } }))), h("div", { key: 'f0e47f8829616c48d66638368907f73f4f6359af', class: "tabs-content" }, h("slot", { key: 'feb9d8f749dbafea06c09eb8300b0edd783aeabc' })))));
     }
-    get el() { return this; }
     static get watchers() { return {
-        "size": ["handleSizeChange"],
-        "variant": ["handleVariantChange"],
-        "smooth": ["handleSmoothChange"]
+        "value": ["handleValueChange"],
+        "size": ["handleSizeChange"]
     }; }
     static get style() { return bcmTabsCss; }
 }, [257, "bcm-tabs", {
-        "defaultValue": [513, "default-value"],
+        "value": [1537],
         "size": [513],
         "variant": [513],
-        "smooth": [516],
-        "activeTab": [32],
-        "previousTab": [32],
-        "disableTab": [64],
-        "enableTab": [64],
-        "disableAllTabs": [64],
-        "enableAllTabs": [64],
-        "getActiveTab": [64],
-        "setActiveTab": [64]
-    }, [[9, "resize", "handleResize"], [2, "bcmTabSelected", "handleTabSelected"]], {
-        "size": ["handleSizeChange"],
-        "variant": ["handleVariantChange"],
-        "smooth": ["handleSmoothChange"]
+        "shadow": [516],
+        "tabs": [32],
+        "activeIndex": [32],
+        "setActiveTab": [64],
+        "getActiveTab": [64]
+    }, [[0, "bcmTabClick", "handleTabClick"], [0, "keydown", "handleKeyDown"]], {
+        "value": ["handleValueChange"],
+        "size": ["handleSizeChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {