bromcom-ui-next 0.1.29 → 0.1.31

package/dist/cjs/bcm-tab.entry.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-tab.entry.cjs.js","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"],"names":["h","Host"],"mappings":";;;;AAAA,MAAM,SAAS,GAAG,wZAAwZ;;MCW7Z,MAAM,GAAA,MAAA;;;;;;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,QACEA,QAACC,UAAI,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,EAElDD,OAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxBA,OAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;"}

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

@@ -1,298 +1,250 @@
 'use strict';
 
-var index = require('./index-BtiU-G2W.js');
+var index = require('./index-1Qal-onT.js');
 var tv = require('./tv-ngpIbGlG.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 = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.bcmTabChange = index.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.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 index.getElement(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();
     }
     /**
-     * Refreshes DOM element references
+     * Discovers all bcm-tab children
      */
-    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');
-    }
-    /**
-     * Establishes relationships between tabs and content
-     */
-    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}`;
+    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;
             }
-        });
-    }
-    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;
-            });
-        }
-    }
-    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;
         }
     }
     /**
-     * Disables all tabs
+     * Updates the active index based on current value
      */
-    async disableAllTabs() {
-        this.triggers.forEach(trigger => {
-            trigger.disabled = true;
-        });
+    updateActiveIndex() {
+        const index = this.tabs.findIndex(t => t.value === this.value);
+        this.activeIndex = index >= 0 ? index : 0;
     }
     /**
-     * Enables all tabs
+     * Updates active/inactive state of all tab elements
      */
-    async enableAllTabs() {
-        this.triggers.forEach(trigger => {
-            trigger.disabled = false;
+    updateTabStates() {
+        this.tabElements.forEach((tab) => {
+            tab.active = tab.value === this.value;
         });
     }
-    /**
-     * Returns the active tab value
-     */
-    async getActiveTab() {
-        return this.activeTab;
-    }
-    /**
-     * Sets the active tab
-     */
-    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();
+    handleValueChange(newValue, oldValue) {
+        this.updateActiveIndex();
+        this.updateTabStates();
+        this.updateCSSVariables();
+        if (oldValue !== newValue) {
             this.bcmTabChange.emit({
-                activeTab: this.activeTab,
-                element: trigger,
-                previousTab: this.previousTab,
+                value: newValue,
+                previousValue: oldValue,
             });
         }
     }
+    handleSizeChange() {
+        this.propagatePropsToTabs();
+    }
     /**
-     * Updates tab status
+     * Propagates parent props to child tabs
      */
-    updateTabStatus() {
-        this.triggers.forEach(trigger => {
-            const isActive = trigger.value === this.activeTab;
-            trigger.active = isActive;
+    propagatePropsToTabs() {
+        this.tabElements.forEach((tab) => {
+            tab.size = this.size;
         });
     }
-    handleResize() {
-        this.updateInkbar();
-    }
     /**
-     * Triggered when a tab is selected
+     * Updates CSS custom properties for inkbar positioning
      */
-    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,
-            });
+    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());
         }
     }
     /**
-     * Updates content visibility
+     * Handles tab click events from children
      */
-    updateContentVisibility() {
-        this.contents.forEach(content => {
-            const isVisible = content.value === this.activeTab;
-            content.style.display = isVisible ? 'block' : 'none';
-            content.setAttribute('aria-hidden', (!isVisible).toString());
-        });
+    handleTabClick(event) {
+        const clickedValue = event.detail;
+        const tab = this.tabs.find(t => t.value === clickedValue);
+        if (tab && !tab.disabled) {
+            this.value = clickedValue;
+        }
     }
     /**
-     * Updates inkbar position
+     * Keyboard navigation support
      */
-    updateInkbar() {
-        var _a, _b;
-        if (!this.tabsList) {
-            console.warn('bcm-tabs-list not found');
-            return;
-        }
-        const totalTriggers = this.triggers.length;
-        if (totalTriggers === 0)
+    handleKeyDown(ev) {
+        const target = ev.target;
+        if (!target.classList.contains('tab-button'))
             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';
+        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);
+        }
+    }
+    getNextEnabledTabIndex(currentIndex) {
+        for (let i = currentIndex + 1; i < this.tabs.length; i++) {
+            if (!this.tabs[i].disabled)
+                return i;
+        }
+        return currentIndex;
+    }
+    getPreviousEnabledTabIndex(currentIndex) {
+        for (let i = currentIndex - 1; i >= 0; i--) {
+            if (!this.tabs[i].disabled)
+                return i;
+        }
+        return currentIndex;
+    }
+    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;
+    }
+    focusTabAtIndex(index) {
+        const buttons = this.el.shadowRoot?.querySelectorAll('.tab-button');
+        if (buttons && buttons[index]) {
+            buttons[index].focus();
         }
     }
     /**
-     * Updates inkbar position and size
+     * Public method to programmatically set active tab
      */
-    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 setActiveTab(value) {
+        const tab = this.tabs.find(t => t.value === value);
+        if (tab && !tab.disabled) {
+            this.value = value;
         }
     }
+    /**
+     * Public method to get active tab value
+     */
+    async getActiveTab() {
+        return this.value;
+    }
+    /**
+     * Tailwind class configuration
+     */
+    containerClass = tv.tv({
+        base: 'tabs-container flex flex-col w-full',
+        variants: {
+            shadow: {
+                true: 'shadow-md rounded-lg',
+                false: '',
+            },
+        },
+    });
+    tabsListClass = tv.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.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 (index.h(index.Host, { key: '40390aa3b08a9f72fd1e8aac0e784c988015d0da' }, index.h("div", { key: '47f30332623e92689e8ca5beac6e5302750236ed', class: this.tabClass({ variant: this.variant }) }, index.h("slot", { key: 'e6000e04b9ca3b82d55928d24d8321e6bda8b3c3', name: "tabs-list" }), index.h("slot", { key: '37fbf0d03adf2a66db578a24732e2af52204dbf6' }))));
+        this.updateCSSVariables();
+        this.propagatePropsToTabs();
+        return (index.h(index.Host, { key: '43ca51341fed91a75222627b7050975ff00d774b' }, index.h("div", { key: '537add7dc0fc2905ee7e6d29570984b3edc6070c', class: this.containerClass({ shadow: this.shadow }) }, index.h("div", { key: 'f26fc4c052121b2cd7c94a07ed4fa3ca24d86f6e', class: this.tabsListClass({ variant: this.variant }), role: "tablist" }, this.tabs.map((tab, index$1) => (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$1 === this.activeIndex ? 0 : -1 }, tab.label))), this.variant === 'line' && (index.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})`,
+            } }))), index.h("div", { key: 'f0e47f8829616c48d66638368907f73f4f6359af', class: "tabs-content" }, index.h("slot", { key: 'feb9d8f749dbafea06c09eb8300b0edd783aeabc' })))));
     }
-    get el() { return index.getElement(this); }
     static get watchers() { return {
-        "size": ["handleSizeChange"],
-        "variant": ["handleVariantChange"],
-        "smooth": ["handleSmoothChange"]
+        "value": ["handleValueChange"],
+        "size": ["handleSizeChange"]
     }; }
 };
 BcmTabs.style = bcmTabsCss;
 
 exports.bcm_tabs = BcmTabs;
 //# sourceMappingURL=bcm-tabs.entry.cjs.js.map
-
-//# sourceMappingURL=bcm-tabs.cjs.entry.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"bcm-tabs.entry.cjs.js","sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n}\n\n:host([variant='full-width']) {\n  width: 100%;\n}\n\n:host([variant='auto-width']) {\n  width: auto;\n}\n","import { Component, State, Prop, Element, h, Host, Listen, ComponentInterface, Event, EventEmitter, Watch, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @description Tab interface component\n * @slot - Default slot for content area\n * @slot tabs-list - Special slot for tab list\n */\n@Component({\n  tag: 'bcm-tabs',\n  styleUrl: 'bcm-tabs.css',\n  shadow: true,\n})\nexport class BcmTabs implements ComponentInterface {\n  @Element() el: HTMLElement;\n\n  /**\n   * Default active tab value\n   */\n  @Prop({ reflect: true })\n  defaultValue: string;\n\n  /**\n   * Tab size\n   */\n  @Prop({ reflect: true })\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Tab variant - controls width behavior\n   */\n  @Prop({ reflect: true })\n  variant: 'full-width' | 'auto-width' = 'full-width';\n\n  /**\n   * Whether to enable smooth animations for inkbar and transitions\n   */\n  @Prop({ reflect: true })\n  smooth: boolean = true;\n\n  /**\n   * Triggers when tab changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabChange',\n  })\n  bcmTabChange: EventEmitter<{\n    activeTab: string;\n    element: HTMLBcmTabsTriggerElement;\n    previousTab?: string;\n  }>;\n\n  /**\n   * Active tab value\n   */\n  @State() activeTab: string;\n\n  /**\n   * Previous active tab value\n   */\n  @State() previousTab: string;\n\n  private triggers: HTMLBcmTabsTriggerElement[] = [];\n  private contents: HTMLBcmTabsContentElement[] = [];\n  private tabsList: HTMLBcmTabsListElement;\n\n  componentWillLoad() {\n    this.activeTab = this.defaultValue;\n  }\n\n  componentDidLoad() {\n    this.refreshElementReferences();\n    this.updateTriggerProperties();\n    this.updateTabsListProperties();\n\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"],"names":["tv","h","Host"],"mappings":"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"}
+{"version":3,"file":"bcm-tabs.entry.cjs.js","sources":["src/components/tabs/bcm-tabs.css?tag=bcm-tabs&encapsulation=shadow","src/components/tabs/tabs.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n}\n\n.tabs-container {\n  /* CSS Variables for inkbar positioning */\n  --active-index: 0;\n  --tab-count: 1;\n}\n\n/* Smooth animation timing function */\n.inkbar {\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, Watch, State, Listen, Method } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * Modern Tabs component with CSS-first approach\n * @slot - Default slot for bcm-tab components\n */\n@Component({\n  tag: 'bcm-tabs',\n  styleUrl: 'bcm-tabs.css',\n  shadow: true,\n})\nexport class BcmTabs {\n  @Element() el: HTMLElement;\n\n  /**\n   * Active tab value\n   */\n  @Prop({ mutable: true, reflect: true })\n  value: string;\n\n  /**\n   * Tab size variant\n   */\n  @Prop({ reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  /**\n   * Visual variant\n   */\n  @Prop({ reflect: true })\n  variant: 'line' | 'enclosed' = 'line';\n\n  /**\n   * Enable shadow on main container\n   */\n  @Prop({ reflect: true })\n  shadow: boolean = false;\n\n  /**\n   * Emits when active tab changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmTabChange',\n  })\n  bcmTabChange: EventEmitter<{\n    value: string;\n    previousValue: string;\n  }>;\n\n  @State() tabs: Array<{ value: string; label: string; disabled: boolean }> = [];\n  @State() activeIndex: number = 0;\n\n  private tabElements: Element[] = [];\n\n  componentWillLoad() {\n    this.discoverTabs();\n  }\n\n  componentDidLoad() {\n    this.updateActiveIndex();\n    this.updateTabStates();\n  }\n\n  /**\n   * Discovers all bcm-tab children\n   */\n  private discoverTabs() {\n    this.tabElements = Array.from(this.el.querySelectorAll('bcm-tab'));\n    this.tabs = this.tabElements.map((tab: any) => ({\n      value: tab.value,\n      label: tab.label || tab.value,\n      disabled: tab.disabled || false,\n    }));\n\n    // Set initial value if not provided\n    if (!this.value && this.tabs.length > 0) {\n      const firstEnabledTab = this.tabs.find(t => !t.disabled);\n      if (firstEnabledTab) {\n        this.value = firstEnabledTab.value;\n      }\n    }\n  }\n\n  /**\n   * Updates the active index based on current value\n   */\n  private updateActiveIndex() {\n    const index = this.tabs.findIndex(t => t.value === this.value);\n    this.activeIndex = index >= 0 ? index : 0;\n  }\n\n  /**\n   * Updates active/inactive state of all tab elements\n   */\n  private updateTabStates() {\n    this.tabElements.forEach((tab: any) => {\n      tab.active = tab.value === this.value;\n    });\n  }\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string) {\n    this.updateActiveIndex();\n    this.updateTabStates();\n    this.updateCSSVariables();\n\n    if (oldValue !== newValue) {\n      this.bcmTabChange.emit({\n        value: newValue,\n        previousValue: oldValue,\n      });\n    }\n  }\n\n  @Watch('size')\n  handleSizeChange() {\n    this.propagatePropsToTabs();\n  }\n\n  /**\n   * Propagates parent props to child tabs\n   */\n  private propagatePropsToTabs() {\n    this.tabElements.forEach((tab: any) => {\n      tab.size = this.size;\n    });\n  }\n\n  /**\n   * Updates CSS custom properties for inkbar positioning\n   */\n  private updateCSSVariables() {\n    const tabsContainer = this.el.shadowRoot?.querySelector('.tabs-container') as HTMLElement;\n    if (tabsContainer) {\n      tabsContainer.style.setProperty('--active-index', this.activeIndex.toString());\n      tabsContainer.style.setProperty('--tab-count', this.tabs.length.toString());\n    }\n  }\n\n  /**\n   * Handles tab click events from children\n   */\n  @Listen('bcmTabClick')\n  handleTabClick(event: CustomEvent<string>) {\n    const clickedValue = event.detail;\n    const tab = this.tabs.find(t => t.value === clickedValue);\n\n    if (tab && !tab.disabled) {\n      this.value = clickedValue;\n    }\n  }\n\n  /**\n   * Keyboard navigation support\n   */\n  @Listen('keydown')\n  handleKeyDown(ev: KeyboardEvent) {\n    const target = ev.target as HTMLElement;\n    if (!target.classList.contains('tab-button')) return;\n\n    let newIndex = this.activeIndex;\n\n    switch (ev.key) {\n      case 'ArrowRight':\n      case 'ArrowDown':\n        ev.preventDefault();\n        newIndex = this.getNextEnabledTabIndex(this.activeIndex);\n        break;\n      case 'ArrowLeft':\n      case 'ArrowUp':\n        ev.preventDefault();\n        newIndex = this.getPreviousEnabledTabIndex(this.activeIndex);\n        break;\n      case 'Home':\n        ev.preventDefault();\n        newIndex = this.getFirstEnabledTabIndex();\n        break;\n      case 'End':\n        ev.preventDefault();\n        newIndex = this.getLastEnabledTabIndex();\n        break;\n      default:\n        return;\n    }\n\n    if (newIndex !== this.activeIndex) {\n      this.value = this.tabs[newIndex].value;\n      this.focusTabAtIndex(newIndex);\n    }\n  }\n\n  private getNextEnabledTabIndex(currentIndex: number): number {\n    for (let i = currentIndex + 1; i < this.tabs.length; i++) {\n      if (!this.tabs[i].disabled) return i;\n    }\n    return currentIndex;\n  }\n\n  private getPreviousEnabledTabIndex(currentIndex: number): number {\n    for (let i = currentIndex - 1; i >= 0; i--) {\n      if (!this.tabs[i].disabled) return i;\n    }\n    return currentIndex;\n  }\n\n  private getFirstEnabledTabIndex(): number {\n    const index = this.tabs.findIndex(t => !t.disabled);\n    return index >= 0 ? index : 0;\n  }\n\n  private getLastEnabledTabIndex(): number {\n    for (let i = this.tabs.length - 1; i >= 0; i--) {\n      if (!this.tabs[i].disabled) return i;\n    }\n    return this.tabs.length - 1;\n  }\n\n  private focusTabAtIndex(index: number) {\n    const buttons = this.el.shadowRoot?.querySelectorAll('.tab-button');\n    if (buttons && buttons[index]) {\n      (buttons[index] as HTMLElement).focus();\n    }\n  }\n\n  /**\n   * Public method to programmatically set active tab\n   */\n  @Method()\n  async setActiveTab(value: string): Promise<void> {\n    const tab = this.tabs.find(t => t.value === value);\n    if (tab && !tab.disabled) {\n      this.value = value;\n    }\n  }\n\n  /**\n   * Public method to get active tab value\n   */\n  @Method()\n  async getActiveTab(): Promise<string> {\n    return this.value;\n  }\n\n  /**\n   * Tailwind class configuration\n   */\n  private containerClass = tv({\n    base: 'tabs-container flex flex-col w-full',\n    variants: {\n      shadow: {\n        true: 'shadow-md rounded-lg',\n        false: '',\n      },\n    },\n  });\n\n  private tabsListClass = tv({\n    base: 'tabs-list relative flex border-b border-color-default',\n    variants: {\n      variant: {\n        line: 'bg-transparent',\n        enclosed: 'bg-color-background-subtle border border-color-default rounded-t-lg',\n      },\n    },\n  });\n\n  private inkbarClass = tv({\n    base: 'inkbar absolute bottom-0 left-0 h-0.5 bg-color-primary pointer-events-none',\n    variants: {\n      variant: {\n        line: 'transition-transform duration-200 ease-smooth',\n        enclosed: 'hidden',\n      },\n    },\n  });\n\n  render() {\n    this.updateCSSVariables();\n    this.propagatePropsToTabs();\n\n    return (\n      <Host>\n        <div class={this.containerClass({ shadow: this.shadow })}>\n          {/* Tab buttons list */}\n          <div class={this.tabsListClass({ variant: this.variant })} role=\"tablist\">\n            {this.tabs.map((tab, index) => (\n              <button\n                key={tab.value}\n                class={`tab-button flex-1 px-4 py-2 text-center font-medium transition-colors border-none ${\n                  tab.value === this.value\n                    ? 'text-color-primary'\n                    : tab.disabled\n                    ? 'text-color-disabled cursor-not-allowed opacity-50'\n                    : 'text-color-placeholder hover:text-color-primary cursor-pointer'\n                } ${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`}\n                role=\"tab\"\n                aria-selected={(tab.value === this.value).toString()}\n                aria-controls={`panel-${tab.value}`}\n                id={`tab-${tab.value}`}\n                disabled={tab.disabled}\n                onClick={() => !tab.disabled && (this.value = tab.value)}\n                tabindex={index === this.activeIndex ? 0 : -1}\n              >\n                {tab.label}\n              </button>\n            ))}\n\n            {/* Inkbar - CSS-animated */}\n            {this.variant === 'line' && (\n              <div\n                class={this.inkbarClass({ variant: this.variant })}\n                style={{\n                  transform: `translateX(calc(${this.activeIndex} * 100% / ${this.tabs.length}))`,\n                  width: `calc(100% / ${this.tabs.length})`,\n                }}\n              />\n            )}\n          </div>\n\n          {/* Tab panels */}\n          <div class=\"tabs-content\">\n            <slot />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":["tv","h","Host","index"],"mappings":"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"}