bromcom-ui-next 0.1.4 → 0.1.6

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

@@ -0,0 +1,188 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9a2c5938.js');
+const generateId = require('./generate-id-f6982042.js');
+const index$1 = require('./index-310db2a6.js');
+
+const switchCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.absolute{position:absolute}.relative{position:relative}.left-0\\.5{left:.125rem}.left-\\[18px\\]{left:18px}.left-\\[20px\\]{left:20px}.left-\\[22px\\]{left:22px}.order-2{order:2}.flex{display:flex}.hidden{display:none}.size-3{height:.75rem;width:.75rem}.size-3\\.5{height:.875rem;width:.875rem}.size-4{width:1rem}.h-4,.size-4{height:1rem}.h-5{height:1.25rem}.h-\\[18px\\]{height:18px}.w-10{width:2.5rem}.w-8{width:2rem}.w-9{width:2.25rem}.cursor-default{cursor:default}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-0\\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--switch-bg\\]{background-color:var(--switch-bg)}.bg-\\[--switch-dot-bg\\]{background-color:var(--switch-dot-bg)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-normal{font-weight:400}.\\!text-color{color:var(--bcm-ui-color-text-default)!important}.\\!text-color-error{color:var(--bcm-ui-color-text-error)!important}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:var(--bcm-ui-box-shadow-sm);--tw-shadow-colored:var(--bcm-ui-box-shadow-sm)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.group:hover .group-hover\\:bg-\\[--switch-bg-hover\\],.hover\\:bg-\\[--switch-bg-hover\\]:hover{background-color:var(--switch-bg-hover)}.peer:focus-visible~.peer-focus-visible\\:ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.peer:focus-visible~.peer-focus-visible\\:ring-blue-300{--tw-ring-color:oklch(0.809 0.105 251.813)}.peer:focus-visible~.peer-focus-visible\\:ring-offset-2{--tw-ring-offset-width:2px}.peer:disabled~.peer-disabled\\:cursor-not-allowed{cursor:not-allowed}.peer:disabled~.peer-disabled\\:\\!text-color-disabled{color:var(--bcm-ui-color-text-disabled)!important}";
+const BcmSwitchStyle0 = switchCss;
+
+const BcmSwitch = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmSwitchChange = index.createEvent(this, "bcmSwitchChange", 1);
+        /** Whether the switch is checked or not */
+        this.checked = false;
+        /** Whether the switch is disabled */
+        this.disabled = false;
+        /** Position of the label relative to the switch */
+        this.labelPosition = 'right';
+        /** Whether to display the switch in an error state */
+        this.error = false;
+        /** Size variant of the switch */
+        this.size = 'medium';
+        /** Whether the switch is in readonly mode */
+        this.readonly = false;
+        /** Whether the switch is required in a form */
+        this.required = false;
+        this.switchId = generateId.generateId('switch');
+        this.switchStyle = () => {
+            const defaultStyle = {
+                '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
+                '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',
+                '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',
+            };
+            const checkedStyle = {
+                '--switch-bg': 'var(--bcm-ui-color-background-info-default)',
+                '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',
+            };
+            const errorStyle = {
+                '--switch-bg': 'var(--bcm-ui-color-background-error-default)',
+                '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',
+            };
+            const readonlyStyle = {
+                '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',
+                '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',
+                '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',
+            };
+            const disabledStyle = {
+                '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',
+                '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',
+                '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',
+            };
+            return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, defaultStyle), (this.checked && checkedStyle)), (this.error && errorStyle)), (this.readonly && readonlyStyle)), (this.disabled && disabledStyle));
+        };
+        this.switchClass = index$1.ce({
+            slots: {
+                base: 'bcm-ui-element flex flex-col',
+                switchWrapper: 'flex items-center group',
+                dotContainer: 'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',
+                dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',
+                caption: '!text-color-error font-normal',
+                label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',
+            },
+            variants: {
+                size: {
+                    small: {
+                        dotContainer: 'w-8 h-4',
+                        dot: 'size-3',
+                        label: 'text-size-4',
+                        caption: 'text-size-3',
+                        switchWrapper: 'gap-2',
+                        base: 'gap-0.5',
+                    },
+                    medium: {
+                        dotContainer: 'w-9 h-[18px]',
+                        dot: 'size-3.5',
+                        label: 'text-size-5',
+                        caption: 'text-size-4',
+                        switchWrapper: 'gap-2.5',
+                        base: 'gap-1',
+                    },
+                    large: {
+                        dotContainer: 'w-10 h-5',
+                        dot: 'size-4',
+                        label: 'text-size-6',
+                        caption: 'text-size-5',
+                        switchWrapper: 'gap-3',
+                        base: 'gap-2',
+                    },
+                },
+                labelPosition: {
+                    left: {
+                        label: '',
+                    },
+                    right: {
+                        label: 'order-2',
+                    },
+                },
+                checked: {
+                    true: {
+                        dot: '',
+                    },
+                    false: {
+                        dot: 'left-0.5',
+                    },
+                },
+                disabled: {
+                    true: '',
+                    false: {
+                        switchWrapper: '',
+                    },
+                },
+                readonly: {
+                    true: {
+                        switchWrapper: 'cursor-default',
+                        dotContainer: 'cursor-default',
+                        dot: 'cursor-default',
+                    },
+                    false: {
+                        switchWrapper: 'cursor-pointer',
+                        dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',
+                    },
+                },
+            },
+            compoundVariants: [
+                {
+                    size: 'small',
+                    checked: true,
+                    class: {
+                        dot: 'left-[18px]',
+                    },
+                },
+                {
+                    size: 'medium',
+                    checked: true,
+                    class: {
+                        dot: 'left-[20px]',
+                    },
+                },
+                {
+                    size: 'large',
+                    checked: true,
+                    class: {
+                        dot: 'left-[22px]',
+                    },
+                },
+                {
+                    readonly: false,
+                    disabled: false,
+                    class: {
+                        dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',
+                    },
+                },
+            ],
+        });
+    }
+    toggleSwitch() {
+        if (this.disabled || this.readonly)
+            return;
+        this.checked = !this.checked;
+        this.bcmSwitchChange.emit(this.checked);
+    }
+    render() {
+        const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({
+            size: this.size,
+            checked: this.checked,
+            disabled: this.disabled,
+            labelPosition: this.labelPosition,
+            readonly: this.readonly,
+        });
+        const ariaAttributes = Object.assign({ 'role': 'switch', 'aria-checked': this.checked.toString(), 'aria-disabled': this.disabled.toString(), 'aria-readonly': this.readonly.toString() }, (this.required && { 'aria-required': 'true' }));
+        const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};
+        return (index.h("div", { key: '6fe3f5b93d46367c73bac4711f5eb5ee93be0fb1', class: base() }, index.h("label", { key: 'ec4101b02f81f6e43e6f4279c893d08b710eb892', class: switchWrapper(), style: this.switchStyle() }, index.h("input", { key: '0ac5fbd5415b4f7c988fed8746c7cd4709de6931', id: this.switchId, type: "checkbox", class: "hidden peer", checked: this.checked, name: this.name, value: this.value, disabled: this.disabled, readOnly: this.readonly, required: this.required, onChange: () => this.toggleSwitch() }), this.label && index.h("span", { key: '1712d6a86427e0667f7ff393a570f1d5d1386494', class: label() }, index.h("slot", { key: 'a81c09316f27b86ace52436f26872c0626b642af' }, this.label)), index.h("label", Object.assign({ key: 'bd77f8a8a7528aa0aee70730db772f789c90d910', htmlFor: this.switchId, class: dotContainer() }, tabIndexAttr, ariaAttributes, { onKeyDown: event => {
+                if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {
+                    event.preventDefault();
+                    this.toggleSwitch();
+                }
+            } }), index.h("div", { key: '91a5d3ca25f67953b6beb8456976bbc7ad2876da', class: dot() }))), this.error && this.caption && index.h("span", { key: '2a01e0e40041aa00938e714c22e6a8d241bac222', class: caption() }, this.caption), index.h("slot", { key: '4417057a08368eee0f06ca4fe86a620ea46f31ee', name: "caption" })));
+    }
+    get el() { return index.getElement(this); }
+};
+BcmSwitch.style = BcmSwitchStyle0;
+
+exports.bcm_switch = BcmSwitch;
+
+//# sourceMappingURL=bcm-switch.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"bcm-switch.entry.cjs.js","mappings":"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","names":["generateId","tv","h"],"sources":["src/components/switch/switch.css?tag=bcm-switch&encapsulation=shadow","src/components/switch/switch.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n}\n","import { Component, Prop, h, Event, EventEmitter, Element, ComponentInterface } from '@stencil/core';\nimport { generateId } from '../../utils/id/generate-id';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @component BcmSwitch\n * @description A customizable toggle switch component that provides an intuitive way to enable or disable options.\n * Supports different sizes, label positions, error states, and accessibility features.\n *\n * @example Basic usage\n * <bcm-switch label=\"Enable notifications\"></bcm-switch>\n *\n * @example With error state\n * <bcm-switch\n *   label=\"Accept terms\"\n *   error={true}\n *   caption=\"You must accept the terms to continue\">\n * </bcm-switch>\n *\n * @example Disabled state\n * <bcm-switch\n *   label=\"Advanced features\"\n *   disabled={true}>\n * </bcm-switch>\n *\n * @example With custom size and label position\n * <bcm-switch\n *   label=\"Dark mode\"\n *   size=\"large\"\n *   labelPosition=\"left\">\n * </bcm-switch>\n */\n@Component({\n    tag: 'bcm-switch',\n    styleUrl: 'switch.css',\n    shadow: true,\n})\nexport class BcmSwitch implements ComponentInterface {\n    /** Reference to the host element */\n    @Element()\n    el: HTMLElement;\n\n    /** Whether the switch is checked or not */\n    @Prop({ reflect: true, mutable: true })\n    checked: boolean = false;\n\n    /** Whether the switch is disabled */\n    @Prop()\n    disabled: boolean = false;\n\n    /** The name attribute for the hidden input element */\n    @Prop()\n    name: string;\n\n    /** The value attribute for the hidden input element */\n    @Prop()\n    value: string;\n\n    /** Text label for the switch */\n    @Prop()\n    label: string;\n\n    /** Position of the label relative to the switch */\n    @Prop()\n    labelPosition: 'left' | 'right' = 'right';\n\n    /** Whether to display the switch in an error state */\n    @Prop()\n    error: boolean = false;\n\n    /** Text to display as an error message when error is true */\n    @Prop()\n    caption?: string;\n\n    /** Size variant of the switch */\n    @Prop()\n    size: 'small' | 'medium' | 'large' = 'medium';\n\n    /** Whether the switch is in readonly mode */\n    @Prop()\n    readonly: boolean = false;\n\n    /** Whether the switch is required in a form */\n    @Prop()\n    required: boolean = false;\n\n    /** Emitted when the switch state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    })\n    bcmSwitchChange: EventEmitter<boolean>;\n\n    private switchId = generateId('switch');\n\n    private toggleSwitch(): void {\n        if (this.disabled || this.readonly) return;\n        this.checked = !this.checked;\n        this.bcmSwitchChange.emit(this.checked);\n    }\n\n    private switchStyle = () => {\n        const defaultStyle = {\n            '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n            '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-hover)',\n            '--switch-dot-bg': 'var(--bcm-ui-color-background-base-default)',\n        };\n\n        const checkedStyle = {\n            '--switch-bg': 'var(--bcm-ui-color-background-info-default)',\n            '--switch-bg-hover': 'var(--bcm-ui-color-background-info-hover)',\n        };\n\n        const errorStyle = {\n            '--switch-bg': 'var(--bcm-ui-color-background-error-default)',\n            '--switch-bg-hover': 'var(--bcm-ui-color-background-error-hover)',\n        };\n\n        const readonlyStyle = {\n            '--switch-bg': 'var(--bcm-ui-color-background-default-dark-default)',\n            '--switch-bg-hover': 'var(--bcm-ui-color-background-default-dark-default)',\n            '--switch-dot-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        };\n\n        const disabledStyle = {\n            '--switch-bg': 'var(--bcm-ui-color-background-disabled-default)',\n            '--switch-bg-hover': 'var(--bcm-ui-color-background-disabled-default)',\n            '--switch-dot-bg': 'var(--bcm-ui-color-background-default-default)',\n        };\n\n        return {\n            ...defaultStyle,\n            ...(this.checked && checkedStyle),\n            ...(this.error && errorStyle),\n            ...(this.readonly && readonlyStyle),\n            ...(this.disabled && disabledStyle),\n        };\n    };\n\n    private switchClass = tv({\n        slots: {\n            base: 'bcm-ui-element flex flex-col',\n            switchWrapper: 'flex items-center group',\n            dotContainer:\n                'relative flex items-center rounded-full cursor-pointer bg-[--switch-bg] group-hover:bg-[--switch-bg-hover] peer-disabled:cursor-not-allowed transition-colors duration-300',\n            dot: 'absolute bg-[--switch-dot-bg] rounded-full shadow-sm transition-all duration-300 ease-in-out peer-disabled:cursor-not-allowed',\n            caption: '!text-color-error font-normal',\n            label: '!text-color font-medium peer-disabled:!text-color-disabled peer-disabled:cursor-not-allowed',\n        },\n        variants: {\n            size: {\n                small: {\n                    dotContainer: 'w-8 h-4',\n                    dot: 'size-3',\n                    label: 'text-size-4',\n                    caption: 'text-size-3',\n                    switchWrapper: 'gap-2',\n                    base: 'gap-0.5',\n                },\n                medium: {\n                    dotContainer: 'w-9 h-[18px]',\n                    dot: 'size-3.5',\n                    label: 'text-size-5',\n                    caption: 'text-size-4',\n                    switchWrapper: 'gap-2.5',\n                    base: 'gap-1',\n                },\n                large: {\n                    dotContainer: 'w-10 h-5',\n                    dot: 'size-4',\n                    label: 'text-size-6',\n                    caption: 'text-size-5',\n                    switchWrapper: 'gap-3',\n                    base: 'gap-2',\n                },\n            },\n            labelPosition: {\n                left: {\n                    label: '',\n                },\n                right: {\n                    label: 'order-2',\n                },\n            },\n            checked: {\n                true: {\n                    dot: '',\n                },\n                false: {\n                    dot: 'left-0.5',\n                },\n            },\n            disabled: {\n                true: '',\n                false: {\n                    switchWrapper: '',\n                },\n            },\n            readonly: {\n                true: {\n                    switchWrapper: 'cursor-default',\n                    dotContainer: 'cursor-default',\n                    dot: 'cursor-default',\n                },\n                false: {\n                    switchWrapper: 'cursor-pointer',\n                    dotContainer: 'cursor-pointer hover:bg-[--switch-bg-hover]',\n                },\n            },\n        },\n        compoundVariants: [\n            {\n                size: 'small',\n                checked: true,\n                class: {\n                    dot: 'left-[18px]',\n                },\n            },\n            {\n                size: 'medium',\n                checked: true,\n                class: {\n                    dot: 'left-[20px]',\n                },\n            },\n            {\n                size: 'large',\n                checked: true,\n                class: {\n                    dot: 'left-[22px]',\n                },\n            },\n            {\n                readonly: false,\n                disabled: false,\n                class: {\n                    dotContainer: 'peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-blue-300',\n                },\n            },\n        ],\n    });\n\n    render() {\n        const { base, switchWrapper, label, dot, dotContainer, caption } = this.switchClass({\n            size: this.size,\n            checked: this.checked,\n            disabled: this.disabled,\n            labelPosition: this.labelPosition,\n            readonly: this.readonly,\n        });\n\n        const ariaAttributes = {\n            'role': 'switch',\n            'aria-checked': this.checked.toString(),\n            'aria-disabled': this.disabled.toString(),\n            'aria-readonly': this.readonly.toString(),\n            ...(this.required && { 'aria-required': 'true' }),\n        };\n\n        const tabIndexAttr = !this.readonly && !this.disabled ? { tabindex: '0' } : {};\n\n        return (\n            <div class={base()}>\n                <label class={switchWrapper()} style={this.switchStyle()}>\n                    <input\n                        id={this.switchId}\n                        type=\"checkbox\"\n                        class=\"hidden peer\"\n                        checked={this.checked}\n                        name={this.name}\n                        value={this.value}\n                        disabled={this.disabled}\n                        readOnly={this.readonly}\n                        required={this.required}\n                        onChange={() => this.toggleSwitch()}\n                    />\n\n                    {this.label && <span class={label()}><slot>{this.label}</slot></span>}\n                    <label\n                        htmlFor={this.switchId}\n                        class={dotContainer()}\n                        {...tabIndexAttr}\n                        {...ariaAttributes}\n                        onKeyDown={event => {\n                            if ((event.key === 'Enter' || event.key === ' ') && !this.readonly && !this.disabled) {\n                                event.preventDefault();\n                                this.toggleSwitch();\n                            }\n                        }}\n                    >\n                        <div class={dot()}></div>\n                    </label>\n                </label>\n\n                {this.error && this.caption && <span class={caption()}>{this.caption}</span>}\n                <slot name=\"caption\"></slot>\n            </div>\n        );\n    }\n}\n"],"version":3}

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9a2c5938.js');
+
+const tabsContentCss = ".block{display:block}:host{display:block;padding:10px 0;width:100%}.static{position:static}.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 BcmTabsContentStyle0 = tabsContentCss;
+
+const BcmTabsContent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    render() {
+        return (index.h(index.Host, { key: '17ae2ab7a05db721e305764436befb99dd5571ff', role: "tabpanel" }, index.h("slot", { key: '184a356d95d59b0f7795a065fd6ce5e8ba222a25' })));
+    }
+};
+BcmTabsContent.style = BcmTabsContentStyle0;
+
+exports.bcm_tabs_content = BcmTabsContent;
+
+//# sourceMappingURL=bcm-tabs-content.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"bcm-tabs-content.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,0SAA0S,CAAC;AAClU,6BAAe,cAAc;;MCUhB,cAAc;;;;IAOvB,MAAM;QACF,QACIA,QAACC,UAAI,qDAAC,IAAI,EAAC,UAAU,IACjBD,oEAAa,CACV,EACT;KACL;;;;;;","names":["h","Host"],"sources":["src/components/tabs/tabs-content.css?tag=bcm-tabs-content&encapsulation=shadow","src/components/tabs/tabs-content.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  padding: 10px 0;\n  width: 100%;\n}\n","import { Component, Prop, h, Host, ComponentInterface } from '@stencil/core';\n\n/**\n * @description Tab content panel component that displays when its corresponding tab is selected\n * @slot - Default slot for the tab panel content\n */\n@Component({\n    tag: 'bcm-tabs-content',\n    styleUrl: 'tabs-content.css',\n    shadow: true,\n})\nexport class BcmTabsContent implements ComponentInterface {\n    /**\n     * Unique identifier that matches a tab trigger's value\n     * Used to associate this content with its corresponding tab\n     */\n    @Prop({ reflect: true }) value: string;\n\n    render() {\n        return (\n            <Host role=\"tabpanel\">\n                <slot></slot>\n            </Host>\n        );\n    }\n}"],"version":3}

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9a2c5938.js');
+const index$1 = require('./index-310db2a6.js');
+
+const tabsListCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.static{position:static}.absolute{position:absolute}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.z-10{z-index:10}.flex{display:flex}.h-0\\.5{height:.125rem}.w-full{width:100%}.flex-row{flex-direction:row}.items-center{align-items:center}.bg-\\[--bcm-ui-color-text-primary\\]{background-color:var(--bcm-ui-color-text-primary)}.opacity-0{opacity:0}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}";
+const BcmTabsListStyle0 = tabsListCss;
+
+const BcmTabsList = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Tailwind variants configuration for styling the tabs list container and inkbar
+         */
+        this.class = index$1.ce({
+            slots: {
+                /**
+                 * Main container that holds both the tablist and inkbar
+                 */
+                container: 'flex flex-row items-center w-full relative',
+                /**
+                 * The sliding indicator that appears under the active tab
+                 */
+                inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',
+                /**
+                 * The container for tab trigger elements
+                 */
+                tabList: 'tabs-list flex flex-row items-center w-full relative',
+            },
+        });
+    }
+    render() {
+        const { container, inkbar, tabList } = this.class();
+        return (index.h("div", { key: '46066c8510c684347428f5a03f094fa857e40f57', class: container(), slot: "tabs-list" }, index.h("div", { key: 'c038e78bb7da88ece01600ff656ff820d2d8a4eb', class: inkbar() }), index.h("div", { key: '4db7e8f301c7a0e863492fcd784fbcb6b5799709', class: tabList(), role: "tablist" }, index.h("slot", { key: 'ed29b088e1c19a455046804fcc5a090435351299' }))));
+    }
+};
+BcmTabsList.style = BcmTabsListStyle0;
+
+exports.bcm_tabs_list = BcmTabsList;
+
+//# sourceMappingURL=bcm-tabs-list.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"bcm-tabs-list.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,ipCAAipC,CAAC;AACtqC,0BAAe,WAAW;;MCWb,WAAW;IALxB;;;;;QASY,UAAK,GAAGA,UAAE,CAAC;YACf,KAAK,EAAE;;;;gBAIH,SAAS,EAAE,4CAA4C;;;;gBAKvD,MAAM,EAAE,uIAAuI;;;;gBAK/I,OAAO,EAAE,sDAAsD;aAClE;SACJ,CAAC,CAAC;KAaN;IAXG,MAAM;QACF,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC;QACpD,QACIC,kEAAK,KAAK,EAAE,SAAS,EAAE,EAAE,IAAI,EAAC,WAAW,IACrCA,kEAAK,KAAK,EAAE,MAAM,EAAE,GAAQ,EAC5BA,kEAAK,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,IACjCA,oEAAa,CACX,CACJ,EACR;KACL;;;;;;","names":["tv","h"],"sources":["src/components/tabs/tabs-list.css?tag=bcm-tabs-list&encapsulation=shadow","src/components/tabs/tabs-list.component.tsx"],"sourcesContent":["/* tabs-list.css */\n:host {\n  display: block;\n  position: relative;\n  width: 100%;\n}\n","import { Component, h, ComponentInterface } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n/**\n * @description Container component for tab triggers that includes the sliding indicator (inkbar)\n * @slot - Default slot for tab trigger elements\n */\n@Component({\n    tag: 'bcm-tabs-list',\n    styleUrl: 'tabs-list.css',\n    shadow: true,\n})\nexport class BcmTabsList implements ComponentInterface {\n    /**\n     * Tailwind variants configuration for styling the tabs list container and inkbar\n     */\n    private class = tv({\n        slots: {\n            /**\n             * Main container that holds both the tablist and inkbar\n             */\n            container: 'flex flex-row items-center w-full relative',\n\n            /**\n             * The sliding indicator that appears under the active tab\n             */\n            inkbar: 'inkbar absolute bottom-0 left-0 right-0 h-0.5 bg-[--bcm-ui-color-text-primary] transition-all duration-200 ease-in-out z-10 opacity-0',\n\n            /**\n             * The container for tab trigger elements\n             */\n            tabList: 'tabs-list flex flex-row items-center w-full relative',\n        },\n    });\n\n    render() {\n        const { container, inkbar, tabList } = this.class();\n        return (\n            <div class={container()} slot=\"tabs-list\">\n                <div class={inkbar()}></div>\n                <div class={tabList()} role=\"tablist\">\n                    <slot></slot>\n                </div>\n            </div>\n        );\n    }\n}"],"version":3}

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

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9a2c5938.js');
+const index$1 = require('./index-310db2a6.js');
+
+const tabsTriggerCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.flex{display:flex}.h-\\[2px\\]{height:2px}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.border-none{border-style:none}.bg-\\[--bcm-ui-color-text-default\\]{background-color:var(--bcm-ui-color-text-default)}.bg-\\[--bcm-ui-color-text-disabled\\]{background-color:var(--bcm-ui-color-text-disabled)}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-center{text-align:center}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-color{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.hover\\:text-color-primary:hover{color:var(--bcm-ui-color-text-primary)}";
+const BcmTabsTriggerStyle0 = tabsTriggerCss;
+
+const BcmTabsTrigger = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmTabSelected = index.createEvent(this, "bcmTabSelected", 1);
+        /**
+         * 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 = index$1.ce({
+            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 (index.h(index.Host, { key: 'd55ce1eaa9290ffe2d47f6a0fa747cf9dd9f1b7c', role: "tab", "aria-selected": this.active.toString(), "aria-disabled": this.disabled }, index.h("button", { key: 'd9dcc8685a2007e0c8f234913e461de90916a32d', class: tab(), disabled: this.disabled, part: "tab", onClick: () => this.handleClick() }, index.h("slot", { key: '4ef0ed0302f2fedd966e461a77fd3f79bcb3c6c0' })), index.h("div", { key: 'a0afbb81a99afe7eeab0917a824e67078c4c0636', class: borderLine() })));
+    }
+    get el() { return index.getElement(this); }
+};
+BcmTabsTrigger.style = BcmTabsTriggerStyle0;
+
+exports.bcm_tabs_trigger = BcmTabsTrigger;
+
+//# sourceMappingURL=bcm-tabs-trigger.cjs.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"bcm-tabs-trigger.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,w8DAAw8D,CAAC;AACh+D,6BAAe,cAAc;;MCWhB,cAAc;IAL3B;;;;;;QAqBI,WAAM,GAAY,KAAK,CAAC;;;;QAMxB,SAAI,GAAiC,QAAQ,CAAC;;;;QAM9C,aAAQ,GAAY,KAAK,CAAC;;;;QAyBlB,UAAK,GAAGA,UAAE,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;;;;;IAjEW,WAAW;QACf,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;KACxC;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,QACIC,QAACC,UAAI,qDAAC,IAAI,EAAC,KAAK,mBAAgB,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,mBAAiB,IAAI,CAAC,QAAQ,IAChFD,qEAAQ,KAAK,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAC,KAAK,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IACvFA,oEAAQ,CACH,EACTA,kEAAK,KAAK,EAAE,UAAU,EAAE,GAAQ,CAC7B,EACT;KACL;;;;;;;","names":["tv","h","Host"],"sources":["src/components/tabs/tabs-trigger.css?tag=bcm-tabs-trigger&encapsulation=shadow","src/components/tabs/tabs-trigger.component.tsx"],"sourcesContent":[":host {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n","import { Component, Prop, h, Host, Element, Event, EventEmitter, ComponentInterface } from '@stencil/core';\nimport { tv } from '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}"],"version":3}

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

@@ -0,0 +1,211 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-9a2c5938.js');
+const index$1 = require('./index-310db2a6.js');
+
+const bcmTabsCss = ".relative{position:relative}.block{display:block}:host{display:block;position:relative;width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.contents{display:contents}.w-full{width:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.flex-col{flex-direction:column}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const BcmTabsStyle0 = bcmTabsCss;
+
+const BcmTabs = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmTabChange = index.createEvent(this, "bcmTabChange", 1);
+        /**
+         * Tab size
+         */
+        this.size = 'medium';
+        this.triggers = [];
+        this.contents = [];
+        /**
+         * Tab container class
+         */
+        this.tabClass = index$1.ce({
+            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 (index.h(index.Host, { key: 'b5c18df30963fa3e2efcfb84a3b0d93cd2b4a940' }, index.h("div", { key: 'b62f25ebe6ba5e7c9bb04a725d047a64f1cb22bf', class: this.tabClass() }, index.h("slot", { key: 'c09c33175f8004c5a9d8a77fe234bdfbe4244214', name: "tabs-list" }), index.h("slot", { key: '9ae9022486322bdf34d0e2c7838760a50bc6e90e' }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "size": ["handleSizeChange"]
+    }; }
+};
+BcmTabs.style = BcmTabsStyle0;
+
+exports.bcm_tabs = BcmTabs;
+
+//# sourceMappingURL=bcm-tabs.cjs.entry.js.map