bromcom-ui-next 0.1.30 → 0.1.31

package/dist/collection/components/accordion/accordion.css

@@ -1 +1 @@
-.block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.hidden{display:none}.w-full{width:100%}.min-w-max{min-width:max-content}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.text-wrap{text-wrap:wrap}.rounded-\[--bcm-accordion-radius\]{border-radius:var(--bcm-accordion-radius)}.bg-\[--bcm-accordion-bg\]{background-color:var(--bcm-accordion-bg)}.bg-\[--bcm-accordion-footer-bg\]{background-color:var(--bcm-accordion-footer-bg)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\[--bcm-accordion-text\]{color:var(--bcm-accordion-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}
+.block{display:block}.flex{display:flex}.border{border-width:1px}:host{--bcm-accordion-bg:var(--bcm-ui-color-background-basic-panel);--bcm-accordion-content-bg:var(--bcm-ui-color-background-basic-base);--bcm-accordion-text:var(--bcm-ui-color-text-header);--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;--bcm-accordion-footer-bg:var(--bcm-ui-color-background-default-default);display:block;width:100%}:host(:not([group])) .accordion-container{border:1px solid var(--bcm-accordion-border);border-radius:var(--bcm-accordion-radius)}:host([group]) .accordion-container{border-bottom:1px solid var(--bcm-accordion-border);border-radius:0}:host([group]:last-of-type) .accordion-container{border-bottom:none}:host([group]:first-of-type) .accordion-container{border-top-left-radius:var(--bcm-accordion-radius);border-top-right-radius:var(--bcm-accordion-radius)}:host([group]:last-of-type) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}:host(:not([group])) .accordion-footer{border-bottom-left-radius:var(--bcm-accordion-radius);border-bottom-right-radius:var(--bcm-accordion-radius)}::slotted([slot=title]){align-items:center;display:flex;flex-direction:row;gap:10px}::slotted([slot=actions]){align-items:center;display:flex;flex-direction:row;gap:12px}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.hidden{display:none}.w-full{width:100%}.min-w-max{min-width:max-content}.rotate-0{--tw-rotate:0deg}.rotate-0,.rotate-180{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.rotate-180{--tw-rotate:180deg}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.flex-nowrap{flex-wrap:nowrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.overflow-hidden{overflow:hidden}.text-wrap{text-wrap:wrap}.rounded-\[--bcm-accordion-radius\]{border-radius:var(--bcm-accordion-radius)}.bg-\[--bcm-accordion-bg\]{background-color:var(--bcm-accordion-bg)}.bg-\[--bcm-accordion-footer-bg\]{background-color:var(--bcm-accordion-footer-bg)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-normal{font-weight:400}.font-semibold{font-weight:600}.text-\[--bcm-accordion-text\]{color:var(--bcm-accordion-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-transform{transition-duration:.15s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}

package/dist/collection/components/accordion-group/accordion-group.component.js

@@ -58,23 +58,14 @@ import { h } from "@stencil/core";
 * @css {string} --bcm-accordion-radius - Border radius of the accordion group
 */
 export class BcmAccordionGroup {
-    constructor() {
-        /** Controls whether multiple accordions can be expanded simultaneously */
-        this.multi = false;
-        /** Array of accordion elements within the group */
-        this.accordionItems = [];
-        /**
-         * Updates the accordion items array when slot content changes
-         */
-        this.handleSlotChange = () => {
-            this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));
-            this.setGroupBehavior();
-            // Validate accordion items
-            if (this.accordionItems.length === 0) {
-                console.warn('No accordion items found in accordion group');
-            }
-        };
-    }
+    /** Reference to the host element */
+    host;
+    /** Controls whether multiple accordions can be expanded simultaneously */
+    multi = false;
+    /** Array of accordion elements within the group */
+    accordionItems = [];
+    /** Event emitted when any accordion's expanded state changes */
+    bcmAccordionGroupChange;
     /**
      * Expands all accordions in the group
      * Only available when multi=true
@@ -106,12 +97,23 @@ export class BcmAccordionGroup {
             item.group = true;
         });
     }
+    /**
+     * Updates the accordion items array when slot content changes
+     */
+    handleSlotChange = () => {
+        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));
+        this.setGroupBehavior();
+        // Validate accordion items
+        if (this.accordionItems.length === 0) {
+            console.warn('No accordion items found in accordion group');
+        }
+    };
     /**
      * Handles state changes of individual accordions
      */
     handleAccordionChange(event) {
         this.handleSlotChange();
-        const { expanded, source } = event === null || event === void 0 ? void 0 : event.detail;
+        const { expanded, source } = event?.detail;
         if (!this.multi) {
             this.accordionItems.forEach(item => {
                 if (item !== source) {

package/dist/collection/components/accordion-group/accordion-group.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-group.component.js","sourceRoot":"","sources":["../../../src/components/accordion-group/accordion-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["\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}"]}
+{"version":3,"file":"accordion-group.component.js","sourceRoot":"","sources":["../../../src/components/accordion-group/accordion-group.component.tsx"],"names":[],"mappings":"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","sourcesContent":["\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}"]}

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

@@ -5,18 +5,17 @@ import { tv } from "../../utils/tv";
  * @class BcmAlert
  */
 export class BcmAlert {
-    constructor() {
-        /** Alert status type */
-        this.status = 'default';
-        /** Alert size variant */
-        this.size = 'medium';
-        /** Alert style variant */
-        this.kind = 'filled';
-        /** Whether alert can be dismissed */
-        this.dismissible = true;
-        /** Whether to show status icon */
-        this.showStatusIcon = true;
-    }
+    /** Alert status type */
+    status = 'default';
+    /** Alert size variant */
+    size = 'medium';
+    /** Alert style variant */
+    kind = 'filled';
+    /** Whether alert can be dismissed */
+    dismissible = true;
+    /** Whether to show status icon */
+    showStatusIcon = true;
+    bcmDismiss;
     /**
      * Handles alert dismissal
      * @private
@@ -36,7 +35,7 @@ export class BcmAlert {
     get alertClass() {
         return tv({
             slots: {
-                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',
+                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',
                 section: 'flex items-center gap-2',
             },
             variants: {
@@ -71,19 +70,18 @@ export class BcmAlert {
             success: 'var(--bcm-ui-color-text-success)',
             default: 'var(--bcm-ui-color-text-default)',
         };
-        let filleStyle = {
-            '--bcm-alert-bg': colorStatus[this.status],
-            '--bcm-alert-text': textStatusColor[this.status],
-        };
-        let textStyle = {
+        const statusKey = this.status in colorStatus ? this.status : 'default';
+        return this.kind === 'filled' ? {
+            '--bcm-alert-bg': colorStatus[statusKey],
+            '--bcm-alert-text': textStatusColor[statusKey],
+        } : {
             '--bcm-alert-bg': 'transparent',
-            '--bcm-alert-text': textStatusColor[this.status],
+            '--bcm-alert-text': textStatusColor[statusKey],
         };
-        return this.kind === 'filled' ? filleStyle : textStyle;
     }
     render() {
         const { base, section } = this.alertClass({ size: this.size });
-        return (h("div", { key: '9dcbe88559e8b9712b8219937ea24bba36037333', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: base(), style: this.alertStyles }, h("div", { key: '5bc76ccfc1ec526c2c0b5beaf23faecc9827133a', class: section() }, this.showStatusIcon && h("bcm-icon", { key: '37522118f8a80ea54304d2ed1644a553cb045cf1', "icon-name": this.getStatusIcon() }), h("slot", { key: '1a1747f06e8be0352ef06be738ee8ef00eb6f270' })), h("div", { key: '18f05b5aa6a8c907eb2a2154a42249ddf2c87d19', class: section() }, h("div", { key: '6a02471500a0e05189eafcb98896fb13ffe0779c', part: "action" }, h("slot", { key: '9dcf26495e24c64ea1a542afe6a7ee2c88ed62ba', name: "action" })), h("span", { key: '82adca87c8dc1fd681a547438acf8db9fdc00f6c', part: "icon" }, this.dismissible && h("bcm-icon", { key: 'a68a3fe2422c2b9125b1e114c61960beab8ae7ee', onClick: () => this.onDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark" })))));
+        return (h("div", { key: '9a850444b4bf1cf19988e8ec3231ba9841b64434', role: "alert", "aria-live": "assertive", "aria-atomic": "true", class: base(), style: this.alertStyles }, h("div", { key: '728538fac235e8a9778d9cbf0af44e9cec2d225a', class: section() + " flex-1 min-w-0" }, this.showStatusIcon && h("bcm-icon", { key: 'ed7975a709372ffce93945ec26bf8a9ef233da78', "icon-name": this.getStatusIcon() }), h("div", { key: 'cc455de5ddf104eadd827e6e9124551694994c0f', class: "min-w-0" }, h("slot", { key: '3f8019ac16f41796374eeaf7c7c87d728c5211e5' }))), h("div", { key: '29ec075e042b61199340fcafde06a7f72c35e72d', class: section() + " flex-shrink-0" }, h("div", { key: 'e754fc3d78c60376db4bd54c6a2f84617ff94ae7', part: "action" }, h("slot", { key: '1a7b8139b497ad750d1b204149fa264e73b00d6b', name: "action" })), h("span", { key: '6287c52814354308a992bde5b50e3f2cd061dcdb', part: "icon" }, this.dismissible && h("bcm-icon", { key: '342f3cac9ed4c2e4e28cab0d494c65e6b53027e8', onClick: () => this.onDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark" })))));
     }
     static get is() { return "bcm-alert"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"alert.component.js","sourceRoot":"","sources":["../../../src/components/alert/alert.component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE5F,OAAO,EAAE,EAAE,EAAE,MAAM,WAAW,CAAC;AAE/B;;;GAGG;AAMH,MAAM,OAAO,QAAQ;IALrB;QAME,wBAAwB;QAExB,WAAM,GAAiB,SAAS,CAAC;QAEjC,yBAAyB;QAEzB,SAAI,GAAe,QAAQ,CAAC;QAE5B,0BAA0B;QAE1B,SAAI,GAAe,QAAQ,CAAC;QAE5B,qCAAqC;QAErC,gBAAW,GAAa,IAAI,CAAC;QAE7B,kCAAkC;QAElC,mBAAc,GAAa,IAAI,CAAC;KAgGjC;IA5FC;;;OAGG;IACK,SAAS;QACf,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;IACzB,CAAC;IAEO,aAAa;QACnB,MAAM,UAAU,GAAG;YACjB,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,4BAA4B;SACtC,CAAC;QACF,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACjC,CAAC;IAED,IAAY,UAAU;QACpB,OAAO,EAAE,CACP;YACE,KAAK,EAAE;gBACL,IAAI,EAAE,+JAA+J;gBACrK,OAAO,EAAE,yBAAyB;aACnC;YACD,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE;wBACL,IAAI,EAAE,oBAAoB;qBAC3B;oBACD,MAAM,EAAE;wBACN,IAAI,EAAE,kBAAkB;qBACzB;oBACD,KAAK,EAAE;wBACL,IAAI,EAAE,oBAAoB;qBAC3B;iBACF;aACF;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;IACJ,CAAC;IAED,IAAY,WAAW;QACrB,IAAI,WAAW,GAAG;YAChB,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,OAAO,EAAE,uDAAuD;YAChE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,qDAAqD;SAC/D,CAAC;QAEF,IAAI,eAAe,GAAG;YACpB,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,gCAAgC;YACvC,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;SAC5C,CAAC;QAEF,IAAI,UAAU,GAAG;YACf,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACjD,CAAC;QAEF,IAAI,SAAS,GAAG;YACd,gBAAgB,EAAE,aAAa;YAC/B,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACjD,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC;IACzD,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,OAAO,CACL,4DAAK,IAAI,EAAC,OAAO,eAAW,WAAW,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW;YAC/F,4DAAK,KAAK,EAAE,OAAO,EAAE;gBAClB,IAAI,CAAC,cAAc,IAAI,8EAAqB,IAAI,CAAC,aAAa,EAAE,GAAa;gBAC9E,8DAAa,CACT;YACN,4DAAK,KAAK,EAAE,OAAO,EAAE;gBACnB,4DAAK,IAAI,EAAC,QAAQ;oBAChB,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,IAAI,iEAAU,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,gBAAgB,eAAW,qBAAqB,GAAY,CAAQ,CACxJ,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}
+{"version":3,"file":"alert.component.js","sourceRoot":"","sources":["../../../src/components/alert/alert.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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}"]}

package/dist/collection/components/alert/alert.css

@@ -1 +1 @@
-:host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:inline-block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.flex{display:flex}.w-full{width:100%}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.rounded-\[--bcm-alert-radius\]{border-radius:var(--bcm-alert-radius)}.bg-\[--bcm-alert-bg\]{background-color:var(--bcm-alert-bg)}.px-3{padding-left:.75rem;padding-right:.75rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\[--bcm-alert-text\]{color:var(--bcm-alert-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
+.flex{display:flex}:host{--bcm-alert-bg:var(--bcm-ui-color-background-default-default);--bcm-alert-text:var(--bcm-ui-color-text-default);--bcm-alert-radius:6px;display:flex;width:100%}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.relative{position:relative}.hidden{display:none}.size-4{height:1rem;width:1rem}.size-5{height:1.25rem;width:1.25rem}.size-8{height:2rem;width:2rem}.h-1\.5{height:.375rem}.h-10{height:2.5rem}.h-full{height:100%}.w-\[50px\]{width:50px}.w-full{width:100%}.min-w-0{min-width:0}.min-w-\[3ch\]{min-width:3ch}.max-w-64{max-width:16rem}.flex-1{flex:1 1 0%}.flex-shrink{flex-shrink:1}.flex-shrink-0,.shrink-0{flex-shrink:0}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.select-none{user-select:none}.appearance-none{appearance:none}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.overflow-hidden,.truncate{overflow:hidden}.truncate{text-overflow:ellipsis;white-space:nowrap}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.border{border-width:1px}.border-dashed{border-style:dashed}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.border-color-primary{border-color:var(--bcm-ui-color-border-primary)}.bg-color-basic-masterpage{background-color:var(--bcm-ui-color-background-basic-masterpage)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-disabled{background-color:var(--bcm-ui-color-background-disabled-default)}.bg-color-primary{background-color:var(--bcm-ui-color-background-primary-default)}.bg-color-soft-blue{background-color:var(--bcm-ui-color-background-soft-blue-default)}.bg-transparent{background-color:transparent}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.py-4{padding-bottom:1rem;padding-top:1rem}.text-left{text-align:left}.text-center{text-align:center}.text-right{text-align:right}.text-size-10{font-size:var(--bcm-ui-font-size-10,36px);line-height:var(--bcm-ui-line-height-10,44px)}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-8{font-size:var(--bcm-ui-font-size-8,24px);line-height:var(--bcm-ui-line-height-8,32px)}.font-medium{font-weight:500}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-icon-default{color:var(--bcm-ui-color-text-icon-default)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.no-underline{text-decoration-line:none}.opacity-60{opacity:.6}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.duration-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-out{transition-timing-function:cubic-bezier(0,0,.2,1)}.hover\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.hover\:underline:hover{text-decoration-line:underline}.hover\:no-underline:hover{text-decoration-line:none}.flex-shrink-0{flex-shrink:0}.rounded-\[--bcm-alert-radius\]{border-radius:var(--bcm-alert-radius)}.bg-\[--bcm-alert-bg\]{background-color:var(--bcm-alert-bg)}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-2\.5{padding-bottom:.625rem;padding-top:.625rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-\[--bcm-alert-text\]{color:var(--bcm-alert-text)}

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

@@ -1,17 +1,25 @@
 import { h } from "@stencil/core";
 import cs from "classnames";
 export class BcmAvatar {
-    constructor() {
-        /**  Shape of the avatar (ellipse/square) */
-        this.shape = 'ellipse';
-        /** Size of the avatar */
-        this.size = 'medium';
-        /** Fallback icon class */
-        this.icon = 'fas fa-user';
-        /**  Status indicator animation */
-        this.blink = false;
-        this.isFallback = false;
-    }
+    /** Source URL for avatar image */
+    image;
+    /** Alternative text for image */
+    alt;
+    /**  Shape of the avatar (ellipse/square) */
+    shape = 'ellipse';
+    /** Size of the avatar */
+    size = 'medium';
+    /** Custom background color */
+    color;
+    /** Fallback icon class */
+    icon = 'fas fa-user';
+    /**  Status indicator type */
+    status;
+    /**  Status indicator animation */
+    blink = false;
+    /**  Display name (used for initials) */
+    name;
+    isFallback = false;
     getFirstLetters(name) {
         const words = name.split(' ');
         const initials = words.map(word => word.charAt(0).toUpperCase()).join('');
@@ -70,7 +78,7 @@ export class BcmAvatar {
                 return h("i", { class: this.icon });
             }
         };
-        return (h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: Object.assign(Object.assign({}, style), customSize) }, h(RenderContent, null), this.status && h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), h("slot", null)));
+        return (h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: { ...style, ...customSize } }, h(RenderContent, null), this.status && h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), h("slot", null)));
     }
     static get is() { return "bcm-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.component.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}
+{"version":3,"file":"avatar.component.js","sourceRoot":"","sources":["../../../src/components/avatar/avatar.component.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/avatar/avatar.css

@@ -1 +1 @@
-:host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.-right-0\.5{right:-.125rem}.-top-0\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\[--bcm-ui-radius\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--bcm-avatar-bg\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\[--bcm-avatar-text\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
+:host{--bcm-avatar-bg:var(--bcm-ui-color-background-default-default);--bcm-avatar-text:var(--bcm-ui-color-text-default);--bcm-avatar-radius:50%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.-right-0\.5{right:-.125rem}.-top-0\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.inline-flex{display:inline-flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-10{width:2.5rem}.w-6{width:1.5rem}.w-8{width:2rem}.w-full{width:100%}.items-center{align-items:center}.justify-center{justify-content:center}.rounded-\[--bcm-ui-radius\]{border-radius:var(--bcm-ui-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\[--bcm-avatar-bg\]{background-color:var(--bcm-avatar-bg)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.text-\[--bcm-avatar-text\]{color:var(--bcm-avatar-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}

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

@@ -18,88 +18,115 @@ import { tv } from "../../utils/tv";
  * </bcm-badge>
  */
 export class Badge {
-    constructor() {
-        /**
-         * Determines the size of the badge.
-         * @type {'small' | 'medium' | 'large'}
-         * @default 'medium'
-         */
-        this.size = 'medium';
-        /**
-         * Sets the visual variant of the badge.
-         * 'dot': Appears as a small dot indicator
-         * 'text': Displays content as text
-         * @type {'dot' | 'text'}
-         * @default 'text'
-         */
-        this.variant = 'text';
-        /**
-         * Enables soft color mode for the badge.
-         * When true, uses lighter tones and pastel colors.
-         * @type {boolean}
-         * @default false
-         */
-        this.soft = false;
-        /**
-         * Enables blinking animation for the badge.
-         * Useful for drawing attention or indicating active status.
-         * @type {boolean}
-         * @default false
-         */
-        this.blink = false;
-        /**
-         * Sets the position of the badge relative to its container.
-         * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
-         * @default 'top-right'
-         */
-        this.position = 'top-right';
-        this.classes = tv({
-            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',
-            variants: {
-                size: {
-                    small: 'gap-1 px-1 text-size-3',
-                    medium: 'gap-1 py-0.5 px-1.5 text-size-4',
-                    large: 'gap-2 py-1 px-2 text-size-5',
-                },
-                variant: {
-                    dot: 'gap-0 p-0 text-[0px] leading-none',
-                    text: '',
-                },
-                position: {
-                    'top-right': '-top-1 -right-1',
-                    'top-left': '-top-1 -left-1',
-                    'bottom-right': '-bottom-1 -right-1',
-                    'bottom-left': '-bottom-1 -left-1',
-                },
-                blink: {
-                    true: 'after:content-[""] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',
-                },
+    /**
+     * Determines the size of the badge.
+     * @type {'small' | 'medium' | 'large'}
+     * @default 'medium'
+     */
+    size = 'medium';
+    /**
+     * Sets the visual variant of the badge.
+     * 'dot': Appears as a small dot indicator
+     * 'text': Displays content as text
+     * @type {'dot' | 'text'}
+     * @default 'text'
+     */
+    variant = 'text';
+    /**
+     * Defines the color of the badge.
+     * Uses system color variables (e.g., 'primary', 'success', 'warning', etc.)
+     * @type {string}
+     * @optional
+     */
+    color;
+    /**
+     * Enables soft color mode for the badge.
+     * When true, uses lighter tones and pastel colors.
+     * @type {boolean}
+     * @default false
+     */
+    soft = false;
+    /**
+     * Enables blinking animation for the badge.
+     * Useful for drawing attention or indicating active status.
+     * @type {boolean}
+     * @default false
+     */
+    blink = false;
+    /**
+     * Status message for accessibility purposes.
+     * Will be read by screen readers.
+     * @type {string}
+     * @optional
+     */
+    status;
+    /**
+     * Sets the position of the badge relative to its container.
+     * @type {'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'}
+     * @default 'top-right'
+     */
+    position = 'top-right';
+    /**
+     * Fine-tune the badge position with custom offset.
+     * Format: "x,y" in pixels (e.g., "10,-5")
+     * @type {string}
+     * @optional
+     */
+    offset;
+    /**
+     * Text to be displayed inside the badge.
+     * Used when variant is set to 'text'.
+     * Can be overridden using the "badge" slot.
+     * @type {string}
+     * @optional
+     */
+    text;
+    classes = tv({
+        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',
+        variants: {
+            size: {
+                small: 'gap-1 px-1 text-size-3',
+                medium: 'gap-1 py-0.5 px-1.5 text-size-4',
+                large: 'gap-2 py-1 px-2 text-size-5',
             },
-            compoundVariants: [
-                {
-                    variant: 'dot',
-                    size: 'small',
-                    class: 'size-1',
-                },
-                {
-                    variant: 'dot',
-                    size: 'medium',
-                    class: 'size-1.5',
-                },
-                {
-                    variant: 'dot',
-                    size: 'large',
-                    class: 'size-2',
-                },
-            ],
-            defaultVariants: {
-                variant: 'text',
+            variant: {
+                dot: 'gap-0 p-0 text-[0px] leading-none',
+                text: '',
+            },
+            position: {
+                'top-right': '-top-1 -right-1',
+                'top-left': '-top-1 -left-1',
+                'bottom-right': '-bottom-1 -right-1',
+                'bottom-left': '-bottom-1 -left-1',
+            },
+            blink: {
+                true: 'after:content-[""] after:absolute  after:rounded-full after:bg-[--bcm-badge-bg] after:animate-blink after:w-full after:h-full',
+            },
+        },
+        compoundVariants: [
+            {
+                variant: 'dot',
+                size: 'small',
+                class: 'size-1',
+            },
+            {
+                variant: 'dot',
                 size: 'medium',
-                position: 'top-right',
-                blink: false,
+                class: 'size-1.5',
             },
-        });
-    }
+            {
+                variant: 'dot',
+                size: 'large',
+                class: 'size-2',
+            },
+        ],
+        defaultVariants: {
+            variant: 'text',
+            size: 'medium',
+            position: 'top-right',
+            blink: false,
+        },
+    });
     get offsetStyle() {
         if (!this.offset)
             return {};
@@ -116,12 +143,15 @@ export class Badge {
         };
     }
     render() {
-        return (h("div", { key: 'f71c36dfb12c4e4d3231dc032a56d4359804c4ca', class: "relative inline-flex" }, h("slot", { key: '95198d29516b302467cce4ac236b064ac54285f1' }), h("div", { key: 'a4e95fe921c0d4051fc4568aae5ae7bc9e81aaa1', role: "status", "aria-live": "polite", "aria-label": this.status ? `Status: ${this.status}` : undefined, class: this.classes({
+        return (h("div", { key: '18c634f88fdae46495b121abecb75047fedbcb3c', class: "relative inline-flex" }, h("slot", { key: 'fe3f798b2d3b8cfa8770f109be31fddc40c03a03' }), h("div", { key: '67d1effdcb853b550a30350521e19900cf1c716e', role: "status", "aria-live": "polite", "aria-label": this.status ? `Status: ${this.status}` : undefined, class: this.classes({
                 size: this.size,
                 variant: this.variant,
                 position: this.position,
                 blink: this.blink,
-            }), style: Object.assign(Object.assign({}, this.badgeStyle), this.offsetStyle) }, this.variant == 'text' && h("slot", { key: '51e219f0a9dfe85cd0f6287336ed0052c295309f', name: "badge" }, this.text))));
+            }), style: {
+                ...this.badgeStyle,
+                ...this.offsetStyle,
+            } }, this.variant == 'text' && h("slot", { key: 'ec18851053e0b744112c63a65e9a0b91d886884d', name: "badge" }, this.text))));
     }
     static get is() { return "bcm-badge"; }
     static get encapsulation() { return "shadow"; }