bromcom-ui-next 0.1.30 → 0.1.31

package/dist/bromcom-ui/bcm-accordion-group.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-accordion-group.entry.esm.js","sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,u9BAAu9B;;MCoEp+B,iBAAiB,GAAA,MAAA;AAL9B,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAUY,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAGrB,QAAA,IAAc,CAAA,cAAA,GAA8B,EAAE;AAiDvD;;AAEG;AACK,QAAA,IAAgB,CAAA,gBAAA,GAAG,MAAK;AAC5B,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;YAC7E,IAAI,CAAC,gBAAgB,EAAE;;YAEvB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAClC,gBAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;;AAEnE,SAAC;AAuCJ;AAzFG;;;AAGG;AAEH,IAAA,MAAM,SAAS,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACb,YAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;YAC3D;;QAEJ,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;;AAGrE;;AAEG;AAEH,IAAA,MAAM,WAAW,GAAA;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;;AAGvE;;AAEG;AAEH,IAAA,MAAM,gBAAgB,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;;IAG5D,iBAAiB,GAAA;QACb,IAAI,CAAC,gBAAgB,EAAE;;IAInB,gBAAgB,GAAA;AACpB,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,IAAG;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACrB,SAAC,CAAC;;AAeN;;AAEG;AAEH,IAAA,qBAAqB,CAAC,KAA4C,EAAA;QAC9D,IAAI,CAAC,gBAAgB,EAAE;QACvB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,MAAA,GAAA,MAAA,GAAL,KAAK,CAAE,MAAM;AAE1C,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACb,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,IAAG;AAC/B,gBAAA,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE;;AAEnB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK;AACtD,aAAC,CAAC;;AAGN,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;AACvE,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;AACR,YAAA,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;AACtC,SAAA,CAAC;;IAGN,MAAM,GAAA;AACF,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,EAAA,YAAA,EACD,iBAAiB,EAAA,EAE5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAS,CAAA,CAChD;;;;;;;;"}
+{"version":3,"file":"bcm-accordion-group.entry.esm.js","sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,u9BAAu9B;;MCoEp+B,iBAAiB,GAAA,MAAA;;;;;;;IAKlB,KAAK,GAAY,KAAK;;IAGrB,cAAc,GAA8B,EAAE;;AAOpD,IAAA,uBAAuB;AAE1B;;;AAGG;AAEH,IAAA,MAAM,SAAS,GAAA;AACX,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACb,YAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;YAC3D;;QAEJ,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;;AAGrE;;AAEG;AAEH,IAAA,MAAM,WAAW,GAAA;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC;;AAGvE;;AAEG;AAEH,IAAA,MAAM,gBAAgB,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;;IAG5D,iBAAiB,GAAA;QACb,IAAI,CAAC,gBAAgB,EAAE;;IAInB,gBAAgB,GAAA;AACpB,QAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,IAAG;AAC/B,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI;AACrB,SAAC,CAAC;;AAGN;;AAEG;IACK,gBAAgB,GAAG,MAAK;AAC5B,QAAA,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAC7E,IAAI,CAAC,gBAAgB,EAAE;;QAEvB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAClC,YAAA,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC;;AAEnE,KAAC;AAED;;AAEG;AAEH,IAAA,qBAAqB,CAAC,KAA4C,EAAA;QAC9D,IAAI,CAAC,gBAAgB,EAAE;QACvB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,MAAM;AAE1C,QAAA,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;AACb,YAAA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,IAAG;AAC/B,gBAAA,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE;;AAEnB,gBAAA,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK;AACtD,aAAC,CAAC;;AAGN,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC;AACvE,QAAA,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;AACR,YAAA,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;AACtC,SAAA,CAAC;;IAGN,MAAM,GAAA;AACF,QAAA,QACI,CACI,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,EAAA,YAAA,EACD,iBAAiB,EAAA,EAE5B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,IAAI,CAAC,gBAAgB,EAAS,CAAA,CAChD;;;;;;;"}

package/dist/bromcom-ui/bcm-accordion.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-accordion.entry.esm.js","sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n  --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n  --bcm-accordion-text: var(--bcm-ui-color-text-header);\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n  --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n  border: 1px solid var(--bcm-accordion-border);\n  border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n  border-bottom: 1px solid var(--bcm-accordion-border);\n  border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n  border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n  border-top-left-radius: var(--bcm-accordion-radius);\n  border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n}\n::slotted([slot='actions']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n *   <div slot=\"title\">Accordion Title</div>\n *   <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n *   <div slot=\"title\">Title</div>\n *   <div slot=\"actions\">\n *     <button>Action</button>\n *   </div>\n *   <div>Main content</div>\n *   <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n *   const { expanded, source } = event.detail;\n *   console.log('Accordion expanded:', expanded);\n *   console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n  tag: 'bcm-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() host: HTMLElement;\n\n  /**\n   * Controls whether the accordion is expanded or collapsed.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true, mutable: true })\n  expanded: boolean = false;\n\n  /**\n   * Optional title text to display in the header.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  headerTitle?: string;\n\n  /**\n   * Indicates if the accordion is part of a group.\n   * Used for group behavior coordination.\n   * @prop\n   * @defaultValue false\n   */\n\n  @Prop({ reflect: true })\n  group: boolean = false;\n\n  /**\n   * Optional text to display in the footer when no footer slot content is provided.\n   * @prop\n   */\n  @Prop({ attribute: 'hint-text' })\n  hintText?: string;\n\n  /**\n   * Tracks whether footer content is present.\n   * @state\n   */\n  @State()\n  hasFooterContent: boolean = false;\n\n  /**\n   * Emitted when the accordion's expanded state changes.\n   * @event\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmAccordionChange',\n  })\n  bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n  private contentEl?: HTMLElement;\n\n  /**\n   * Toggles the accordion's expanded state.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    this.updateAccordion();\n  }\n\n  /**\n   * Expands the accordion if it's not already expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expanded) {\n      this.expanded = true;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Collapses the accordion if it's currently expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async collapse(): Promise<void> {\n    if (this.expanded) {\n      this.expanded = false;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Updates the accordion's content height and emits change event.\n   * @private\n   */\n  private updateAccordion(): void {\n    if (this.contentEl) {\n      this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n    }\n    this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as unknown as HTMLBcmAccordionElement });\n  }\n\n  /**\n   * Handles changes to the footer slot content.\n   * @private\n   * @param e - Slot change event\n   */\n  private handleFooterSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const assignedNodes = slot.assignedNodes();\n    this.hasFooterContent = assignedNodes.length > 0;\n  };\n\n  private accordionClass = tv(\n    {\n      slots: {\n        container: 'accordion-container flex flex-col bcm-ui-element w-full',\n        header:\n          'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n        content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n        footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n        icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n        rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n      },\n      variants: {\n        hasFooterContent: {\n          false: { footer: 'hidden' },\n          true: { footer: 'flex' },\n        },\n        expanded: {\n          true: { icon: 'rotate-180' },\n          false: {\n            icon: 'rotate-0',\n            content: '',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n      hasFooterContent: this.hasFooterContent || !!this.hintText,\n      expanded: this.expanded,\n    });\n\n    return (\n      <div class={container()}>\n        {/* Header */}\n        <header\n          class={header()}\n          role=\"button\"\n          tabindex=\"0\"\n          aria-expanded={this.expanded.toString()}\n          aria-controls=\"accordion-content\"\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              this.toggle();\n            }\n          }}\n          onClick={() => this.toggle()}\n        >\n          <slot name=\"title\">{this.headerTitle}</slot>\n          {/* Actions */}\n          <div class={rightSection()}>\n            <span onClick={e => e.stopPropagation()}>\n              <slot name=\"actions\"></slot>\n            </span>\n            <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n          </div>\n        </header>\n        {/* Content */}\n        <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n          <div class=\"px-4 py-2\">\n            <slot></slot>\n          </div>\n          <footer class={footer()}>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n              {this.hintText}\n            </slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-accordion.entry.esm.js","sources":["src/components/accordion/accordion.css?tag=bcm-accordion&encapsulation=shadow","src/components/accordion/accordion.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-bg: var(--bcm-ui-color-background-basic-panel);\n  --bcm-accordion-content-bg: var(--bcm-ui-color-background-basic-base);\n  --bcm-accordion-text: var(--bcm-ui-color-text-header);\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n  --bcm-accordion-footer-bg: var(--bcm-ui-color-background-default-default);\n}\n\n:host(:not([group])) .accordion-container {\n  border: 1px solid var(--bcm-accordion-border);\n  border-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]) .accordion-container {\n  border-bottom: 1px solid var(--bcm-accordion-border);\n  border-radius: 0;\n}\n\n:host([group]:last-of-type) .accordion-container {\n  border-bottom: none;\n}\n\n:host([group]:first-of-type) .accordion-container {\n  border-top-left-radius: var(--bcm-accordion-radius);\n  border-top-right-radius: var(--bcm-accordion-radius);\n}\n\n:host([group]:last-of-type) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n:host(:not([group])) .accordion-footer {\n  border-bottom-left-radius: var(--bcm-accordion-radius);\n  border-bottom-right-radius: var(--bcm-accordion-radius);\n}\n\n::slotted([slot='title']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 10px;\n}\n::slotted([slot='actions']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n}\n","import { Component, ComponentInterface, EventEmitter, h, Method, Prop, Event, State, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { AccordionChangeEventType } from './types';\n\n/**\n * @component BcmAccordion\n * @description A collapsible accordion component that provides expandable/collapsible content sections with keyboard navigation\n * and accessibility features. Offers customizable header, content, and footer areas through slots.\n *\n * @example Basic usage\n * <bcm-accordion>\n *   <div slot=\"title\">Accordion Title</div>\n *   <div>Content goes here</div>\n * </bcm-accordion>\n *\n * @example With all slots and hint text\n * <bcm-accordion hint-text=\"Additional information\">\n *   <div slot=\"title\">Title</div>\n *   <div slot=\"actions\">\n *     <button>Action</button>\n *   </div>\n *   <div>Main content</div>\n *   <div slot=\"footer\">Footer content</div>\n * </bcm-accordion>\n *\n * @example Event handling\n * // Listen to accordion state changes\n * const accordion = document.querySelector('bcm-accordion');\n * accordion.addEventListener('bcmAccordionChange', (event) => {\n *   const { expanded, source } = event.detail;\n *   console.log('Accordion expanded:', expanded);\n *   console.log('Changed accordion:', source);\n * });\n *\n * // Programmatically control accordion\n * await accordion.toggle(); // Toggle state\n * await accordion.expand(); // Expand accordion\n * await accordion.collapse(); // Collapse accordion\n *\n * @prop {boolean} expanded - Controls the expanded state of the accordion (default: false)\n * @prop {boolean} group - Indicates if the accordion is part of an accordion group (default: false)\n * @prop {string} hintText - Optional hint text to display in the footer when no footer content is provided\n *\n * @slot title - Primary title content for the accordion header (required)\n * @slot actions - Additional actions to be displayed in the header (optional)\n * @slot default - Main content area of the accordion\n * @slot footer - Optional footer content (overrides hint-text if provided)\n *\n * @event {EventEmitter<AccordionChangeEventType>} bcmAccordionChange - Emitted when the accordion's expanded state changes\n * @eventProperty {boolean} expanded - Current expanded state\n * @eventProperty {HTMLBcmAccordionElement} source - Reference to the accordion element that changed\n *\n * @csspart container - The root container element\n * @csspart header - The header section with title and actions\n * @csspart content - The collapsible content section\n * @csspart footer - The footer section with hint text or footer slot\n * @csspart section - Container for header content sections\n * @csspart icon - The expand/collapse chevron icon\n *\n * @css {string} --bcm-accordion-radius - Border radius of the accordion header (default: 4px)\n * @css {string} --bcm-accordion-bg - Background color of the accordion header\n * @css {string} --bcm-accordion-text - Text color of the accordion\n * @css {string} --bcm-accordion-footer-bg - Background color of the footer section\n *\n * @methods\n * toggle() - Toggles the accordion's expanded state\n * expand() - Expands the accordion if collapsed\n * collapse() - Collapses the accordion if expanded\n */\n@Component({\n  tag: 'bcm-accordion',\n  styleUrl: 'accordion.css',\n  shadow: true,\n})\nexport class BcmAccordion implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() host: HTMLElement;\n\n  /**\n   * Controls whether the accordion is expanded or collapsed.\n   * @prop\n   * @defaultValue false\n   */\n  @Prop({ reflect: true, mutable: true })\n  expanded: boolean = false;\n\n  /**\n   * Optional title text to display in the header.\n   * @prop\n   * @defaultValue undefined\n   */\n  @Prop()\n  headerTitle?: string;\n\n  /**\n   * Indicates if the accordion is part of a group.\n   * Used for group behavior coordination.\n   * @prop\n   * @defaultValue false\n   */\n\n  @Prop({ reflect: true })\n  group: boolean = false;\n\n  /**\n   * Optional text to display in the footer when no footer slot content is provided.\n   * @prop\n   */\n  @Prop({ attribute: 'hint-text' })\n  hintText?: string;\n\n  /**\n   * Tracks whether footer content is present.\n   * @state\n   */\n  @State()\n  hasFooterContent: boolean = false;\n\n  /**\n   * Emitted when the accordion's expanded state changes.\n   * @event\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmAccordionChange',\n  })\n  bcmAccordionChange: EventEmitter<AccordionChangeEventType>;\n\n  private contentEl?: HTMLElement;\n\n  /**\n   * Toggles the accordion's expanded state.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.expanded = !this.expanded;\n    this.updateAccordion();\n  }\n\n  /**\n   * Expands the accordion if it's not already expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async expand(): Promise<void> {\n    if (!this.expanded) {\n      this.expanded = true;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Collapses the accordion if it's currently expanded.\n   * @method\n   * @returns Promise<void>\n   */\n  @Method()\n  async collapse(): Promise<void> {\n    if (this.expanded) {\n      this.expanded = false;\n      this.updateAccordion();\n    }\n  }\n\n  /**\n   * Updates the accordion's content height and emits change event.\n   * @private\n   */\n  private updateAccordion(): void {\n    if (this.contentEl) {\n      this.contentEl.style.maxHeight = this.expanded ? `${this.contentEl.scrollHeight}px` : '0px';\n    }\n    this.bcmAccordionChange.emit({ expanded: this.expanded, source: this.host as unknown as HTMLBcmAccordionElement });\n  }\n\n  /**\n   * Handles changes to the footer slot content.\n   * @private\n   * @param e - Slot change event\n   */\n  private handleFooterSlotChange = (e: Event) => {\n    const slot = e.target as HTMLSlotElement;\n    const assignedNodes = slot.assignedNodes();\n    this.hasFooterContent = assignedNodes.length > 0;\n  };\n\n  private accordionClass = tv(\n    {\n      slots: {\n        container: 'accordion-container flex flex-col bcm-ui-element w-full',\n        header:\n          'accordion-header flex flex-row justify-between gap-2 p-4 min-w-max flex-nowrap text-wrap rounded-[--bcm-accordion-radius] bg-[--bcm-accordion-bg] text-[--bcm-accordion-text] font-semibold text-size-6 cursor-pointer',\n        content: 'accordion-content overflow-hidden transition-all duration-300 ease-in-out bg-color-basic-base',\n        footer: 'accordion-footer flex flex-row flex-nowrap bg-[--bcm-accordion-footer-bg] text-[--bcm-accordion-text] px-4 py-2 gap-2 text-size-4 font-normal min-w-max',\n        icon: 'accordion-icon cursor-pointer transform transition-transform duration-300',\n        rightSection: 'accordion-right-section flex flex-row gap-2.5 items-center',\n      },\n      variants: {\n        hasFooterContent: {\n          false: { footer: 'hidden' },\n          true: { footer: 'flex' },\n        },\n        expanded: {\n          true: { icon: 'rotate-180' },\n          false: {\n            icon: 'rotate-0',\n            content: '',\n          },\n        },\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { container, header, content, footer, icon, rightSection } = this.accordionClass({\n      hasFooterContent: this.hasFooterContent || !!this.hintText,\n      expanded: this.expanded,\n    });\n\n    return (\n      <div class={container()}>\n        {/* Header */}\n        <header\n          class={header()}\n          role=\"button\"\n          tabindex=\"0\"\n          aria-expanded={this.expanded.toString()}\n          aria-controls=\"accordion-content\"\n          onKeyDown={e => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              this.toggle();\n            }\n          }}\n          onClick={() => this.toggle()}\n        >\n          <slot name=\"title\">{this.headerTitle}</slot>\n          {/* Actions */}\n          <div class={rightSection()}>\n            <span onClick={e => e.stopPropagation()}>\n              <slot name=\"actions\"></slot>\n            </span>\n            <bcm-icon name=\"fa-regular fa-chevron-down\" class={icon()}></bcm-icon>\n          </div>\n        </header>\n        {/* Content */}\n        <div class={content()} style={{ maxHeight: this.expanded ? 'auto' : '0px' }} ref={el => (this.contentEl = el as HTMLElement)}>\n          <div class=\"px-4 py-2\">\n            <slot></slot>\n          </div>\n          <footer class={footer()}>\n            <slot name=\"footer\" onSlotchange={this.handleFooterSlotChange}>\n              {this.hintText}\n            </slot>\n          </footer>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/bromcom-ui/bcm-alert.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-alert.entry.esm.js","sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n  --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-alert-text: var(--bcm-ui-color-text-default);\n  --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n */\n@Component({\n  tag: 'bcm-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n  /** Alert status type */\n  @Prop()\n  status?: AlertStatus = 'default';\n\n  /** Alert size variant */\n  @Prop()\n  size?: AlertSize = 'medium';\n\n  /** Alert style variant */\n  @Prop()\n  kind?: AlertKind = 'filled';\n\n  /** Whether alert can be dismissed */\n  @Prop()\n  dismissible?: boolean = true;\n\n  /** Whether to show status icon */\n  @Prop()\n  showStatusIcon?: boolean = true;\n\n  @Event() bcmDismiss: EventEmitter<void>;\n\n  /**\n   * Handles alert dismissal\n   * @private\n   */\n  private onDismiss() {\n    this.bcmDismiss.emit();\n  }\n\n  private getStatusIcon() {\n    const statusIcon = {\n      info: 'fa-regular fa-info-circle',\n      error: 'fa-regular fa-exclamation-circle',\n      warning: 'fa-regular fa-exclamation-triangle',\n      success: 'fa-regular fa-check-circle',\n    };\n    return statusIcon[this.status];\n  }\n\n  private get alertClass() {\n    return tv(\n      {\n        slots: {\n          base: 'alert bcm-ui-element font-medium flex items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3 w-full',\n          section: 'flex items-center gap-2',\n        },\n        variants: {\n          size: {\n            small: {\n              base: 'py-1.5 text-size-4',\n            },\n            medium: {\n              base: 'py-2 text-size-5',\n            },\n            large: {\n              base: 'py-2.5 text-size-6',\n            },\n          },\n        },\n      },\n      {\n        twMerge: false,\n      },\n    );\n  }\n\n  private get alertStyles() {\n    let colorStatus = {\n      info: 'var(--bcm-ui-color-background-palette-blue-default)',\n      error: 'var(--bcm-ui-color-background-palette-red-default)',\n      warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n      success: 'var(--bcm-ui-color-background-palette-green-default)',\n      default: 'var(--bcm-ui-color-background-palette-gray-default)',\n    };\n\n    let textStatusColor = {\n      info: 'var(--bcm-ui-color-text-info)',\n      error: 'var(--bcm-ui-color-text-error)',\n      warning: 'var(--bcm-ui-color-text-warning)',\n      success: 'var(--bcm-ui-color-text-success)',\n      default: 'var(--bcm-ui-color-text-default)',\n    };\n\n    let filleStyle = {\n      '--bcm-alert-bg': colorStatus[this.status],\n      '--bcm-alert-text': textStatusColor[this.status],\n    };\n\n    let textStyle = {\n      '--bcm-alert-bg': 'transparent',\n      '--bcm-alert-text': textStatusColor[this.status],\n    };\n\n    return this.kind === 'filled' ? filleStyle : textStyle;\n  }\n\n  render() {\n    const { base, section } = this.alertClass({ size: this.size });\n    return (\n      <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n        <div class={section()}>\n          {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n          <slot></slot>\n        </div>\n        <div class={section()}>\n          <div part=\"action\">\n            <slot name=\"action\"></slot>\n          </div>\n          <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-alert.entry.esm.js","sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n  display: flex;\n  width: 100%;\n  --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-alert-text: var(--bcm-ui-color-text-default);\n  --bcm-alert-radius: 6px;\n}","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * Alert component that displays messages with different statuses and styles\n * @class BcmAlert\n */\n@Component({\n  tag: 'bcm-alert',\n  styleUrl: 'alert.css',\n  shadow: true,\n})\nexport class BcmAlert implements ComponentInterface {\n  /** Alert status type */\n  @Prop()\n  status?: AlertStatus = 'default';\n\n  /** Alert size variant */\n  @Prop()\n  size?: AlertSize = 'medium';\n\n  /** Alert style variant */\n  @Prop()\n  kind?: AlertKind = 'filled';\n\n  /** Whether alert can be dismissed */\n  @Prop()\n  dismissible?: boolean = true;\n\n  /** Whether to show status icon */\n  @Prop()\n  showStatusIcon?: boolean = true;\n\n  @Event() bcmDismiss: EventEmitter<void>;\n\n  /**\n   * Handles alert dismissal\n   * @private\n   */\n  private onDismiss() {\n    this.bcmDismiss.emit();\n  }\n\n  private getStatusIcon() {\n    const statusIcon = {\n      info: 'fa-regular fa-info-circle',\n      error: 'fa-regular fa-exclamation-circle',\n      warning: 'fa-regular fa-exclamation-triangle',\n      success: 'fa-regular fa-check-circle',\n    };\n    return statusIcon[this.status];\n  }\n\n  private get alertClass() {\n    return tv(\n      {\n        slots: {\n          base: 'alert bcm-ui-element font-medium flex w-full items-center justify-between bg-[--bcm-alert-bg] text-[--bcm-alert-text] rounded-[--bcm-alert-radius] px-3 gap-3',\n          section: 'flex items-center gap-2',\n        },\n        variants: {\n          size: {\n            small: {\n              base: 'py-1.5 text-size-4',\n            },\n            medium: {\n              base: 'py-2 text-size-5',\n            },\n            large: {\n              base: 'py-2.5 text-size-6',\n            },\n          },\n        },\n      },\n      {\n        twMerge: false,\n      },\n    );\n  }\n\n  private get alertStyles() {\n    let colorStatus = {\n      info: 'var(--bcm-ui-color-background-palette-blue-default)',\n      error: 'var(--bcm-ui-color-background-palette-red-default)',\n      warning: 'var(--bcm-ui-color-background-palette-yellow-default)',\n      success: 'var(--bcm-ui-color-background-palette-green-default)',\n      default: 'var(--bcm-ui-color-background-palette-gray-default)',\n    };\n\n    let textStatusColor = {\n      info: 'var(--bcm-ui-color-text-info)',\n      error: 'var(--bcm-ui-color-text-error)',\n      warning: 'var(--bcm-ui-color-text-warning)',\n      success: 'var(--bcm-ui-color-text-success)',\n      default: 'var(--bcm-ui-color-text-default)',\n    };\n\n    const statusKey = this.status in colorStatus ? this.status : 'default';\n\n    return this.kind === 'filled' ? {\n      '--bcm-alert-bg': colorStatus[statusKey],\n      '--bcm-alert-text': textStatusColor[statusKey],\n    } : {\n      '--bcm-alert-bg': 'transparent',\n      '--bcm-alert-text': textStatusColor[statusKey],\n    };\n  }\n\n  render() {\n    const { base, section } = this.alertClass({ size: this.size });\n    return (\n      <div role=\"alert\" aria-live=\"assertive\" aria-atomic=\"true\" class={base()} style={this.alertStyles}>\n        <div class={section() + \" flex-1 min-w-0\"}>\n          {this.showStatusIcon && <bcm-icon icon-name={this.getStatusIcon()}></bcm-icon>}\n          <div class=\"min-w-0\">\n            <slot></slot>\n          </div>\n        </div>\n        <div class={section() + \" flex-shrink-0\"}>\n          <div part=\"action\">\n            <slot name=\"action\"></slot>\n          </div>\n          <span part=\"icon\">{this.dismissible && <bcm-icon onClick={() => this.onDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\"></bcm-icon>}</span>\n        </div>\n      </div>\n    );\n  }\n}"],"names":[],"mappings":"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"}

package/dist/bromcom-ui/bcm-avatar.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-avatar.entry.esm.js","sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n  --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-avatar-text: var(--bcm-ui-color-text-default);\n  --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n  tag: 'bcm-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class BcmAvatar {\n  /** Source URL for avatar image */\n  @Prop()\n  image: string;\n\n  /** Alternative text for image */\n  @Prop()\n  alt: string;\n\n  /**  Shape of the avatar (ellipse/square) */\n  @Prop()\n  shape: AvatarShape = 'ellipse';\n\n  /** Size of the avatar */\n  @Prop()\n  size: AvatarSize = 'medium';\n\n  /** Custom background color */\n  @Prop()\n  color: string;\n\n  /** Fallback icon class */\n  @Prop()\n  icon: string = 'fas fa-user';\n\n  /**  Status indicator type */\n  @Prop()\n  status: AvatarStatus;\n\n  /**  Status indicator animation */\n  @Prop()\n  blink = false;\n\n  /**  Display name (used for initials) */\n  @Prop()\n  name: string;\n\n  @State() isFallback: boolean = false;\n\n  private getFirstLetters(name: string): string {\n    const words = name.split(' ');\n    const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n    return initials.substring(0, 2);\n  }\n\n  render() {\n    const baseClass = cs(\n      'bcm-avatar bcm-ui-element bcm-ui-content-display',\n      'uppercase font-medium',\n      'inline-flex items-center justify-center',\n      'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n      {\n        'shape-ellipse rounded-full': this.shape === 'ellipse',\n        'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n        'size-small text-size-4 w-6 h-6': this.size === 'small',\n        'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n        'size-large text-size-6 w-10 h-10': this.size === 'large',\n      },\n    );\n\n    const badgeClass = cs('badge', {\n      'top-0 right-0': this.shape === 'ellipse',\n      '-top-0.5 -right-0.5': this.shape === 'square',\n    });\n\n    const imageClass = cs('image w-full h-full', {\n      'rounded-full': this.shape === 'ellipse',\n      'rounded-[--bcm-ui-radius]': this.shape === 'square',\n    });\n\n    let style = {};\n\n    if (this.color) {\n      const isColorTone = this.color.includes('-');\n      const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n      const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n      const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n      style = {\n        '--bcm-avatar-bg': bgColor,\n        '--bcm-avatar-text': textColor,\n      };\n    }\n\n    const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n      ? {\n        width: `${this.size}px`,\n        height: `${this.size}px`,\n        fontSize: `${+this.size / 2}px`,\n      }\n      : {};\n\n    const RenderContent = () => {\n      if (this.isFallback) {\n        if (this.name) {\n          return this.getFirstLetters(this.name);\n        } else {\n          return <i class={this.icon}></i>;\n        }\n      } else if (this.image) {\n        return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt || this.name || 'Avatar'} />;\n      } else if (this.name) {\n        return this.getFirstLetters(this.name);\n      } else {\n        return <i class={this.icon}></i>;\n      }\n    };\n\n    return (\n      <div role=\"img\" aria-label={this.alt || this.name || 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n        <RenderContent />\n        {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":["cs"],"mappings":"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"}
+{"version":3,"file":"bcm-avatar.entry.esm.js","sources":["src/components/avatar/avatar.css?tag=bcm-avatar&encapsulation=shadow","src/components/avatar/avatar.component.tsx"],"sourcesContent":[":host {\n  --bcm-avatar-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-avatar-text: var(--bcm-ui-color-text-default);\n  --bcm-avatar-radius: 50%;\n}\n","import { Component, Prop, State, h } from '@stencil/core';\nimport cs from 'classnames';\nimport { AvatarShape, AvatarSize, AvatarStatus } from './types';\n\n@Component({\n  tag: 'bcm-avatar',\n  styleUrl: 'avatar.css',\n  shadow: true,\n})\nexport class BcmAvatar {\n  /** Source URL for avatar image */\n  @Prop()\n  image: string;\n\n  /** Alternative text for image */\n  @Prop()\n  alt: string;\n\n  /**  Shape of the avatar (ellipse/square) */\n  @Prop()\n  shape: AvatarShape = 'ellipse';\n\n  /** Size of the avatar */\n  @Prop()\n  size: AvatarSize = 'medium';\n\n  /** Custom background color */\n  @Prop()\n  color: string;\n\n  /** Fallback icon class */\n  @Prop()\n  icon: string = 'fas fa-user';\n\n  /**  Status indicator type */\n  @Prop()\n  status: AvatarStatus;\n\n  /**  Status indicator animation */\n  @Prop()\n  blink = false;\n\n  /**  Display name (used for initials) */\n  @Prop()\n  name: string;\n\n  @State() isFallback: boolean = false;\n\n  private getFirstLetters(name: string): string {\n    const words = name.split(' ');\n    const initials = words.map(word => word.charAt(0).toUpperCase()).join('');\n    return initials.substring(0, 2);\n  }\n\n  render() {\n    const baseClass = cs(\n      'bcm-avatar bcm-ui-element bcm-ui-content-display',\n      'uppercase font-medium',\n      'inline-flex items-center justify-center',\n      'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]',\n      {\n        'shape-ellipse rounded-full': this.shape === 'ellipse',\n        'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',\n        'size-small text-size-4 w-6 h-6': this.size === 'small',\n        'size-medium text-size-5 w-8 h-8': this.size === 'medium',\n        'size-large text-size-6 w-10 h-10': this.size === 'large',\n      },\n    );\n\n    const badgeClass = cs('badge', {\n      'top-0 right-0': this.shape === 'ellipse',\n      '-top-0.5 -right-0.5': this.shape === 'square',\n    });\n\n    const imageClass = cs('image w-full h-full', {\n      'rounded-full': this.shape === 'ellipse',\n      'rounded-[--bcm-ui-radius]': this.shape === 'square',\n    });\n\n    let style = {};\n\n    if (this.color) {\n      const isColorTone = this.color.includes('-');\n      const _color = isColorTone ? this.color.split('-')[0] : this.color;\n\n      const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;\n      const textColor = `var(--bcm-ui-color-text-palette-${_color}`;\n      style = {\n        '--bcm-avatar-bg': bgColor,\n        '--bcm-avatar-text': textColor,\n      };\n    }\n\n    const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)\n      ? {\n        width: `${this.size}px`,\n        height: `${this.size}px`,\n        fontSize: `${+this.size / 2}px`,\n      }\n      : {};\n\n    const RenderContent = () => {\n      if (this.isFallback) {\n        if (this.name) {\n          return this.getFirstLetters(this.name);\n        } else {\n          return <i class={this.icon}></i>;\n        }\n      } else if (this.image) {\n        return <img class={imageClass} onError={() => (this.isFallback = true)} src={this.image} alt={this.alt} aria-label={this.alt || this.name || 'Avatar'} />;\n      } else if (this.name) {\n        return this.getFirstLetters(this.name);\n      } else {\n        return <i class={this.icon}></i>;\n      }\n    };\n\n    return (\n      <div role=\"img\" aria-label={this.alt || this.name || 'Avatar'} class={baseClass} style={{ ...style, ...customSize }}>\n        <RenderContent />\n        {this.status && <bcm-badge class={badgeClass} status={this.status} blink={this.blink} aria-hidden=\"true\"></bcm-badge>}\n        <slot></slot>\n      </div>\n    );\n  }\n}\n"],"names":["cs"],"mappings":"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"}

package/dist/bromcom-ui/bcm-badge.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-badge.entry.esm.js","sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n  tag: 'bcm-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class Badge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Enables blinking animation for the badge.\n   * Useful for drawing attention or indicating active status.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  blink: boolean = false;\n\n  /**\n   * Status message for accessibility purposes.\n   * Will be read by screen readers.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  status?: string;\n\n  /**\n   * Sets the position of the badge relative to its container.\n   * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n   * @default 'top-right'\n   */\n  @Prop()\n  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n  /**\n   * Fine-tune the badge position with custom offset.\n   * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  offset: string;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * Can be overridden using the \"badge\" slot.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n    variants: {\n      size: {\n        small: 'gap-1 px-1 text-size-3',\n        medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n        large: 'gap-2 py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n      position: {\n        'top-right': '-top-1 -right-1',\n        'top-left': '-top-1 -left-1',\n        'bottom-right': '-bottom-1 -right-1',\n        'bottom-left': '-bottom-1 -left-1',\n      },\n      blink: {\n        true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      position: 'top-right',\n      blink: false,\n    },\n  });\n\n  private get offsetStyle() {\n    if (!this.offset) return {};\n    const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n    return { transform: `translate(${x}px, ${y}px)` };\n  }\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'soft' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <div class=\"relative inline-flex\">\n        <slot></slot>\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label={this.status ? `Status: ${this.status}` : undefined}\n          class={this.classes({\n            size: this.size,\n            variant: this.variant,\n            position: this.position,\n            blink: this.blink,\n          })}\n          style={{\n            ...this.badgeStyle,\n            ...this.offsetStyle,\n          }}\n        >\n          {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-badge.entry.esm.js","sources":["src/components/badge/badge.css?tag=bcm-badge&encapsulation=shadow","src/components/badge/badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  position: relative;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n::slotted([slot='badge']) {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBadge\n * @description A versatile badge component that can be positioned around its container.\n * Supports different sizes, variants (dot/text), colors, and positioning options.\n * Can display status indicators with optional blinking animation.\n *\n * @example Basic usage\n * <bcm-badge color=\"primary\" position=\"top-right\">\n *   <div>Container Content</div>\n *   <span slot=\"badge\">New</span>\n * </bcm-badge>\n *\n * @example Status indicator with blink\n * <bcm-badge variant=\"dot\" color=\"success\" blink={true} status=\"Online\">\n *   <div>User Profile</div>\n * </bcm-badge>\n */\n@Component({\n  tag: 'bcm-badge',\n  styleUrl: 'badge.css',\n  shadow: true,\n})\nexport class Badge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Enables blinking animation for the badge.\n   * Useful for drawing attention or indicating active status.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  blink: boolean = false;\n\n  /**\n   * Status message for accessibility purposes.\n   * Will be read by screen readers.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  status?: string;\n\n  /**\n   * Sets the position of the badge relative to its container.\n   * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}\n   * @default 'top-right'\n   */\n  @Prop()\n  position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right';\n\n  /**\n   * Fine-tune the badge position with custom offset.\n   * Format: \"x,y\" in pixels (e.g., \"10,-5\")\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  offset: string;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * Can be overridden using the \"badge\" slot.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element absolute font-medium inline-flex items-center justify-center bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius] z-10',\n    variants: {\n      size: {\n        small: 'gap-1 px-1 text-size-3',\n        medium: 'gap-1 py-0.5 px-1.5 text-size-4',\n        large: 'gap-2 py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n      position: {\n        'top-right': '-top-1 -right-1',\n        'top-left': '-top-1 -left-1',\n        'bottom-right': '-bottom-1 -right-1',\n        'bottom-left': '-bottom-1 -left-1',\n      },\n      blink: {\n        true: 'after:content-[\"\"] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      position: 'top-right',\n      blink: false,\n    },\n  });\n\n  private get offsetStyle() {\n    if (!this.offset) return {};\n    const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());\n    return { transform: `translate(${x}px, ${y}px)` };\n  }\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'soft' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <div class=\"relative inline-flex\">\n        <slot></slot>\n        <div\n          role=\"status\"\n          aria-live=\"polite\"\n          aria-label={this.status ? `Status: ${this.status}` : undefined}\n          class={this.classes({\n            size: this.size,\n            variant: this.variant,\n            position: this.position,\n            blink: this.blink,\n          })}\n          style={{\n            ...this.badgeStyle,\n            ...this.offsetStyle,\n          }}\n        >\n          {this.variant == 'text' && <slot name=\"badge\">{this.text}</slot>}\n        </div>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,QAAQ,GAAG,sgHAAsgH;;MCyB1gH,KAAK,GAAA,MAAA;;;;AAChB;;;;AAIG;IAEH,IAAI,GAAiC,QAAQ;AAE7C;;;;;;AAMG;IAEH,OAAO,GAAmB,MAAM;AAEhC;;;;;AAKG;AAEH,IAAA,KAAK;AAEL;;;;;AAKG;IAEH,IAAI,GAAY,KAAK;AAErB;;;;;AAKG;IAEH,KAAK,GAAY,KAAK;AAEtB;;;;;AAKG;AAEH,IAAA,MAAM;AAEN;;;;AAIG;IAEH,QAAQ,GAA8D,WAAW;AAEjF;;;;;AAKG;AAEH,IAAA,MAAM;AAEN;;;;;;AAMG;AAEH,IAAA,IAAI;IAEI,OAAO,GAAG,EAAE,CAAC;AACnB,QAAA,IAAI,EAAE,iKAAiK;AACvK,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,wBAAwB;AAC/B,gBAAA,MAAM,EAAE,iCAAiC;AACzC,gBAAA,KAAK,EAAE,6BAA6B;AACrC,aAAA;AACD,YAAA,OAAO,EAAE;AACP,gBAAA,GAAG,EAAE,mCAAmC;AACxC,gBAAA,IAAI,EAAE,EAAE;AACT,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,WAAW,EAAE,iBAAiB;AAC9B,gBAAA,UAAU,EAAE,gBAAgB;AAC5B,gBAAA,cAAc,EAAE,oBAAoB;AACpC,gBAAA,aAAa,EAAE,mBAAmB;AACnC,aAAA;AACD,YAAA,KAAK,EAAE;AACL,gBAAA,IAAI,EAAE,+HAA+H;AACtI,aAAA;AACF,SAAA;AACD,QAAA,gBAAgB,EAAE;AAChB,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,UAAU;AAClB,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,QAAQ,EAAE,WAAW;AACrB,YAAA,KAAK,EAAE,KAAK;AACb,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,IAAY,WAAW,GAAA;QACrB,IAAI,CAAC,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,EAAE;AAC3B,QAAA,MAAM,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,GAAG,CAAC,IAAI,EAAE,CAAC;QACpE,OAAO,EAAE,SAAS,EAAE,CAAA,UAAA,EAAa,CAAC,CAAO,IAAA,EAAA,CAAC,CAAK,GAAA,CAAA,EAAE;;AAGnD,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAC1B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO;QAEhD,OAAO;AACL,YAAA,gBAAgB,EAAE,CAAiC,8BAAA,EAAA,WAAW,IAAI,IAAI,CAAC,KAAK,CAAW,SAAA,CAAA;AACvF,YAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,CAAmC,gCAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,GAAG,+BAA+B;SACnH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EACb,CACE,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EACN,YAAA,EAAA,IAAI,CAAC,MAAM,GAAG,CAAA,QAAA,EAAW,IAAI,CAAC,MAAM,CAAA,CAAE,GAAG,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,EACF,KAAK,EAAE;gBACL,GAAG,IAAI,CAAC,UAAU;gBAClB,GAAG,IAAI,CAAC,WAAW;AACpB,aAAA,EAAA,EAEA,IAAI,CAAC,OAAO,IAAI,MAAM,IAAI,6DAAM,IAAI,EAAC,OAAO,EAAA,EAAE,IAAI,CAAC,IAAI,CAAQ,CAC5D,CACF;;;;;;;"}

package/dist/bromcom-ui/bcm-basic-badge.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-basic-badge.entry.esm.js","sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n.badge-content {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n *\n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n *\n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n  tag: 'bcm-basic-badge',\n  styleUrl: 'basic-badge.css',\n  shadow: true,\n})\nexport class BasicBadge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n    variants: {\n      size: {\n        small: 'px-1 text-size-3',\n        medium: 'py-0.5 px-1.5 text-size-4',\n        large: 'py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      blink: false,\n    },\n  });\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'palette' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        role=\"status\"\n        aria-live=\"polite\"\n        style={this.badgeStyle}\n        class={this.classes({\n          size: this.size,\n          variant: this.variant,\n        })}\n      >\n        {this.variant === 'text' && (\n          <span class=\"badge-content\">\n            <slot></slot>\n          </span>\n        )}\n      </span>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,ovDAAovD;;MCsB7vD,UAAU,GAAA,MAAA;AALvB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;AAIG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAE7C;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAmB,MAAM;AAWhC;;;;;AAKG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAWb,QAAA,IAAO,CAAA,OAAA,GAAG,EAAE,CAAC;AACnB,YAAA,IAAI,EAAE,iLAAiL;AACvL,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,kBAAkB;AACzB,oBAAA,MAAM,EAAE,2BAA2B;AACnC,oBAAA,KAAK,EAAE,uBAAuB;AAC/B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,GAAG,EAAE,mCAAmC;AACxC,oBAAA,IAAI,EAAE,EAAE;AACT,iBAAA;AACF,aAAA;AACD,YAAA,gBAAgB,EAAE;AAChB,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,QAAQ;AAChB,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,QAAQ;AACd,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACD,gBAAA;AACE,oBAAA,OAAO,EAAE,KAAK;AACd,oBAAA,IAAI,EAAE,OAAO;AACb,oBAAA,KAAK,EAAE,QAAQ;AAChB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,OAAO,EAAE,MAAM;AACf,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,KAAK;AACb,aAAA;AACF,SAAA,CAAC;AAgCH;AA9BC,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAC1B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO;QAEnD,OAAO;AACL,YAAA,gBAAgB,EAAE,CAAiC,8BAAA,EAAA,WAAW,IAAI,IAAI,CAAC,KAAK,CAAW,SAAA,CAAA;AACvF,YAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,CAAmC,gCAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,GAAG,+BAA+B;SACnH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,6DACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,aAAA,CAAC,EAAA,EAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACR,CACI;;;;;;;"}
+{"version":3,"file":"bcm-basic-badge.entry.esm.js","sources":["src/components/basic-badge/basic-badge.css?tag=bcm-basic-badge&encapsulation=shadow","src/components/basic-badge/basic-badge.component.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  height: fit-content;\n  width: fit-content;\n  --bcm-badge-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-badge-text: var(--bcm-ui-color-text-default);\n  --bcm-badge-radius: 9999px;\n}\n\n.badge-content {\n  color: var(--bcm-badge-text);\n  font-weight: 500;\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmBasicBadge\n * @description A basic badge component that can be used as a status indicator or to highlight content.\n * Supports dot and text variants with different sizes and color options.\n *\n * @example Basic usage\n * <bcm-basic-badge size=\"medium\" color=\"primary\">\n *   New\n * </bcm-basic-badge>\n *\n * @example Dot variant\n * <bcm-basic-badge variant=\"dot\" color=\"success\" />\n */\n\n@Component({\n  tag: 'bcm-basic-badge',\n  styleUrl: 'basic-badge.css',\n  shadow: true,\n})\nexport class BasicBadge implements ComponentInterface {\n  /**\n   * Determines the size of the badge.\n   * @type {'small' | 'medium' | 'large'}\n   * @default 'medium'\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Sets the visual variant of the badge.\n   * 'dot': Appears as a small dot indicator\n   * 'text': Displays content as text\n   * @type {'dot' | 'text'}\n   * @default 'text'\n   */\n  @Prop()\n  variant: 'dot' | 'text' = 'text';\n\n  /**\n   * Defines the color of the badge.\n   * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  color?: string;\n\n  /**\n   * Enables soft color mode for the badge.\n   * When true, uses lighter tones and pastel colors.\n   * @type {boolean}\n   * @default false\n   */\n  @Prop()\n  soft: boolean = false;\n\n  /**\n   * Text to be displayed inside the badge.\n   * Used when variant is set to 'text'.\n   * @type {string}\n   * @optional\n   */\n  @Prop()\n  text?: string;\n\n  private classes = tv({\n    base: 'badge bcm-ui-element inline-flex items-center justify-center whitespace-nowrap select-none font-medium bg-[--bcm-badge-bg] text-[--bcm-badge-text] rounded-[--bcm-badge-radius]',\n    variants: {\n      size: {\n        small: 'px-1 text-size-3',\n        medium: 'py-0.5 px-1.5 text-size-4',\n        large: 'py-1 px-2 text-size-5',\n      },\n      variant: {\n        dot: 'gap-0 p-0 text-[0px] leading-none',\n        text: '',\n      },\n    },\n    compoundVariants: [\n      {\n        variant: 'dot',\n        size: 'small',\n        class: 'size-1',\n      },\n      {\n        variant: 'dot',\n        size: 'medium',\n        class: 'size-1.5',\n      },\n      {\n        variant: 'dot',\n        size: 'large',\n        class: 'size-2',\n      },\n    ],\n    defaultVariants: {\n      variant: 'text',\n      size: 'medium',\n      blink: false,\n    },\n  });\n\n  private get badgeStyle() {\n    if (!this.color) return {};\n    const variantType = this.soft ? 'palette' : 'vivid';\n\n    return {\n      '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,\n      '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',\n    };\n  }\n\n  render() {\n    return (\n      <span\n        part=\"base\"\n        role=\"status\"\n        aria-live=\"polite\"\n        style={this.badgeStyle}\n        class={this.classes({\n          size: this.size,\n          variant: this.variant,\n        })}\n      >\n        {this.variant === 'text' && (\n          <span class=\"badge-content\">\n            <slot></slot>\n          </span>\n        )}\n      </span>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,aAAa,GAAG,4tDAA4tD;;MCsBruD,UAAU,GAAA,MAAA;;;;AACrB;;;;AAIG;IAEH,IAAI,GAAiC,QAAQ;AAE7C;;;;;;AAMG;IAEH,OAAO,GAAmB,MAAM;AAEhC;;;;;AAKG;AAEH,IAAA,KAAK;AAEL;;;;;AAKG;IAEH,IAAI,GAAY,KAAK;AAErB;;;;;AAKG;AAEH,IAAA,IAAI;IAEI,OAAO,GAAG,EAAE,CAAC;AACnB,QAAA,IAAI,EAAE,iLAAiL;AACvL,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,kBAAkB;AACzB,gBAAA,MAAM,EAAE,2BAA2B;AACnC,gBAAA,KAAK,EAAE,uBAAuB;AAC/B,aAAA;AACD,YAAA,OAAO,EAAE;AACP,gBAAA,GAAG,EAAE,mCAAmC;AACxC,gBAAA,IAAI,EAAE,EAAE;AACT,aAAA;AACF,SAAA;AACD,QAAA,gBAAgB,EAAE;AAChB,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,QAAQ;AACd,gBAAA,KAAK,EAAE,UAAU;AAClB,aAAA;AACD,YAAA;AACE,gBAAA,OAAO,EAAE,KAAK;AACd,gBAAA,IAAI,EAAE,OAAO;AACb,gBAAA,KAAK,EAAE,QAAQ;AAChB,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,KAAK,EAAE,KAAK;AACb,SAAA;AACF,KAAA,CAAC;AAEF,IAAA,IAAY,UAAU,GAAA;QACpB,IAAI,CAAC,IAAI,CAAC,KAAK;AAAE,YAAA,OAAO,EAAE;AAC1B,QAAA,MAAM,WAAW,GAAG,IAAI,CAAC,IAAI,GAAG,SAAS,GAAG,OAAO;QAEnD,OAAO;AACL,YAAA,gBAAgB,EAAE,CAAiC,8BAAA,EAAA,WAAW,IAAI,IAAI,CAAC,KAAK,CAAW,SAAA,CAAA;AACvF,YAAA,kBAAkB,EAAE,IAAI,CAAC,IAAI,GAAG,CAAmC,gCAAA,EAAA,IAAI,CAAC,KAAK,CAAA,CAAA,CAAG,GAAG,+BAA+B;SACnH;;IAGH,MAAM,GAAA;AACJ,QAAA,QACE,6DACE,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,QAAQ,EACH,WAAA,EAAA,QAAQ,EAClB,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC;gBAClB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,aAAA,CAAC,EAAA,EAED,IAAI,CAAC,OAAO,KAAK,MAAM,KACtB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,eAAe,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACR,CACR,CACI;;;;;;;"}

package/dist/bromcom-ui/bcm-button-group.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-button-group.entry.esm.js","sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-button-group.entry.esm.js","sources":["src/components/button-group/button-group.css?tag=bcm-button-group&encapsulation=shadow","src/components/button-group/button-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n.bcm-button-group {\n  display: flex;\n}\n","import { Component, Prop, h, Host, Element, ComponentInterface } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonStatus } from '../button/types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button-group',\n  styleUrl: 'button-group.css',\n  shadow: true,\n})\nexport class BcmButtonGroup implements ComponentInterface {\n  @Element() host: HTMLElement;\n\n  /** Defines the main visual style of buttons */\n  @Prop()\n  kind?: ButtonKind;\n\n  /** Controls the button size */\n  @Prop()\n  size?: ButtonSize;\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status?: ButtonStatus;\n\n  /** Full width buttons */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth?: boolean;\n\n  /** Loading state */\n  @Prop()\n  loading?: boolean;\n\n  /** Disabled state */\n  @Prop()\n  disabled?: boolean;\n\n  /** Button orientation */\n  @Prop({ reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  componentDidLoad() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  componentDidUpdate() {\n    this.applyPropertiesToButtons();\n    this.setButtonPositions();\n  }\n\n  private applyPropertiesToButtons() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n\n    buttons.forEach(button => {\n      if (this.kind !== undefined) button.kind = this.kind;\n      if (this.size !== undefined) button.size = this.size;\n      if (this.status !== undefined) button.status = this.status;\n      if (this.fullWidth !== undefined) button.fullWidth = this.fullWidth;\n      if (this.loading !== undefined) button.loading = this.loading;\n      if (this.disabled !== undefined) button.disabled = this.disabled;\n\n      if (this.orientation === 'vertical') {\n        button.classList.add('orientation-vertical');\n      } else {\n        button.classList.remove('orientation-vertical');\n      }\n    });\n  }\n\n  private setButtonPositions() {\n    const buttons = this.host.querySelectorAll('bcm-button');\n    const totalButtons = buttons.length;\n\n    if (totalButtons === 0) return;\n\n    buttons.forEach((button, index) => {\n      if (totalButtons === 1) {\n        button.position = null;\n      } else if (index === 0) {\n        button.position = 'first';\n      } else if (index === totalButtons - 1) {\n        button.position = 'last';\n      } else {\n        button.position = 'middle';\n      }\n    });\n  }\n\n  private buttonGroupClass = tv(\n    {\n      base: 'bcm-button-group',\n      variants: {\n        orientation: {\n          horizontal: 'flex flex-row',\n          vertical: 'flex flex-col',\n        },\n        fullWidth: {\n          true: 'w-full',\n        },\n      },\n      defaultVariants: {\n        orientation: 'horizontal',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <Host>\n        <div\n          class={this.buttonGroupClass({\n            orientation: this.orientation,\n            fullWidth: this.fullWidth,\n          })}\n        >\n          <slot></slot>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/bromcom-ui/bcm-button.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bcm-button.entry.esm.js","sources":["src/components/button/types.ts","src/components/button/button.css?tag=bcm-button&encapsulation=shadow","src/components/button/button.component.tsx"],"sourcesContent":["export type ButtonKind = 'primary' | 'ghost' | 'text' | 'outline';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'reset' | 'submit';\nexport type ButtonStatus = 'default' | 'success' | 'error' | 'warning' | 'info';\nexport type IconPosition = 'prefix' | 'suffix';\n\n// Button group position\nexport type ButtonPosition = 'first' | 'middle' | 'last' | null;\n\nexport interface VariantOption {\n  text: string;\n  icon?: string;\n  iconPosition?: IconPosition;\n  status?: ButtonStatus;\n  kind?: ButtonKind;\n}\n\nexport const variantOptions: Record<string, VariantOption> = {\n  save: {\n    text: 'Save',\n    status: 'success',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n    kind: 'primary',\n  },\n  ok: {\n    text: 'Ok',\n    status: 'success',\n    icon: 'far fa-check',\n    iconPosition: 'prefix',\n  },\n  new: {\n    text: 'New',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  add: {\n    text: 'Add',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  create: {\n    text: 'Create',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  prev: {\n    text: 'Prev',\n    status: 'default',\n    icon: 'far fa-arrow-left',\n    iconPosition: 'prefix',\n  },\n  next: {\n    text: 'Next',\n    status: 'default',\n    icon: 'far fa-arrow-right',\n    iconPosition: 'suffix',\n  },\n  apply: {\n    text: 'Apply',\n    status: 'default',\n    icon: 'far fa-check-circle',\n    iconPosition: 'prefix',\n  },\n  submit: {\n    text: 'Submit',\n    status: 'default',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n  },\n  send: {\n    text: 'Send',\n    status: 'success',\n    icon: 'far fa-paper-plane',\n    iconPosition: 'prefix',\n  },\n  delete: {\n    text: 'Delete',\n    status: 'error',\n    icon: 'far fa-trash',\n    iconPosition: 'prefix',\n  },\n  cancel: {\n    text: 'Cancel',\n    status: 'error',\n    icon: 'far fa-times',\n    iconPosition: 'prefix',\n  },\n  decline: {\n    text: 'Decline',\n    status: 'error',\n    icon: 'far fa-ban',\n    iconPosition: 'prefix',\n  },\n  close: {\n    text: 'Close',\n    status: 'error',\n    icon: 'far fa-times-circle',\n    iconPosition: 'prefix',\n  },\n  archive: {\n    text: 'Archive',\n    status: 'error',\n    icon: 'far fa-folder-open',\n    iconPosition: 'prefix',\n  },\n  remove: {\n    text: 'Remove',\n    status: 'error',\n    icon: 'far fa-minus-circle',\n    iconPosition: 'prefix',\n  },\n  edit: {\n    text: 'Edit',\n    status: 'default',\n    icon: 'far fa-edit',\n    iconPosition: 'prefix',\n  },\n  export: {\n    text: 'Export',\n    status: 'default',\n    icon: 'far fa-sign-out',\n    iconPosition: 'prefix',\n  },\n  import: {\n    text: 'Import',\n    status: 'default',\n    icon: 'far fa-sign-in',\n    iconPosition: 'prefix',\n  },\n  filter: {\n    text: 'Filter',\n    status: 'default',\n    icon: 'far fa-filter',\n    iconPosition: 'prefix',\n  },\n  update: {\n    text: 'Update',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  reset: {\n    text: 'Reset',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  download: {\n    text: 'Download',\n    status: 'default',\n    icon: 'far fa-download',\n    iconPosition: 'prefix',\n  },\n};\n\nexport type ButtonVariant = keyof typeof variantOptions;\n",":host {\n  display: inline-flex;\n  position: relative;\n  height: fit-content;\n  width: fit-content;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n:host([position='first']) .bcm-button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([position='middle']) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last']) .bcm-button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n:host([position='first'].orientation-vertical) .bcm-button {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-top-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n:host([position='middle'].orientation-vertical) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last'].orientation-vertical) .bcm-button {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-bottom-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class BcmButton {\n  /** Defines the main visual style of the button */\n  @Prop()\n  kind: ButtonKind = 'primary';\n\n  /** Controls the button size */\n  @Prop()\n  size: ButtonSize = 'medium';\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status: ButtonStatus = 'default';\n\n  /** Predefined button variants */\n  @Prop()\n  variant?: ButtonVariant;\n\n  /** Button position in button group (first, middle, last) */\n  @Prop({ reflect: true })\n  position?: ButtonPosition;\n\n  /** Icon class name */\n  @Prop()\n  icon?: string;\n\n  /** Icon placement (prefix/suffix) */\n  @Prop()\n  iconPosition: IconPosition = 'prefix';\n\n  /** Icon-only button mode */\n  @Prop()\n  iconOnly = false;\n\n  /** Full width button */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML button type */\n  @Prop()\n  type: ButtonType = 'button';\n\n  /** Loading state */\n  @Prop()\n  loading = false;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Button text content */\n  @Prop()\n  text?: string;\n\n  /** Active state */\n  @Prop()\n  active = false;\n\n  /** Form association */\n  @Prop()\n  form: string;\n\n  @Prop()\n  value: string;\n\n  @Prop()\n  name: string;\n\n  /** Screen reader label */\n  @Prop()\n  label: string;\n\n  /** Expanded state for expandable content */\n  @Prop()\n  expanded?: string;\n\n  /** ID of controlled element */\n  @Prop()\n  controls: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmClick: EventEmitter<MouseEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.loading) {\n      this.bcmClick.emit(event);\n    }\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.bcmFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.bcmBlur.emit(event);\n  };\n\n  private get buttonText(): string {\n    return this.text || (this.variant && variantOptions[this.variant] ? variantOptions[this.variant].text : '');\n  }\n\n  private get buttonIcon(): { icon?: string; position: IconPosition } {\n    if (this.variant && variantOptions[this.variant]?.icon) {\n      return {\n        icon: variantOptions[this.variant].icon,\n        position: variantOptions[this.variant].iconPosition || 'prefix',\n      };\n    }\n\n    return {\n      icon: this.icon,\n      position: this.iconPosition,\n    };\n  }\n\n  private get buttonStatus(): ButtonStatus {\n    return this.variant && variantOptions[this.variant] ? variantOptions[this.variant].status : this.status;\n  }\n\n  private get buttonStyles() {\n    const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n    // These are the internal default styles based on component props (kind, status)\n    const kindStyleMap = {\n      primary: {\n        '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n        '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n        '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n      },\n      outline: {\n        '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      ghost: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      text: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n      },\n    };\n    const internalDefaultStyles = kindStyleMap[this.kind];\n\n    // These are the \"final\" CSS custom properties used by the component's styling.\n    // They use the \"--bcm-button-custom-...\" token if provided by the user,\n    // otherwise, they fall back to the internal \"--bcm-button-...\" style defined above.\n    const finalEffectiveStyles = {\n      '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,\n      '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,\n      '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,\n      '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,\n      '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,\n    };\n\n    // return kindStyleMap[this.kind];\n\n    return {\n      ...internalDefaultStyles, // Provides the fallback values like --bcm-button-text\n      ...finalEffectiveStyles, // Defines the --bcm-final-xxx tokens that handle the override logic\n    };\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n      variants: {\n        size: {\n          small: 'text-size-4 py-px px-2 min-h-6',\n          medium: 'text-size-5 py-0.5 px-3 min-h-8',\n          large: 'text-size-6 py-1 px-3 min-h-10',\n        },\n        kind: {\n          primary: 'kind-primary',\n          ghost: 'kind-ghost',\n          text: 'kind-text',\n          outline: 'kind-outline',\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n          false: [\n            'cursor-pointer',\n            'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',\n            'hover:bg-[--bcm-final-hover-bg-color]',\n            'active:bg-[--bcm-final-active-bg-color]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\n        },\n        position: {\n          first: 'position-first',\n          middle: 'position-middle',\n          last: 'position-last',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        kind: 'primary',\n        fullWidth: false,\n        disabled: false,\n        loading: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { icon, position } = this.buttonIcon;\n\n    return (\n      <Host>\n        <button\n          type={this.type}\n          disabled={this.disabled || this.loading}\n          aria-label={this.label}\n          aria-expanded={this.expanded}\n          aria-controls={this.controls}\n          aria-disabled={this.disabled}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          style={this.buttonStyles}\n          class={this.buttonClass({\n            size: this.size,\n            kind: this.kind,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n            loading: this.loading,\n            position: this.position,\n          })}\n        >\n          {this.loading && <slot name=\"loading\"></slot>}\n          <span>\n            <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n          <slot>{this.buttonText}</slot>\n          <span>\n            <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/bromcom-ui/bcm-checkbox.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-checkbox.entry.esm.js","sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n","import { Component, h, Prop, Element, ComponentInterface, EventEmitter, Event, Watch, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\n\n/**\n * @description A checkbox component that allows users to select or deselect an option.\n * It also supports an indeterminate state.\n */\n@Component({\n  tag: 'bcm-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class Checkbox implements ComponentInterface {\n  /** Reference to the host element */\n  @Element() el: HTMLElement;\n\n  /**\n   * Unique ID for the component. Automatically generated if not specified.\n   */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-checkbox');\n\n  /**\n   * Label text to display next to the checkbox\n   */\n  @Prop()\n  label?: string;\n\n  /**\n   * Name attribute for the checkbox when used in a form\n   */\n  @Prop()\n  name: string;\n\n  /**\n   * Determines if the checkbox is in an indeterminate state.\n   * This is useful when some items in a group of checkboxes are selected and others are not.\n   */\n  @Prop({ mutable: true })\n  indeterminate: boolean = false;\n\n  /**\n   * Size variant of the checkbox\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Determines if the checkbox is checked\n   */\n  @Prop({ mutable: true })\n  checked: boolean = false;\n\n  /**\n   * Indicates if the checkbox is in an error state.\n   * This affects the visual styling of the component.\n   */\n  @Prop()\n  error: boolean = false;\n\n  /**\n   * Determines if the checkbox is disabled\n   */\n  @Prop()\n  disabled: boolean = false;\n\n  /**\n   * Controls the position of the label relative to the checkbox\n   */\n  @Prop()\n  labelPosition: 'left' | 'right' = 'right';\n\n  /**\n   * Full width checkbox\n   */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * Internal state to track checked status\n   */\n  @State() internalChecked: boolean;\n\n  /**\n   * Event emitted when the checked state changes\n   */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmCheckboxChange',\n  })\n  bcmCheckboxChange: EventEmitter<{ element: any; checked: boolean }>;\n\n  /** Reference to the underlying input element */\n  private inputElement: HTMLInputElement;\n\n  /**\n   * Lifecycle method that runs before the component first renders.\n   * Initializes the internal checked state.\n   */\n  componentWillLoad() {\n    this.internalChecked = this.checked !== undefined ? this.checked : false;\n  }\n\n  /**\n   * Lifecycle method that runs after the component has rendered.\n   * Updates the indeterminate state of the input element.\n   */\n  componentDidLoad() {\n    this.updateIndeterminateState();\n  }\n\n  /**\n   * Watches for changes to the checked prop and updates the internal state\n   * @param newValue The new checked value\n   */\n  @Watch('checked')\n  syncCheckedProp(newValue: boolean | undefined) {\n    if (newValue !== undefined) {\n      this.internalChecked = newValue;\n    }\n  }\n\n  /**\n   * Watches for changes to indeterminate and internalChecked states\n   * Updates the input element accordingly\n   */\n  @Watch('indeterminate')\n  @Watch('internalChecked')\n  updateIndeterminateState() {\n    if (this.inputElement) {\n      this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n    }\n  }\n\n  /**\n   * Handles change events on the checkbox\n   * Updates state and emits the change event\n   */\n  private handleChange = () => {\n    if (this.disabled) return;\n    if (this.inputElement) {\n      this.inputElement.indeterminate = false;\n      this.indeterminate = false;\n      this.internalChecked = !this.internalChecked;\n      this.inputElement.checked = this.internalChecked;\n      this.bcmCheckboxChange.emit({\n        element: this.inputElement,\n        checked: this.internalChecked,\n      });\n    }\n  };\n\n  /**\n   * Returns the CSS custom properties based on component state\n   * @returns Object with CSS custom properties\n   */\n  private getStyles() {\n    const defaultStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n      '--border-color': 'var(--bcm-ui-color-border-default)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n      '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-color': 'var(--bcm-ui-color-border-error)',\n    };\n\n    const disabledStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--border-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n    };\n\n    return {\n      ...defaultStyles,\n      ...(this.error ? errorStyles : {}),\n      ...(this.disabled ? disabledStyles : {}),\n    };\n  }\n\n  /**\n   * Tailwind Variants definition for the component\n   * Configures styling based on component props\n   */\n  private classes = tv(\n    {\n      slots: {\n        container: 'flex items-center bcm-ui-element bcm-checkbox',\n        checkbox: [\n          'flex items-center justify-center rounded-sm',\n          'border border-solid border-[--border-color]',\n          'bg-[--unchecked-color]',\n          'transition-colors duration-200 ease-out',\n          'peer-checked:bg-[--checked-color]',\n          'peer-checked:border-[--checked-color]',\n          'peer-indeterminate:bg-[--checked-color]',\n          'peer-indeterminate:border-[--checked-color]',\n          'hover:border-[--hover-border-color]',\n          'hover:peer-checked:bg-[--hover-color]',\n          'hover:peer-indeterminate:bg-[--hover-color]',\n        ],\n        iconContainer: 'flex items-center justify-center',\n        label: 'select-none text-color',\n        hiddenInput: 'absolute w-0 h-0 opacity-0 peer',\n      },\n      variants: {\n        size: {\n          small: {\n            container: 'gap-2',\n            checkbox: 'size-3',\n            iconContainer: 'size-2 text-size-2',\n            label: 'text-size-4',\n            hiddenInput: 'size-3',\n          },\n          medium: {\n            container: 'gap-2.5',\n            checkbox: 'size-4',\n            iconContainer: 'size-[10px] text-size-3',\n            label: 'text-size-5',\n            hiddenInput: 'size-4',\n          },\n          large: {\n            container: 'gap-3',\n            checkbox: 'size-[18px]',\n            iconContainer: 'size-4 text-size-4',\n            label: 'text-size-6',\n            hiddenInput: 'size-[18px]',\n          },\n        },\n        disabled: {\n          true: {\n            container: 'cursor-not-allowed',\n            checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n            label: 'cursor-not-allowed text-color-disabled',\n            iconContainer: 'text-color-disabled',\n            hiddenInput: 'cursor-not-allowed',\n          },\n          false: {\n            container: 'cursor-pointer',\n            checkbox: 'cursor-pointer',\n            label: 'cursor-pointer text-color',\n            iconContainer: 'text-color-base',\n            hiddenInput: 'cursor-pointer',\n          },\n        },\n        labelPosition: {\n          left: {\n            container: 'flex-row-reverse',\n          },\n          right: {\n            container: 'flex-row',\n          },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        checked: false,\n        disabled: false,\n        error: false,\n        labelPosition: 'right',\n      },\n    },\n    { twMerge: false },\n  );\n\n  /**\n   * Renders the checkbox component\n   */\n  render() {\n    const { container, checkbox, iconContainer, label, hiddenInput } = this.classes({ size: this.size, disabled: this.disabled, labelPosition: this.labelPosition });\n    const internalId = this._id + '-internal-checkbox' || this.name;\n\n    return (\n      <div class={container()} style={this.getStyles()} part=\"checkbox-wrapper\">\n        <div class=\"relative inline-flex\">\n          <input\n            type=\"checkbox\"\n            role=\"checkbox\"\n            id={internalId}\n            name={this.name}\n            checked={this.internalChecked}\n            indeterminate={this.indeterminate}\n            disabled={this.disabled}\n            class={hiddenInput()}\n            aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n            aria-invalid={this.error}\n            aria-label={this.label || 'Checkbox'}\n            onChange={this.handleChange}\n            ref={el => (this.inputElement = el as HTMLInputElement)}\n          />\n          <div class={checkbox()} onClick={this.handleChange} part=\"checkbox\">\n            {this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n              </div>\n            )}\n            {this.indeterminate && !this.internalChecked && (\n              <div class={iconContainer()} part=\"icon\">\n                <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n              </div>\n            )}\n          </div>\n        </div>\n        <label htmlFor={internalId} class={label()} part=\"label\">\n          {this.label}\n        </label>\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-checkbox.entry.esm.js","sources":["src/components/checkbox/checkbox.css?tag=bcm-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  position: relative;\n  width: fit-content;\n  height: fit-content;\n  align-self: center;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n","import {\n  Component,\n  h,\n  Prop,\n  Element,\n  ComponentInterface,\n  EventEmitter,\n  Event,\n  Watch,\n  State,\n  AttachInternals\n} from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { generateId } from '../../utils/id/generate-id';\nimport { BaseChoiceControl } from '../_shared/form/base-choice-control';\n\n/**\n * @component BcmCheckbox\n * @description\n * A form-associated checkbox component representing a boolean choice.\n * Integrates with native HTML forms via ElementInternals while supporting\n * **three validation strategies** via `validation-mode`:\n *\n * - **`native`**\n *   - Participates in native browser constraint validation.\n *   - Sets the underlying input's `required`.\n *   - Browser may show native validation bubbles when submit/reportValidity happens.\n *\n * - **`silent`**\n *   - Does **not** set native `required` (prevents browser bubble).\n *   - Computes \"missing required\" internally and exposes it via `error` + `caption`.\n *   - UI errors are **gated**: shown only after `touched` or a form submit attempt.\n *\n * - **`none`**\n *   - Value-only mode: submits value but never becomes invalid.\n *\n * ## UI error gating (silent mode)\n * - `touched` becomes true after first user interaction\n * - `submitAttempted` becomes true when the parent form emits `submit`\n *\n * ## Value behavior\n * - When checked → submits `value` (default: `\"on\"`).\n * - When unchecked → submits no value (`null`).\n * - When disabled → no submission and no validity participation.\n *\n * ## Shadow Parts\n * - `checkbox`  → root container\n * - `control`   → visual checkbox box\n * - `icon`      → icon container (check or minus)\n * - `label`     → label text\n * - `caption`   → helper/error text (silent mode UI)\n * - `input`     → hidden native input\n *\n * @example Basic usage\n * <bcm-checkbox name=\"terms\" required>\n *   I agree to the terms and conditions\n * </bcm-checkbox>\n *\n * @example Silent validation (no native bubble)\n * <form>\n *   <bcm-checkbox name=\"newsletter\" required validation-mode=\"silent\">\n *     Subscribe to newsletter\n *   </bcm-checkbox>\n *   <button type=\"submit\">Submit</button>\n * </form>\n *\n * @example Value-only mode\n * <bcm-checkbox name=\"analytics\" validation-mode=\"none\">\n *   Allow analytics\n * </bcm-checkbox>\n */\n@Component({\n  tag: 'bcm-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n  formAssociated: true,\n})\nexport class Checkbox extends BaseChoiceControl implements ComponentInterface {\n  /** Host element */\n  @Element() el!: HTMLElement;\n\n  /** Form-associated internals (ElementInternals API) */\n  @AttachInternals() internals!: ElementInternals;\n\n  /**\n   * Unique ID for the component. Automatically generated if not specified.\n   * Used to bind the visible label to the internal input.\n   */\n  @Prop({ attribute: 'id', reflect: true })\n  _id?: string = generateId('bcm-checkbox');\n\n  /** Visible label text (optional). You can also use the default slot. */\n  @Prop() label?: string;\n\n  /**\n   * Indeterminate (mixed) state.\n   * Useful when a group selection is partially selected.\n   */\n  @Prop({ mutable: true }) indeterminate = false;\n\n  /** Size variant (affects control + typography). */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Visual error state.\n   * - In `silent` mode this can be managed internally.\n   * - In other modes you can set it externally as well.\n   */\n  @Prop({ mutable: true }) error = false;\n\n  /** Helper / error caption (silent mode UI) */\n  @Prop({ mutable: true }) caption?: string;\n\n  /** Label position relative to the checkbox control. */\n  @Prop() labelPosition: 'left' | 'right' = 'right';\n\n  /** Makes checkbox occupy full width (if your styles support it). */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /**\n   * Mirror state used to keep the native input synced.\n   * `checked` is owned by BaseChoiceControl.\n   */\n  @State() internalChecked = false;\n\n  /** Gate for silent-mode UI */\n  @State() private touched = false;\n\n  /** Gate for silent-mode UI */\n  @State() private submitAttempted = false;\n\n  /** Fired whenever the checked state changes. */\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmCheckboxChange',\n  })\n  bcmCheckboxChange!: EventEmitter<{ element: HTMLInputElement; checked: boolean }>;\n\n  /** Reference to the underlying native input. */\n  private inputElement!: HTMLInputElement;\n\n  // --------------------------------------------------\n  // Lifecycle\n  // --------------------------------------------------\n\n  componentWillLoad() {\n    this.internalChecked = this.checked;\n    // don't show UI errors on initial render\n    this.updateFormValueAndValidity({ setUi: false });\n  }\n\n  componentDidLoad() {\n    this.syncNativeInput();\n\n    const form = this.internals?.form;\n    if (form) {\n      form.addEventListener('submit', this.onFormSubmit, true);\n    }\n  }\n\n  disconnectedCallback() {\n    const form = this.internals?.form;\n    if (form) {\n      form.removeEventListener('submit', this.onFormSubmit, true);\n    }\n  }\n\n  private onFormSubmit = () => {\n    this.submitAttempted = true;\n    this.updateFormValueAndValidity({ setUi: true });\n  };\n\n  formResetCallback() {\n    super.formResetCallback();\n\n    this.internalChecked = false;\n    this.indeterminate = false;\n\n    // reset gating\n    this.touched = false;\n    this.submitAttempted = false;\n\n    // reset UI\n    this.error = false;\n    this.caption = undefined;\n\n    this.syncNativeInput();\n    this.updateFormValueAndValidity({ setUi: false });\n  }\n\n  // --------------------------------------------------\n  // Watchers\n  // --------------------------------------------------\n\n  @Watch('checked')\n  protected syncFromBase(newValue: boolean) {\n    this.internalChecked = newValue;\n    this.indeterminate = false;\n    this.syncNativeInput();\n  }\n\n  /** Keep native input in sync when indeterminate changes. */\n  @Watch('indeterminate')\n  protected onIndeterminateChange() {\n    this.syncNativeInput();\n  }\n\n  // --------------------------------------------------\n  // Native input syncing\n  // --------------------------------------------------\n\n  private syncNativeInput() {\n    if (!this.inputElement) return;\n\n    this.inputElement.checked = this.internalChecked;\n    this.inputElement.indeterminate = this.indeterminate && !this.internalChecked;\n    this.inputElement.disabled = this.disabled;\n\n    // ✅ prevent native bubble in silent/none:\n    // only native mode applies native \"required\"\n    this.inputElement.required = this.validationMode === 'native' && this.required;\n  }\n\n  // --------------------------------------------------\n  // Form internals integration\n  // --------------------------------------------------\n\n  protected updateFormValueAndValidity(opts?: { setUi?: boolean }) {\n    const setUi = opts?.setUi ?? true;\n    if (!this.internals) return;\n\n    // Disabled -> no value, no validity, no UI errors\n    if (this.disabled) {\n      this.internals.setFormValue(null);\n      this.internals.setValidity({});\n\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    // Always set submitted value (even if validation is off)\n    const formValue = this.checked ? this.value ?? 'on' : null;\n    this.internals.setFormValue(formValue);\n\n    // none -> never invalid\n    if (this.validationMode === 'none') {\n      this.internals.setValidity({});\n\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    const isMissing = this.required && !this.checked;\n\n    // silent -> no validity, only gated UI\n    if (this.validationMode === 'silent') {\n      this.internals.setValidity({});\n\n      if (setUi) {\n        const shouldShow = this.touched || this.submitAttempted;\n        this.error = shouldShow && isMissing;\n        this.caption = shouldShow && isMissing ? 'This field is required' : undefined;\n      }\n      return;\n    }\n\n    // native -> real validity participation\n    if (isMissing) {\n      this.internals.setValidity(\n        { valueMissing: true },\n        'This field is required',\n        this.inputElement ?? undefined,\n      );\n\n      // native mode uses browser UI; don't double-show component UI\n      if (setUi) {\n        this.error = false;\n        this.caption = undefined;\n      }\n      return;\n    }\n\n    this.internals.setValidity({});\n\n    if (setUi) {\n      this.error = false;\n      this.caption = undefined;\n    }\n  }\n\n  // --------------------------------------------------\n  // Interaction\n  // --------------------------------------------------\n\n  private handleChange = () => {\n    if (this.disabled) return;\n\n    if (!this.touched) this.touched = true;\n\n    // toggling clears indeterminate\n    this.indeterminate = false;\n\n    // toggle comes from BaseChoiceControl\n    this.toggleChecked();\n\n    // keep internal mirror in sync (base updates `checked`)\n    this.internalChecked = !!this.checked;\n\n    this.syncNativeInput();\n    this.updateFormValueAndValidity({ setUi: true });\n\n    this.bcmCheckboxChange.emit({\n      element: this.inputElement,\n      checked: this.checked,\n    });\n  };\n\n  // --------------------------------------------------\n  // Styles\n  // --------------------------------------------------\n\n  private getStyles() {\n    const defaultStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-primary-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-default-default)',\n      '--border-color': 'var(--bcm-ui-color-border-default)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-primary)',\n      '--hover-color': 'var(--bcm-ui-color-background-info-hover)',\n    };\n\n    const errorStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-error-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-palette-red-default)',\n      '--border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-error)',\n      '--hover-color': 'var(--bcm-ui-color-border-error)',\n    };\n\n    const disabledStyles = {\n      '--checked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--unchecked-color': 'var(--bcm-ui-color-background-disabled-default)',\n      '--border-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-color': 'var(--bcm-ui-color-border-disabled)',\n      '--hover-border-color': 'var(--bcm-ui-color-border-disabled)',\n    };\n\n    return {\n      ...defaultStyles,\n      ...(this.error ? errorStyles : {}),\n      ...(this.disabled ? disabledStyles : {}),\n    };\n  }\n\n  private classes = tv(\n    {\n      slots: {\n        root: 'bcm-ui-element bcm-checkbox flex flex-col',\n        row: 'flex items-center',\n        checkbox: [\n          'flex items-center justify-center rounded-sm',\n          'border border-solid border-[--border-color]',\n          'bg-[--unchecked-color]',\n          'transition-colors duration-200 ease-out',\n          'peer-checked:bg-[--checked-color]',\n          'peer-checked:border-[--checked-color]',\n          'peer-indeterminate:bg-[--checked-color]',\n          'peer-indeterminate:border-[--checked-color]',\n          'hover:border-[--hover-border-color]',\n          'hover:peer-checked:bg-[--hover-color]',\n          'hover:peer-indeterminate:bg-[--hover-color]',\n        ],\n        iconContainer: 'flex items-center justify-center',\n        label: 'select-none text-color',\n        hiddenInput: 'sr-only peer',\n        caption: 'mt-1 text-color-error font-normal',           // ✅ alt satır spacing\n      },\n      variants: {\n        size: {\n          small: {\n            row: 'gap-2',\n            checkbox: 'size-3',\n            iconContainer: 'size-2 text-size-2',\n            label: 'text-size-4',\n            hiddenInput: 'size-3',\n            caption: 'text-size-3',\n          },\n          medium: {\n            row: 'gap-2.5',\n            checkbox: 'size-4',\n            iconContainer: 'size-[10px] text-size-3',\n            label: 'text-size-5',\n            hiddenInput: 'size-4',\n            caption: 'text-size-4',\n          },\n          large: {\n            row: 'gap-3',\n            checkbox: 'size-[18px]',\n            iconContainer: 'size-4 text-size-4',\n            label: 'text-size-6',\n            hiddenInput: 'size-[18px]',\n            caption: 'text-size-5',\n          },\n        },\n        disabled: {\n          true: {\n            row: 'cursor-not-allowed',\n            checkbox: 'cursor-not-allowed hover:border-[--border-color] hover:bg-[--unchecked-color]',\n            label: 'cursor-not-allowed text-color-disabled',\n            iconContainer: 'text-color-disabled',\n            hiddenInput: 'cursor-not-allowed',\n          },\n          false: {\n            row: 'cursor-pointer',\n            checkbox: 'cursor-pointer',\n            label: 'cursor-pointer text-color',\n            iconContainer: 'text-color-base',\n            hiddenInput: 'cursor-pointer',\n          },\n        },\n        labelPosition: {\n          left: { row: 'flex-row-reverse' },\n          right: { row: 'flex-row' },\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        disabled: false,\n        labelPosition: 'right',\n      },\n    },\n    { twMerge: false },\n  );\n\n\n  // --------------------------------------------------\n  // Render\n  // --------------------------------------------------\n\n  render() {\n    const { root, row, checkbox, iconContainer, label, hiddenInput, caption } = this.classes({\n      size: this.size,\n      disabled: this.disabled,\n      labelPosition: this.labelPosition,\n    });\n\n    const internalId =\n      (this._id ? `${this._id}-internal-checkbox` : undefined) ?? this.name ?? 'bcm-checkbox';\n\n    return (\n      <div class={root()} style={this.getStyles()} part=\"checkbox\">\n        <div class={row()}>\n          <div class=\"relative inline-flex\">\n            <input\n              ref={el => (this.inputElement = el as HTMLInputElement)}\n              type=\"checkbox\"\n              role=\"checkbox\"\n              id={internalId}\n              name={this.name}\n              checked={this.internalChecked}\n              indeterminate={this.indeterminate}\n              disabled={this.disabled}\n              class={hiddenInput()}\n              aria-checked={this.internalChecked ? 'true' : this.indeterminate ? 'mixed' : 'false'}\n              aria-invalid={this.error}\n              aria-required={this.required}\n              aria-label={this.label || 'Checkbox'}\n              onChange={this.handleChange}\n              part=\"input\"\n            />\n\n            <div class={checkbox()} part=\"control\" onClick={() => this.inputElement?.click()}>\n              {this.internalChecked && (\n                <div class={iconContainer()} part=\"icon\">\n                  <bcm-icon name=\"fa-regular fa-check\"></bcm-icon>\n                </div>\n              )}\n\n              {this.indeterminate && !this.internalChecked && (\n                <div class={iconContainer()} part=\"icon\">\n                  <bcm-icon name=\"fa-regular fa-minus\"></bcm-icon>\n                </div>\n              )}\n            </div>\n          </div>\n\n          <label htmlFor={internalId} class={label()} part=\"label\">\n            <slot>{this.label}</slot>\n          </label>\n        </div>\n\n        {this.error && this.caption && (\n          <span class={caption()} part=\"caption\">\n            {this.caption}\n          </span>\n        )}\n      </div>\n    );\n  }\n\n}\n"],"names":[],"mappings":";;;;;AAAA,MAAM,WAAW,GAAG,g1GAAg1G;;MC6Ev1G,QAAS,GAAA,cAAQ,iBAAiB,CAAA;;;;;;;;;;;;;;;AAK1B,IAAA,SAAS;AAE5B;;;AAGG;AAEH,IAAA,GAAG,GAAY,UAAU,CAAC,cAAc,CAAC;;AAGjC,IAAA,KAAK;AAEb;;;AAGG;IACsB,aAAa,GAAG,KAAK;;IAGtC,IAAI,GAAiC,QAAQ;AAErD;;;;AAIG;IACsB,KAAK,GAAG,KAAK;;AAGb,IAAA,OAAO;;IAGxB,aAAa,GAAqB,OAAO;;IAIjD,SAAS,GAAG,KAAK;AAEjB;;;AAGG;IACM,eAAe,GAAG,KAAK;;IAGf,OAAO,GAAG,KAAK;;IAGf,eAAe,GAAG,KAAK;;AASxC,IAAA,iBAAiB;;AAGT,IAAA,YAAY;;;;IAMpB,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,OAAO;;QAEnC,IAAI,CAAC,0BAA0B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;;IAGnD,gBAAgB,GAAA;QACd,IAAI,CAAC,eAAe,EAAE;AAEtB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI;QACjC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;;;IAI5D,oBAAoB,GAAA;AAClB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,EAAE,IAAI;QACjC,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,CAAC;;;IAIvD,YAAY,GAAG,MAAK;AAC1B,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI;QAC3B,IAAI,CAAC,0BAA0B,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAClD,KAAC;IAED,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;AAEzB,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;AAC5B,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;AAG1B,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;AACpB,QAAA,IAAI,CAAC,eAAe,GAAG,KAAK;;AAG5B,QAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,QAAA,IAAI,CAAC,OAAO,GAAG,SAAS;QAExB,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,0BAA0B,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC;;;;;AAQzC,IAAA,YAAY,CAAC,QAAiB,EAAA;AACtC,QAAA,IAAI,CAAC,eAAe,GAAG,QAAQ;AAC/B,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;QAC1B,IAAI,CAAC,eAAe,EAAE;;;IAKd,qBAAqB,GAAA;QAC7B,IAAI,CAAC,eAAe,EAAE;;;;;IAOhB,eAAe,GAAA;QACrB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE;QAExB,IAAI,CAAC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC,eAAe;AAChD,QAAA,IAAI,CAAC,YAAY,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,eAAe;QAC7E,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ;;;AAI1C,QAAA,IAAI,CAAC,YAAY,CAAC,QAAQ,GAAG,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,IAAI,CAAC,QAAQ;;;;;AAOtE,IAAA,0BAA0B,CAAC,IAA0B,EAAA;AAC7D,QAAA,MAAM,KAAK,GAAG,IAAI,EAAE,KAAK,IAAI,IAAI;QACjC,IAAI,CAAC,IAAI,CAAC,SAAS;YAAE;;AAGrB,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACjB,YAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC;AACjC,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAE9B,IAAI,KAAK,EAAE;AACT,gBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;YAE1B;;;AAIF,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,GAAG,IAAI;AAC1D,QAAA,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,SAAS,CAAC;;AAGtC,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,MAAM,EAAE;AAClC,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAE9B,IAAI,KAAK,EAAE;AACT,gBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;YAE1B;;QAGF,MAAM,SAAS,GAAG,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;;AAGhD,QAAA,IAAI,IAAI,CAAC,cAAc,KAAK,QAAQ,EAAE;AACpC,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;YAE9B,IAAI,KAAK,EAAE;gBACT,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,eAAe;AACvD,gBAAA,IAAI,CAAC,KAAK,GAAG,UAAU,IAAI,SAAS;AACpC,gBAAA,IAAI,CAAC,OAAO,GAAG,UAAU,IAAI,SAAS,GAAG,wBAAwB,GAAG,SAAS;;YAE/E;;;QAIF,IAAI,SAAS,EAAE;AACb,YAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,EAAE,YAAY,EAAE,IAAI,EAAE,EACtB,wBAAwB,EACxB,IAAI,CAAC,YAAY,IAAI,SAAS,CAC/B;;YAGD,IAAI,KAAK,EAAE;AACT,gBAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,gBAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;YAE1B;;AAGF,QAAA,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,CAAC;QAE9B,IAAI,KAAK,EAAE;AACT,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;AAClB,YAAA,IAAI,CAAC,OAAO,GAAG,SAAS;;;;;;IAQpB,YAAY,GAAG,MAAK;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE;QAEnB,IAAI,CAAC,IAAI,CAAC,OAAO;AAAE,YAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;AAGtC,QAAA,IAAI,CAAC,aAAa,GAAG,KAAK;;QAG1B,IAAI,CAAC,aAAa,EAAE;;QAGpB,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;QAErC,IAAI,CAAC,eAAe,EAAE;QACtB,IAAI,CAAC,0BAA0B,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;AAEhD,QAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;YAC1B,OAAO,EAAE,IAAI,CAAC,YAAY;YAC1B,OAAO,EAAE,IAAI,CAAC,OAAO;AACtB,SAAA,CAAC;AACJ,KAAC;;;;IAMO,SAAS,GAAA;AACf,QAAA,MAAM,aAAa,GAAG;AACpB,YAAA,iBAAiB,EAAE,gDAAgD;AACnE,YAAA,mBAAmB,EAAE,gDAAgD;AACrE,YAAA,gBAAgB,EAAE,oCAAoC;AACtD,YAAA,sBAAsB,EAAE,oCAAoC;AAC5D,YAAA,eAAe,EAAE,2CAA2C;SAC7D;AAED,QAAA,MAAM,WAAW,GAAG;AAClB,YAAA,iBAAiB,EAAE,8CAA8C;AACjE,YAAA,mBAAmB,EAAE,oDAAoD;AACzE,YAAA,gBAAgB,EAAE,kCAAkC;AACpD,YAAA,sBAAsB,EAAE,kCAAkC;AAC1D,YAAA,eAAe,EAAE,kCAAkC;SACpD;AAED,QAAA,MAAM,cAAc,GAAG;AACrB,YAAA,iBAAiB,EAAE,iDAAiD;AACpE,YAAA,mBAAmB,EAAE,iDAAiD;AACtE,YAAA,gBAAgB,EAAE,qCAAqC;AACvD,YAAA,eAAe,EAAE,qCAAqC;AACtD,YAAA,sBAAsB,EAAE,qCAAqC;SAC9D;QAED,OAAO;AACL,YAAA,GAAG,aAAa;AAChB,YAAA,IAAI,IAAI,CAAC,KAAK,GAAG,WAAW,GAAG,EAAE,CAAC;AAClC,YAAA,IAAI,IAAI,CAAC,QAAQ,GAAG,cAAc,GAAG,EAAE,CAAC;SACzC;;IAGK,OAAO,GAAG,EAAE,CAClB;AACE,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,2CAA2C;AACjD,YAAA,GAAG,EAAE,mBAAmB;AACxB,YAAA,QAAQ,EAAE;gBACR,6CAA6C;gBAC7C,6CAA6C;gBAC7C,wBAAwB;gBACxB,yCAAyC;gBACzC,mCAAmC;gBACnC,uCAAuC;gBACvC,yCAAyC;gBACzC,6CAA6C;gBAC7C,qCAAqC;gBACrC,uCAAuC;gBACvC,6CAA6C;AAC9C,aAAA;AACD,YAAA,aAAa,EAAE,kCAAkC;AACjD,YAAA,KAAK,EAAE,wBAAwB;AAC/B,YAAA,WAAW,EAAE,cAAc;YAC3B,OAAO,EAAE,mCAAmC;AAC7C,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE;AACL,oBAAA,GAAG,EAAE,OAAO;AACZ,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,aAAa,EAAE,oBAAoB;AACnC,oBAAA,KAAK,EAAE,aAAa;AACpB,oBAAA,WAAW,EAAE,QAAQ;AACrB,oBAAA,OAAO,EAAE,aAAa;AACvB,iBAAA;AACD,gBAAA,MAAM,EAAE;AACN,oBAAA,GAAG,EAAE,SAAS;AACd,oBAAA,QAAQ,EAAE,QAAQ;AAClB,oBAAA,aAAa,EAAE,yBAAyB;AACxC,oBAAA,KAAK,EAAE,aAAa;AACpB,oBAAA,WAAW,EAAE,QAAQ;AACrB,oBAAA,OAAO,EAAE,aAAa;AACvB,iBAAA;AACD,gBAAA,KAAK,EAAE;AACL,oBAAA,GAAG,EAAE,OAAO;AACZ,oBAAA,QAAQ,EAAE,aAAa;AACvB,oBAAA,aAAa,EAAE,oBAAoB;AACnC,oBAAA,KAAK,EAAE,aAAa;AACpB,oBAAA,WAAW,EAAE,aAAa;AAC1B,oBAAA,OAAO,EAAE,aAAa;AACvB,iBAAA;AACF,aAAA;AACD,YAAA,QAAQ,EAAE;AACR,gBAAA,IAAI,EAAE;AACJ,oBAAA,GAAG,EAAE,oBAAoB;AACzB,oBAAA,QAAQ,EAAE,+EAA+E;AACzF,oBAAA,KAAK,EAAE,wCAAwC;AAC/C,oBAAA,aAAa,EAAE,qBAAqB;AACpC,oBAAA,WAAW,EAAE,oBAAoB;AAClC,iBAAA;AACD,gBAAA,KAAK,EAAE;AACL,oBAAA,GAAG,EAAE,gBAAgB;AACrB,oBAAA,QAAQ,EAAE,gBAAgB;AAC1B,oBAAA,KAAK,EAAE,2BAA2B;AAClC,oBAAA,aAAa,EAAE,iBAAiB;AAChC,oBAAA,WAAW,EAAE,gBAAgB;AAC9B,iBAAA;AACF,aAAA;AACD,YAAA,aAAa,EAAE;AACb,gBAAA,IAAI,EAAE,EAAE,GAAG,EAAE,kBAAkB,EAAE;AACjC,gBAAA,KAAK,EAAE,EAAE,GAAG,EAAE,UAAU,EAAE;AAC3B,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,QAAQ,EAAE,KAAK;AACf,YAAA,aAAa,EAAE,OAAO;AACvB,SAAA;AACF,KAAA,EACD,EAAE,OAAO,EAAE,KAAK,EAAE,CACnB;;;;IAOD,MAAM,GAAA;AACJ,QAAA,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,WAAW,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC;YACvF,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,QAAQ;YACvB,aAAa,EAAE,IAAI,CAAC,aAAa;AAClC,SAAA,CAAC;QAEF,MAAM,UAAU,GACd,CAAC,IAAI,CAAC,GAAG,GAAG,CAAA,EAAG,IAAI,CAAC,GAAG,CAAoB,kBAAA,CAAA,GAAG,SAAS,KAAK,IAAI,CAAC,IAAI,IAAI,cAAc;AAEzF,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,IAAI,EAAC,UAAU,EAAA,EAC1D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,GAAG,EAAE,EAAA,EACf,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,YAAY,GAAG,EAAsB,CAAC,EACvD,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,eAAe,EAC7B,aAAa,EAAE,IAAI,CAAC,aAAa,EACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,WAAW,EAAE,EACN,cAAA,EAAA,IAAI,CAAC,eAAe,GAAG,MAAM,GAAG,IAAI,CAAC,aAAa,GAAG,OAAO,GAAG,OAAO,kBACtE,IAAI,CAAC,KAAK,EACT,eAAA,EAAA,IAAI,CAAC,QAAQ,EAAA,YAAA,EAChB,IAAI,CAAC,KAAK,IAAI,UAAU,EACpC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAC3B,IAAI,EAAC,OAAO,EACZ,CAAA,EAEF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,QAAQ,EAAE,EAAE,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,MAAM,IAAI,CAAC,YAAY,EAAE,KAAK,EAAE,EAAA,EAC7E,IAAI,CAAC,eAAe,KACnB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EACtC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,qBAAqB,EAAA,CAAY,CAC5C,CACP,EAEA,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,eAAe,KAC1C,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,aAAa,EAAE,EAAE,IAAI,EAAC,MAAM,EAAA,EACtC,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,qBAAqB,GAAY,CAC5C,CACP,CACG,CACF,EAEN,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,IAAI,EAAC,OAAO,EAAA,EACtD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,CACJ,EAEL,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,OAAO,KACzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,OAAO,EAAE,EAAE,IAAI,EAAC,SAAS,EACnC,EAAA,IAAI,CAAC,OAAO,CACR,CACR,CACG;;;;;;;;;;;;;;;"}

package/dist/bromcom-ui/bcm-chip.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-chip.entry.esm.js","sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary';\n\nexport const STATUS_COLORS = {\n  info: 'blue',\n  error: 'red',\n  warning: 'amber',\n  success: 'green',\n  primary: 'primary',\n} as const;\n",":host {\n  display: inline-block;\n  --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-chip-text: var(--bcm-ui-color-text-default);\n  --bcm-chip-border: var(--bcm-ui-color-border-default);\n  --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n  --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n  --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n *   Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n *   Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n  tag: 'bcm-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n  /** Chip size variant */\n  @Prop()\n  size?: ChipSize = 'medium';\n\n  /** Chip style variant */\n  @Prop()\n  kind?: ChipKind = 'filled';\n\n  /** Chip status */\n  @Prop()\n  status?: ChipStatus = 'default';\n\n  /** Whether chip can be dismissed */\n  @Prop()\n  dismissible?: boolean = false;\n\n  /** Whether chip is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** Chip color variant */\n  @Prop()\n  color?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmDismiss: EventEmitter<void>;\n\n  private chipClass = tv(\n    {\n      base: [\n        'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n        'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n        'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n      ],\n      variants: {\n        size: {\n          small: 'small py-px text-size-3',\n          medium: 'medium py-0.5 text-size-4',\n          large: 'large py-1 text-size-5',\n        },\n        kind: {\n          filled: 'filled border-transparent',\n          outlined: 'outlined',\n          text: 'text border-none',\n        },\n        disabled: {\n          true: 'cursor-not-allowed',\n        },\n      },\n    },\n    { twMerge: false },\n  );\n\n  private get chipStyle() {\n    let _color = this.color;\n\n    if (this.disabled) {\n      return {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      };\n    }\n\n    if (this.status !== 'default') {\n      _color = STATUS_COLORS[this.status];\n    }\n\n    const styles = {\n      filled: {\n        '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n    };\n\n    const defaultStyles = {\n      filled: {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n    };\n\n    return _color ? styles[this.kind] : defaultStyles[this.kind];\n  }\n\n  private handleDismiss() {\n    if (!this.disabled) {\n      this.bcmDismiss.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        style={this.chipStyle}\n        class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n        {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"bcm-chip.entry.esm.js","sources":["src/components/chip/types.ts","src/components/chip/chip.css?tag=bcm-chip&encapsulation=shadow","src/components/chip/chip.component.tsx"],"sourcesContent":["export type ChipSize = 'small' | 'medium' | 'large';\nexport type ChipKind = 'filled' | 'outlined' | 'text';\nexport type ChipStatus = 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary';\n\nexport const STATUS_COLORS = {\n  info: 'blue',\n  error: 'red',\n  warning: 'amber',\n  success: 'green',\n  primary: 'primary',\n} as const;\n",":host {\n  display: inline-block;\n  --bcm-chip-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-chip-text: var(--bcm-ui-color-text-default);\n  --bcm-chip-border: var(--bcm-ui-color-border-default);\n  --bcm-chip-hover-bg: var(--bcm-ui-color-background-default-hover);\n  --bcm-chip-active-bg: var(--bcm-ui-color-background-default-active);\n  --bcm-chip-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { ChipKind, ChipSize, ChipStatus, STATUS_COLORS } from './types';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BcmChip\n * @description A versatile chip component that can be used to display compact pieces of information, filters, or actions.\n * Supports different sizes, styles (filled, outlined, text), statuses, and can be dismissible.\n *\n * @example\n * <bcm-chip size=\"medium\" kind=\"filled\" status=\"success\">\n *   Success Chip\n * </bcm-chip>\n *\n * @example Dismissible chip\n * <bcm-chip dismissible={true} onDismiss={() => handleDismiss()}>\n *   Dismissible Chip\n * </bcm-chip>\n *\n * @prop {ChipSize} size - Defines the size of the chip: 'small' | 'medium' | 'large'\n * @prop {ChipKind} kind - Defines the visual style: 'filled' | 'outlined' | 'text'\n * @prop {ChipStatus} status - Defines the status color: 'info' | 'error' | 'warning' | 'success' | 'default' | 'primary'\n * @prop {boolean} dismissible - Whether the chip can be dismissed\n * @prop {boolean} disabled - Whether the chip is disabled\n * @prop {string} color - Custom color override for the chip\n *\n * @event {EventEmitter<void>} dismiss - Emitted when the dismiss button is clicked\n *\n * @csspart chip - The root chip element\n * @csspart dismiss-icon - The dismiss button icon\n */\n\n@Component({\n  tag: 'bcm-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class BcmChip implements ComponentInterface {\n  /** Chip size variant */\n  @Prop()\n  size?: ChipSize = 'medium';\n\n  /** Chip style variant */\n  @Prop()\n  kind?: ChipKind = 'filled';\n\n  /** Chip status */\n  @Prop()\n  status?: ChipStatus = 'default';\n\n  /** Whether chip can be dismissed */\n  @Prop()\n  dismissible?: boolean = false;\n\n  /** Whether chip is disabled */\n  @Prop()\n  disabled?: boolean = false;\n\n  /** Chip color variant */\n  @Prop()\n  color?: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmDismiss: EventEmitter<void>;\n\n  private chipClass = tv(\n    {\n      base: [\n        'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',\n        'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',\n        'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',\n      ],\n      variants: {\n        size: {\n          small: 'small py-px text-size-3',\n          medium: 'medium py-0.5 text-size-4',\n          large: 'large py-1 text-size-5',\n        },\n        kind: {\n          filled: 'filled border-transparent',\n          outlined: 'outlined',\n          text: 'text border-none',\n        },\n        disabled: {\n          true: 'cursor-not-allowed',\n        },\n      },\n    },\n    { twMerge: false },\n  );\n\n  private get chipStyle() {\n    let _color = this.color;\n\n    if (this.disabled) {\n      return {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',\n      };\n    }\n\n    if (this.status !== 'default') {\n      _color = STATUS_COLORS[this.status];\n    }\n\n    const styles = {\n      filled: {\n        '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,\n        '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,\n      },\n    };\n\n    const defaultStyles = {\n      filled: {\n        '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      outlined: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n      text: {\n        '--bcm-chip-bg': 'transparent',\n        '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',\n        '--bcm-chip-border': 'transparent',\n        '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',\n      },\n    };\n\n    return _color ? styles[this.kind] : defaultStyles[this.kind];\n  }\n\n  private handleDismiss() {\n    if (!this.disabled) {\n      this.bcmDismiss.emit();\n    }\n  }\n\n  render() {\n    return (\n      <div\n        style={this.chipStyle}\n        class={this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled })}\n        role=\"button\"\n        aria-disabled={this.disabled ? 'true' : 'false'}\n      >\n        <slot></slot>\n        {this.dismissible && <bcm-icon onClick={() => this.handleDismiss()} class=\"cursor-pointer\" icon-name=\"fa-regular fa-xmark\" aria-label=\"Dismiss chip\"></bcm-icon>}\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/bromcom-ui/bcm-divider.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"bcm-divider.entry.esm.js","sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n */\n@Component({\n  tag: 'bcm-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * @prop {('horizontal'|'vertical')} direction\n   * @description Determines the orientation of the divider\n   * @default 'horizontal'\n   * @example\n   * <bcm-divider direction=\"vertical\" />\n   */\n  @Prop()\n  direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * @prop {('solid'|'dashed'|'dotted')} variant\n   * @description Sets the border style of the divider\n   * @default 'solid'\n   * @example\n   * <bcm-divider variant=\"dashed\" />\n   */\n  @Prop()\n  variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n  /**\n   * @prop {('small'|'medium'|'large')} size\n   * @description Controls the thickness of the divider\n   * @default 'medium'\n   * @values\n   * - small: 1px border\n   * - medium: 2px border\n   * - large: 4px border\n   * @example\n   * <bcm-divider size=\"large\" />\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  private dividerClass = tv(\n    {\n      base: 'border-[--bcm-divider-border]',\n      variants: {\n        direction: {\n          horizontal: 'w-full border-t',\n          vertical: 'h-full border-l',\n        },\n        variant: {\n          solid: 'border-solid',\n          dashed: 'border-dashed',\n          dotted: 'border-dotted',\n        },\n        size: {\n          small: 'border-[1px]',\n          medium: 'border-2',\n          large: 'border-4',\n        },\n      },\n      defaultVariants: {\n        direction: 'horizontal',\n        variant: 'solid',\n        size: 'medium',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation={this.direction}\n        class={this.dividerClass({\n          direction: this.direction,\n          variant: this.variant,\n          size: this.size,\n        })}\n      ></div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,yrBAAyrB;;MCe/rB,OAAO,GAAA,MAAA;AALpB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAME;;;;;;AAMG;AAEH,QAAA,IAAS,CAAA,SAAA,GAA8B,YAAY;AAEnD;;;;;;AAMG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAkC,OAAO;AAEhD;;;;;;;;;;AAUG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAErC,QAAA,IAAY,CAAA,YAAA,GAAG,EAAE,CACvB;AACE,YAAA,IAAI,EAAE,+BAA+B;AACrC,YAAA,QAAQ,EAAE;AACR,gBAAA,SAAS,EAAE;AACT,oBAAA,UAAU,EAAE,iBAAiB;AAC7B,oBAAA,QAAQ,EAAE,iBAAiB;AAC5B,iBAAA;AACD,gBAAA,OAAO,EAAE;AACP,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,eAAe;AACvB,oBAAA,MAAM,EAAE,eAAe;AACxB,iBAAA;AACD,gBAAA,IAAI,EAAE;AACJ,oBAAA,KAAK,EAAE,cAAc;AACrB,oBAAA,MAAM,EAAE,UAAU;AAClB,oBAAA,KAAK,EAAE,UAAU;AAClB,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,SAAS,EAAE,YAAY;AACvB,gBAAA,OAAO,EAAE,OAAO;AAChB,gBAAA,IAAI,EAAE,QAAQ;AACf,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAeF;IAbC,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EACE,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,EAAA,CACG;;;;;;;"}
+{"version":3,"file":"bcm-divider.entry.esm.js","sources":["src/components/divider/divider.css?tag=bcm-divider&encapsulation=shadow","src/components/divider/divider.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  --bcm-divider-border: var(--bcm-ui-color-border-default);\n}\n","import { Component, ComponentInterface, Prop, h } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n/**\n * @component BCM Divider\n * @description\n * A versatile divider component that creates a visual separation between content.\n * It supports horizontal or vertical orientation with customizable styles and sizes.\n * The component uses CSS variables for theming and Tailwind for styling.\n */\n@Component({\n  tag: 'bcm-divider',\n  styleUrl: 'divider.css',\n  shadow: true,\n})\nexport class Divider implements ComponentInterface {\n  /**\n   * @prop {('horizontal'|'vertical')} direction\n   * @description Determines the orientation of the divider\n   * @default 'horizontal'\n   * @example\n   * <bcm-divider direction=\"vertical\" />\n   */\n  @Prop()\n  direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * @prop {('solid'|'dashed'|'dotted')} variant\n   * @description Sets the border style of the divider\n   * @default 'solid'\n   * @example\n   * <bcm-divider variant=\"dashed\" />\n   */\n  @Prop()\n  variant: 'solid' | 'dashed' | 'dotted' = 'solid';\n\n  /**\n   * @prop {('small'|'medium'|'large')} size\n   * @description Controls the thickness of the divider\n   * @default 'medium'\n   * @values\n   * - small: 1px border\n   * - medium: 2px border\n   * - large: 4px border\n   * @example\n   * <bcm-divider size=\"large\" />\n   */\n  @Prop()\n  size: 'small' | 'medium' | 'large' = 'medium';\n\n  private dividerClass = tv(\n    {\n      base: 'border-[--bcm-divider-border]',\n      variants: {\n        direction: {\n          horizontal: 'w-full border-t',\n          vertical: 'h-full border-l',\n        },\n        variant: {\n          solid: 'border-solid',\n          dashed: 'border-dashed',\n          dotted: 'border-dotted',\n        },\n        size: {\n          small: 'border-[1px]',\n          medium: 'border-2',\n          large: 'border-4',\n        },\n      },\n      defaultVariants: {\n        direction: 'horizontal',\n        variant: 'solid',\n        size: 'medium',\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        role=\"separator\"\n        aria-orientation={this.direction}\n        class={this.dividerClass({\n          direction: this.direction,\n          variant: this.variant,\n          size: this.size,\n        })}\n      ></div>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,UAAU,GAAG,yrBAAyrB;;MCe/rB,OAAO,GAAA,MAAA;;;;AAClB;;;;;;AAMG;IAEH,SAAS,GAA8B,YAAY;AAEnD;;;;;;AAMG;IAEH,OAAO,GAAkC,OAAO;AAEhD;;;;;;;;;;AAUG;IAEH,IAAI,GAAiC,QAAQ;IAErC,YAAY,GAAG,EAAE,CACvB;AACE,QAAA,IAAI,EAAE,+BAA+B;AACrC,QAAA,QAAQ,EAAE;AACR,YAAA,SAAS,EAAE;AACT,gBAAA,UAAU,EAAE,iBAAiB;AAC7B,gBAAA,QAAQ,EAAE,iBAAiB;AAC5B,aAAA;AACD,YAAA,OAAO,EAAE;AACP,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,MAAM,EAAE,eAAe;AACvB,gBAAA,MAAM,EAAE,eAAe;AACxB,aAAA;AACD,YAAA,IAAI,EAAE;AACJ,gBAAA,KAAK,EAAE,cAAc;AACrB,gBAAA,MAAM,EAAE,UAAU;AAClB,gBAAA,KAAK,EAAE,UAAU;AAClB,aAAA;AACF,SAAA;AACD,QAAA,eAAe,EAAE;AACf,YAAA,SAAS,EAAE,YAAY;AACvB,YAAA,OAAO,EAAE,OAAO;AAChB,YAAA,IAAI,EAAE,QAAQ;AACf,SAAA;KACF,EACD;AACE,QAAA,OAAO,EAAE,KAAK;AACf,KAAA,CACF;IAED,MAAM,GAAA;QACJ,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,WAAW,EACE,kBAAA,EAAA,IAAI,CAAC,SAAS,EAChC,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC;gBACvB,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB,CAAC,EAAA,CACG;;;;;;;"}