bromcom-ui-next 0.1.4 → 0.1.6

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

@@ -0,0 +1,195 @@
+import { h, Host } from "@stencil/core";
+import { tv } from "tailwind-variants";
+/**
+ * @description Tab trigger component that functions as a clickable tab button
+ * @slot - Default slot for tab label content
+ */
+export class BcmTabsTrigger {
+    constructor() {
+        /**
+         * Whether the tab is currently active
+         */
+        this.active = false;
+        /**
+         * Size of the tab
+         */
+        this.size = 'medium';
+        /**
+         * Whether the tab is disabled
+         */
+        this.disabled = false;
+        /**
+         * 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] bg-color-primary transition-all duration-200 ease-in-out',
+            },
+            variants: {
+                size: {
+                    small: { tab: 'text-size-4 gap-2' },
+                    medium: { tab: 'text-size-5 gap-2.5' },
+                    large: { tab: 'text-size-6 gap-3' },
+                },
+                active: {
+                    true: {
+                        tab: 'text-color-primary',
+                    },
+                    false: {
+                        tab: 'text-color',
+                    },
+                },
+                disabled: {
+                    true: {
+                        tab: 'cursor-not-allowed text-color-disabled',
+                        borderLine: 'bg-[--bcm-ui-color-text-disabled]',
+                    },
+                    false: {
+                        tab: 'cursor-pointer text-color hover:text-color-primary',
+                        borderLine: 'bg-[--bcm-ui-color-text-default]',
+                    },
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                active: false,
+                disabled: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    /**
+     * Handles click events on the tab
+     * Emits bcmTabSelected event with tab value if not disabled
+     */
+    handleClick() {
+        if (this.disabled)
+            return;
+        this.bcmTabSelected.emit(this.value);
+    }
+    render() {
+        const { tab, borderLine } = this.class({
+            size: this.size,
+            active: this.active,
+            disabled: this.disabled,
+        });
+        return (h(Host, { key: 'd55ce1eaa9290ffe2d47f6a0fa747cf9dd9f1b7c', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, h("button", { key: 'd9dcc8685a2007e0c8f234913e461de90916a32d', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, h("slot", { key: '4ef0ed0302f2fedd966e461a77fd3f79bcb3c6c0' })), h("div", { key: 'a0afbb81a99afe7eeab0917a824e67078c4c0636', class: borderLine() })));
+    }
+    static get is() { return "bcm-tabs-trigger"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["tabs-trigger.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["tabs-trigger.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Unique identifier value for the tab"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab is currently active"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "active",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of the tab"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmTabSelected",
+                "name": "bcmTabSelected",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when this tab is selected"
+                },
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=tabs-trigger.component.js.map

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

@@ -0,0 +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,mBAAmB,CAAC;AAEvC;;;GAGG;AAMH,MAAM,OAAO,cAAc;IAL3B;QAiBI;;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,CACd;YACI,KAAK,EAAE;gBACH,GAAG,EAAE,gKAAgK;gBACrK,UAAU,EAAE,iGAAiG;aAChH;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;oBACnC,MAAM,EAAE,EAAE,GAAG,EAAE,qBAAqB,EAAE;oBACtC,KAAK,EAAE,EAAE,GAAG,EAAE,mBAAmB,EAAE;iBACtC;gBACD,MAAM,EAAE;oBACJ,IAAI,EAAE;wBACF,GAAG,EAAE,oBAAoB;qBAC5B;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,YAAY;qBACpB;iBACJ;gBACD,QAAQ,EAAE;oBACN,IAAI,EAAE;wBACF,GAAG,EAAE,wCAAwC;wBAC7C,UAAU,EAAE,mCAAmC;qBAClD;oBACD,KAAK,EAAE;wBACH,GAAG,EAAE,oDAAoD;wBACzD,UAAU,EAAE,kCAAkC;qBACjD;iBACJ;aACJ;YACD,eAAe,EAAE;gBACb,IAAI,EAAE,QAAQ;gBACd,MAAM,EAAE,KAAK;gBACb,QAAQ,EAAE,KAAK;aAClB;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KAiBL;IArEG;;;OAGG;IACK,WAAW;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACzC,CAAC;IA+CD,MAAM;QACF,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;YACnC,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ;SAC1B,CAAC,CAAC;QACH,OAAO,CACH,EAAC,IAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ;YAChF,+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;gBACvF,8DAAQ,CACH;YACT,4DAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC7B,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\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] bg-color-primary 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',\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}"]}

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

@@ -0,0 +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{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)}

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

@@ -0,0 +1,422 @@
+import { h, Host } from "@stencil/core";
+import { tv } from "tailwind-variants";
+/**
+ * @description Tab interface component
+ * @slot - Default slot for content area
+ * @slot tabs-list - Special slot for tab list
+ */
+export class BcmTabs {
+    constructor() {
+        /**
+         * Tab size
+         */
+        this.size = 'medium';
+        this.triggers = [];
+        this.contents = [];
+        /**
+         * Tab container class
+         */
+        this.tabClass = tv({
+            base: 'tabs-container bcm-ui-element flex flex-col w-full',
+        });
+    }
+    componentWillLoad() {
+        this.activeTab = this.defaultValue;
+    }
+    componentDidLoad() {
+        this.refreshElementReferences();
+        this.updateTriggerProperties();
+        this.setupRelations();
+        this.updateInkbar();
+        this.updateContentVisibility();
+    }
+    /**
+     * Refreshes DOM element references
+     */
+    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}`;
+            }
+        });
+    }
+    updateTriggerProperties() {
+        var _a;
+        if (((_a = this.triggers) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            this.triggers.forEach(trigger => {
+                trigger.size = this.size;
+            });
+        }
+    }
+    handleSizeChange() {
+        this.updateTriggerProperties();
+    }
+    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
+     */
+    async disableAllTabs() {
+        this.triggers.forEach(trigger => {
+            trigger.disabled = true;
+        });
+    }
+    /**
+     * Enables all tabs
+     */
+    async enableAllTabs() {
+        this.triggers.forEach(trigger => {
+            trigger.disabled = false;
+        });
+    }
+    /**
+     * 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();
+            this.bcmTabChange.emit({
+                activeTab: this.activeTab,
+                element: trigger,
+                previousTab: this.previousTab,
+            });
+        }
+    }
+    /**
+     * Updates tab status
+     */
+    updateTabStatus() {
+        this.triggers.forEach(trigger => {
+            const isActive = trigger.value === this.activeTab;
+            trigger.active = isActive;
+        });
+    }
+    handleResize() {
+        this.updateInkbar();
+    }
+    /**
+     * 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,
+            });
+        }
+    }
+    /**
+     * 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());
+        });
+    }
+    /**
+     * Updates inkbar position
+     */
+    updateInkbar() {
+        var _a, _b, _c, _d, _e;
+        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) {
+            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';
+            }
+            else {
+                console.warn('Group or trigger rect calculation failed');
+                inkbar.style.opacity = '0';
+            }
+        }
+        else {
+            if (inkbar)
+                inkbar.style.opacity = '0';
+        }
+    }
+    render() {
+        return (h(Host, { key: 'b5c18df30963fa3e2efcfb84a3b0d93cd2b4a940' }, h("div", { key: 'b62f25ebe6ba5e7c9bb04a725d047a64f1cb22bf', class: this.tabClass() }, h("slot", { key: 'c09c33175f8004c5a9d8a77fe234bdfbe4244214', name: "tabs-list" }), h("slot", { key: '9ae9022486322bdf34d0e2c7838760a50bc6e90e' }))));
+    }
+    static get is() { return "bcm-tabs"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["bcm-tabs.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["bcm-tabs.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "defaultValue": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Default active tab value"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "default-value",
+                "reflect": true
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tab size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'medium'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "activeTab": {},
+            "previousTab": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "bcmTabChange",
+                "name": "bcmTabChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Triggers when tab changes"
+                },
+                "complexType": {
+                    "original": "{\n    activeTab: string;\n    element: HTMLBcmTabsTriggerElement;\n    previousTab?: string;\n  }",
+                    "resolved": "{ activeTab: string; element: HTMLBcmTabsTriggerElement; previousTab?: string; }",
+                    "references": {
+                        "HTMLBcmTabsTriggerElement": {
+                            "location": "global",
+                            "id": "global::HTMLBcmTabsTriggerElement"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "disableTab": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "enableTab": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "disableAllTabs": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Disables all tabs",
+                    "tags": []
+                }
+            },
+            "enableAllTabs": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Enables all tabs",
+                    "tags": []
+                }
+            },
+            "getActiveTab": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Returns the active tab value",
+                    "tags": []
+                }
+            },
+            "setActiveTab": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Sets the active tab",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "size",
+                "methodName": "handleSizeChange"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "handleResize",
+                "target": "window",
+                "capture": false,
+                "passive": true
+            }, {
+                "name": "bcmTabSelected",
+                "method": "handleTabSelected",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=tabs.component.js.map

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

@@ -0,0 +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 'tailwind-variants';\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"]}

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

@@ -83,7 +83,7 @@ export class BcmText {
     render() {
         const Tag = variantTagMap[this.variant];
         const variantClass = this.getTextClass(this.variant, this.size);
-        return (h(Tag, { key: 'a9ba5eeb50ec7e4bce324ae9f3e2ef91b6d68966', class: cs('bcm-text appearance-none m-0 p-0', variantClass), part: "text" }, h("slot", { key: 'd656033433d725099f429978df47d119dba10727' }, this.text)));
+        return (h(Tag, { key: '53890d0b241119b0df415e599538e806bd870517', class: cs('bcm-text appearance-none m-0 p-0', variantClass), part: "text" }, h("slot", { key: '25ccb62cbbe1393379c42bd13b3a98d8806fa2cb' }, this.text)));
     }
     static get is() { return "bcm-text"; }
     static get encapsulation() { return "shadow"; }