bromcom-ui-next 0.1.9 → 0.1.11

package/dist/bromcom-ui/p-f4e8a47d.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as o,g as i}from"./p-c9b736d9.js";import{c as s,o as a,f as e,s as d}from"./p-9594cebb.js";const n=".contents{display:contents}:host{display:contents;width:100%}.static{position:static}.flex{display:flex}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.w-full{width:100%}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.flex-col{flex-direction:column}.items-center{align-items:center}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}.absolute{position:absolute}.z-\\[1000\\]{z-index:1000}.block{display:block}.min-w-max{min-width:max-content}";const h=n;const c=class{constructor(o){t(this,o);this.isVisible=false}componentDidLoad(){requestAnimationFrame((()=>{this.targetEl=this.targetElement||(this.targetId?document.getElementById(this.targetId):null);this.floatingEl=this.host.shadowRoot.querySelector(".floating-content");if(this.targetEl){this.targetEl.addEventListener("click",(t=>{t.stopPropagation();this.toggle()}));const t=t=>{var o,i;const s=t.target;if(!((o=this.floatingEl)===null||o===void 0?void 0:o.contains(s))&&!((i=this.targetEl)===null||i===void 0?void 0:i.contains(s))&&!this.host.contains(s)){this.hide()}};document.addEventListener("click",t);this.host["_handleClickOutside"]=t}}))}async updatePosition(){if(!this.targetEl||!this.floatingEl)return;const{x:t,y:o}=await s(this.targetEl,this.floatingEl,{placement:"bottom-start",middleware:[a(2),e({fallbackPlacements:["top-start"]}),d({padding:8})]});Object.assign(this.floatingEl.style,{left:`${t}px`,top:`${o}px`})}show(){this.isVisible=true;this.updatePosition()}hide(){this.isVisible=false}toggle(){this.isVisible=!this.isVisible;if(this.isVisible){this.updatePosition()}}render(){return o("div",{key:"3f941aabcf3f17e8ee628c645ebb1316a305a43f",class:"floating-content z-[1000] flex min-w-max",style:{display:this.isVisible?"block":"none",position:"absolute",top:"0px",left:"0px"}},o("slot",{key:"d75ff826bc512230c7befcf51757797ffe52abc6"}))}disconnectedCallback(){if(this.targetEl){this.targetEl.removeEventListener("mouseenter",(()=>this.show()));this.targetEl.removeEventListener("mouseleave",(()=>this.hide()));this.targetEl.removeEventListener("click",(()=>this.toggle()))}}get host(){return i(this)}};c.style=h;export{c as bcm_linked};
-//# sourceMappingURL=p-f4e8a47d.entry.js.map

package/dist/bromcom-ui/p-f4e8a47d.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["linkedCss","BcmLinkedStyle0","BcmLinked","constructor","hostRef","this","isVisible","componentDidLoad","requestAnimationFrame","targetEl","targetElement","targetId","document","getElementById","floatingEl","host","shadowRoot","querySelector","addEventListener","e","stopPropagation","toggle","handleClickOutside","target","_a","contains","_b","hide","updatePosition","x","y","computePosition","placement","middleware","offset","flip","fallbackPlacements","shift","padding","Object","assign","style","left","top","show","render","h","key","class","display","position","disconnectedCallback","removeEventListener"],"sources":["src/components/linked/linked.css?tag=bcm-linked&encapsulation=shadow","src/components/linked/linked.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n  width: 100%;\n}\n","import { Component, ComponentInterface, Prop, Element, State, h } from \"@stencil/core\";\nimport { computePosition, flip, shift, offset } from '@floating-ui/dom';\n\n@Component({\n    tag: 'bcm-linked',\n    styleUrl: 'linked.css',\n    shadow: true,\n})\nexport class BcmLinked implements ComponentInterface {\n    @Element() host: HTMLElement;\n\n    @Prop({ reflect: true, attribute: 'target-id' }) targetId: string;\n\n    @Prop() targetElement?: HTMLElement;\n\n    @State() isVisible: boolean = false;\n\n    private floatingEl?: HTMLElement;\n    private targetEl?: HTMLElement;\n\n\n    componentDidLoad() {\n        requestAnimationFrame(() => {\n            this.targetEl = this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null);\n            this.floatingEl = this.host.shadowRoot.querySelector('.floating-content');\n\n            if (this.targetEl) {\n                this.targetEl.addEventListener('click', (e) => {\n                    e.stopPropagation();\n                    this.toggle();\n                });\n\n                const handleClickOutside = (e: MouseEvent) => {\n                    const target = e.target as Node;\n                    if (!this.floatingEl?.contains(target) &&\n                        !this.targetEl?.contains(target) &&\n                        !this.host.contains(target)) {\n                        this.hide();\n                    }\n                };\n\n                document.addEventListener('click', handleClickOutside);\n\n                this.host['_handleClickOutside'] = handleClickOutside;\n            }\n        });\n    }\n\n    private async updatePosition() {\n        if (!this.targetEl || !this.floatingEl) return;\n\n        const { x, y } = await computePosition(this.targetEl, this.floatingEl, {\n            placement: 'bottom-start',\n            middleware: [\n                offset(2),\n                flip({\n                    fallbackPlacements: ['top-start'],\n                }),\n                shift({ padding: 8 }),\n            ],\n        });\n\n        Object.assign(this.floatingEl.style, {\n            left: `${x}px`,\n            top: `${y}px`,\n        });\n    }\n\n    private show() {\n        this.isVisible = true;\n        this.updatePosition();\n    }\n\n    private hide() {\n        this.isVisible = false;\n    }\n\n    private toggle() {\n        this.isVisible = !this.isVisible;\n        if (this.isVisible) {\n            this.updatePosition();\n        }\n    }\n\n    render() {\n        return (\n            <div\n                class=\"floating-content z-[1000] flex min-w-max\"\n                style={{\n                    display: this.isVisible ? 'block' : 'none',\n                    position: 'absolute',\n                    top: \"0px\",\n                    left: \"0px\",\n                }}\n            >\n                <slot></slot>\n            </div>\n        );\n    }\n\n    disconnectedCallback() {\n        if (this.targetEl) {\n            this.targetEl.removeEventListener('mouseenter', () => this.show());\n            this.targetEl.removeEventListener('mouseleave', () => this.hide());\n            this.targetEl.removeEventListener('click', () => this.toggle());\n        }\n    }\n}"],"mappings":"2GAAA,MAAMA,EAAY,2kCAClB,MAAAC,EAAeD,E,MCOFE,EAAS,MALtB,WAAAC,CAAAC,G,UAYaC,KAAAC,UAAqB,K,CAM9B,gBAAAC,GACIC,uBAAsB,KAClBH,KAAKI,SAAWJ,KAAKK,gBAAkBL,KAAKM,SAAWC,SAASC,eAAeR,KAAKM,UAAY,MAChGN,KAAKS,WAAaT,KAAKU,KAAKC,WAAWC,cAAc,qBAErD,GAAIZ,KAAKI,SAAU,CACfJ,KAAKI,SAASS,iBAAiB,SAAUC,IACrCA,EAAEC,kBACFf,KAAKgB,QAAQ,IAGjB,MAAMC,EAAsBH,I,QACxB,MAAMI,EAASJ,EAAEI,OACjB,MAAKC,EAAAnB,KAAKS,cAAU,MAAAU,SAAA,SAAAA,EAAEC,SAASF,QAC1BG,EAAArB,KAAKI,YAAQ,MAAAiB,SAAA,SAAAA,EAAED,SAASF,MACxBlB,KAAKU,KAAKU,SAASF,GAAS,CAC7BlB,KAAKsB,M,GAIbf,SAASM,iBAAiB,QAASI,GAEnCjB,KAAKU,KAAK,uBAAyBO,C,KAKvC,oBAAMM,GACV,IAAKvB,KAAKI,WAAaJ,KAAKS,WAAY,OAExC,MAAMe,EAAEA,EAACC,EAAEA,SAAYC,EAAgB1B,KAAKI,SAAUJ,KAAKS,WAAY,CACnEkB,UAAW,eACXC,WAAY,CACRC,EAAO,GACPC,EAAK,CACDC,mBAAoB,CAAC,eAEzBC,EAAM,CAAEC,QAAS,OAIzBC,OAAOC,OAAOnC,KAAKS,WAAW2B,MAAO,CACjCC,KAAM,GAAGb,MACTc,IAAK,GAAGb,O,CAIR,IAAAc,GACJvC,KAAKC,UAAY,KACjBD,KAAKuB,gB,CAGD,IAAAD,GACJtB,KAAKC,UAAY,K,CAGb,MAAAe,GACJhB,KAAKC,WAAaD,KAAKC,UACvB,GAAID,KAAKC,UAAW,CAChBD,KAAKuB,gB,EAIb,MAAAiB,GACI,OACIC,EAAA,OAAAC,IAAA,2CACIC,MAAM,2CACNP,MAAO,CACHQ,QAAS5C,KAAKC,UAAY,QAAU,OACpC4C,SAAU,WACVP,IAAK,MACLD,KAAM,QAGVI,EAAA,QAAAC,IAAA,6C,CAKZ,oBAAAI,GACI,GAAI9C,KAAKI,SAAU,CACfJ,KAAKI,SAAS2C,oBAAoB,cAAc,IAAM/C,KAAKuC,SAC3DvC,KAAKI,SAAS2C,oBAAoB,cAAc,IAAM/C,KAAKsB,SAC3DtB,KAAKI,SAAS2C,oBAAoB,SAAS,IAAM/C,KAAKgB,U","ignoreList":[]}

package/dist/bromcom-ui/p-f7890098.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as o,h as r,g as a}from"./p-c9b736d9.js";import{c as t}from"./p-5fcf77f9.js";const c=".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.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)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";const i=c;const s=class{constructor(r){e(this,r);this.bcmDropDownItemChange=o(this,"bcmDropDownItemChange",1);this.selected=false;this.error=false;this.disabled=false;this.dropdownItemClass=t({base:"dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color",variants:{selected:{true:"bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]",false:"hover:bg-[var(--bcm-ui-color-background-base-hover)]"},error:{true:"bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]",false:""},disabled:{true:"",false:""}},defaultVariants:{selected:false,error:false,disabled:false}},{twMerge:false})}handleClick(){this.selected=true;this.bcmDropDownItemChange.emit({element:this.host,selected:this.selected})}render(){var e;return r("div",{key:"210f1b6277e07eeabd5da39d63a332ae84bed898","aria-checked":this.selected,class:this.dropdownItemClass({selected:this.selected,error:this.error}),onClick:()=>this.handleClick()},r("slot",{key:"4edc3ba20bd9b7f0bcb456178c72c3050e391e31",name:"left-content"},this.icon&&r("bcm-icon",{key:"867366e7d2491d1d59613f1ada4b5355ea1f67f9","icon-name":this.icon})),r("div",{key:"845b630b0865d7e73dec69f00819105c7447fac8",class:"flex flex-row text-pretty w-full"},r("slot",{key:"ad70e94c42c8ee3bf01e8e14ee9d21909cacc204"},this.text)),r("slot",{key:"dfd1dd09b8c0c2f8927e8804087b32254fc7a05d",name:"right-content"},(e=this.rightIcons)===null||e===void 0?void 0:e.map((e=>r("bcm-icon",{"icon-name":e})))))}get host(){return a(this)}};s.style=i;export{s as bcm_dropdown_item};
-//# sourceMappingURL=p-f7890098.entry.js.map

package/dist/bromcom-ui/p-f7890098.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["dropdownItemCss","BcmDropdownItemStyle0","DropdownItem","constructor","hostRef","this","selected","error","disabled","dropdownItemClass","tv","base","variants","true","false","defaultVariants","twMerge","handleClick","bcmDropDownItemChange","emit","element","host","render","h","key","class","onClick","name","icon","text","_a","rightIcons","map"],"sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n    tag: 'bcm-dropdown-item',\n    styleUrl: 'dropdown-item.css',\n    shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n    @Element() host: HTMLElement;\n    @Prop() text: string;\n    @Prop() icon: string;\n    @Prop() rightIcons: string[];\n    @Prop({ reflect: true }) selected: boolean = false;\n    @Prop({ reflect: true }) error: boolean = false;\n    @Prop({ reflect: true }) disabled: boolean = false;\n\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n        eventName: 'bcmDropDownItemChange',\n    })\n    bcmDropDownItemChange: EventEmitter<any>;\n\n\n    private handleClick() {\n        this.selected = true;\n        this.bcmDropDownItemChange.emit({\n            element: this.host,\n            selected: this.selected,\n        });\n    }\n\n    private dropdownItemClass = tv(\n        {\n            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n            variants: {\n                selected: {\n                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n                },\n                error: {\n                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n                    false: '',\n                },\n                disabled: {\n                    true: '', // should be discuss with ux team\n                    false: '',\n                },\n            },\n            defaultVariants: {\n                selected: false,\n                error: false,\n                disabled: false,\n            },\n        },\n        {\n            twMerge: false,\n        },\n    );\n\n    render() {\n        return (\n            <div\n                aria-checked={this.selected}\n                class={this.dropdownItemClass({\n                    selected: this.selected,\n                    error: this.error,\n                })}\n                onClick={() => this.handleClick()}\n            >\n                <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n                <div class=\"flex flex-row text-pretty w-full\">\n                    <slot>{this.text}</slot>\n                </div>\n                <slot name=\"right-content\">\n                    {this.rightIcons?.map(icon => (\n                        <bcm-icon icon-name={icon}></bcm-icon>\n                    ))}\n                </slot>\n            </div>\n        );\n    }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,+6CACxB,MAAAC,EAAeD,E,MCOFE,EAAY,MALzB,WAAAC,CAAAC,G,uEAU6BC,KAAAC,SAAoB,MACpBD,KAAAE,MAAiB,MACjBF,KAAAG,SAAoB,MAmBrCH,KAAAI,kBAAoBC,EACxB,CACIC,KAAM,8GACNC,SAAU,CACNN,SAAU,CACNO,KAAM,wGACNC,MAAO,wDAEXP,MAAO,CACHM,KAAM,wHACNC,MAAO,IAEXN,SAAU,CACNK,KAAM,GACNC,MAAO,KAGfC,gBAAiB,CACbT,SAAU,MACVC,MAAO,MACPC,SAAU,QAGlB,CACIQ,QAAS,O,CAhCT,WAAAC,GACJZ,KAAKC,SAAW,KAChBD,KAAKa,sBAAsBC,KAAK,CAC5BC,QAASf,KAAKgB,KACdf,SAAUD,KAAKC,U,CAgCvB,MAAAgB,G,MACI,OACIC,EAAA,OAAAC,IAAA,0DACkBnB,KAAKC,SACnBmB,MAAOpB,KAAKI,kBAAkB,CAC1BH,SAAUD,KAAKC,SACfC,MAAOF,KAAKE,QAEhBmB,QAAS,IAAMrB,KAAKY,eAEpBM,EAAA,QAAAC,IAAA,2CAAMG,KAAK,gBAAgBtB,KAAKuB,MAAQL,EAAA,YAAAC,IAAA,uDAAqBnB,KAAKuB,QAClEL,EAAA,OAAAC,IAAA,2CAAKC,MAAM,oCACPF,EAAA,QAAAC,IAAA,4CAAOnB,KAAKwB,OAEhBN,EAAA,QAAAC,IAAA,2CAAMG,KAAK,kBACNG,EAAAzB,KAAK0B,cAAU,MAAAD,SAAA,SAAAA,EAAEE,KAAIJ,GAClBL,EAAA,wBAAqBK,O","ignoreList":[]}

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

@@ -1,596 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-9a2c5938.js');
-const index$1 = require('./index-5a88e57b.js');
-const index$2 = require('./index-310db2a6.js');
-
-const avatarCss = ":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)}";
-const BcmAvatarStyle0 = avatarCss;
-
-const BcmAvatar = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**  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;
-    }
-    getFirstLetters(name) {
-        const words = name.split(' ');
-        const initials = words.map(word => word.charAt(0).toUpperCase()).join('');
-        return initials.substring(0, 2);
-    }
-    render() {
-        const baseClass = index$1.classNames('bcm-avatar bcm-ui-element bcm-ui-content-display', 'uppercase font-medium', 'inline-flex items-center justify-center', 'bg-[--bcm-avatar-bg] text-[--bcm-avatar-text]', {
-            'shape-ellipse rounded-full': this.shape === 'ellipse',
-            'shape-square rounded-[--bcm-ui-radius]': this.shape === 'square',
-            'size-small text-size-4 w-6 h-6': this.size === 'small',
-            'size-medium text-size-5 w-8 h-8': this.size === 'medium',
-            'size-large text-size-6 w-10 h-10': this.size === 'large',
-        });
-        const badgeClass = index$1.classNames('badge', {
-            'top-0 right-0': this.shape === 'ellipse',
-            '-top-0.5 -right-0.5': this.shape === 'square',
-        });
-        const imageClass = index$1.classNames('image w-full h-full', {
-            'rounded-full': this.shape === 'ellipse',
-            'rounded-[--bcm-ui-radius]': this.shape === 'square',
-        });
-        let style = {};
-        if (this.color) {
-            const isColorTone = this.color.includes('-');
-            const _color = isColorTone ? this.color.split('-')[0] : this.color;
-            const bgColor = `var(--bcm-ui-color-background-palette-${_color}-default)`;
-            const textColor = `var(--bcm-ui-color-text-palette-${_color}`;
-            style = {
-                '--bcm-avatar-bg': bgColor,
-                '--bcm-avatar-text': textColor,
-            };
-        }
-        const customSize = !Object.keys(['small', 'medium', 'large']).includes(this.size)
-            ? {
-                width: `${this.size}px`,
-                height: `${this.size}px`,
-                fontSize: `${+this.size / 2}px`,
-            }
-            : {};
-        const RenderContent = () => {
-            if (this.isFallback) {
-                if (this.name) {
-                    return this.getFirstLetters(this.name);
-                }
-                else {
-                    return index.h("i", { class: this.icon });
-                }
-            }
-            else if (this.image) {
-                return index.h("img", { class: imageClass, onError: () => (this.isFallback = true), src: this.image, alt: this.alt, "aria-label": this.alt || this.name || 'Avatar' });
-            }
-            else if (this.name) {
-                return this.getFirstLetters(this.name);
-            }
-            else {
-                return index.h("i", { class: this.icon });
-            }
-        };
-        return (index.h("div", { role: "img", "aria-label": this.alt || this.name || 'Avatar', class: baseClass, style: Object.assign(Object.assign({}, style), customSize) }, index.h(RenderContent, null), this.status && index.h("bcm-badge", { class: badgeClass, status: this.status, blink: this.blink, "aria-hidden": "true" }), index.h("slot", null)));
-    }
-};
-BcmAvatar.style = BcmAvatarStyle0;
-
-const badgeCss = ".relative{position:relative}:host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-block;position:relative}::slotted([slot=badge]){color:var(--bcm-badge-text);font-weight:500}.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}.absolute{position:absolute}.-bottom-1{bottom:-.25rem}.-left-1{left:-.25rem}.-right-1{right:-.25rem}.-top-1{top:-.25rem}.z-10{z-index:10}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.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))}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-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)}.after\\:absolute:after{content:var(--tw-content);position:absolute}.after\\:h-full:after{content:var(--tw-content);height:100%}.after\\:w-full:after{content:var(--tw-content);width:100%}@keyframes ping{75%,to{content:var(--tw-content);opacity:0;transform:scale(2)}}.after\\:animate-blink:after{animation:ping 2s infinite;content:var(--tw-content)}.after\\:rounded-full:after{border-radius:var(--bcm-ui-border-radius-full,9999px);content:var(--tw-content)}.after\\:bg-\\[--bcm-badge-bg\\]:after{background-color:var(--bcm-badge-bg);content:var(--tw-content)}.after\\:content-\\[\\\"\\\"\\]:after{--tw-content:\"\";content:var(--tw-content)}.-right-0\\.5{right:-.125rem}.-top-0\\.5{top:-.125rem}.right-0{right:0}.top-0{top:0}.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%}.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-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.uppercase{text-transform:uppercase}.text-\\[--bcm-avatar-text\\]{color:var(--bcm-avatar-text)}";
-const BcmBadgeStyle0 = badgeCss;
-
-const Badge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * 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 = index$2.ce({
-            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',
-                },
-            },
-            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',
-                size: 'medium',
-                position: 'top-right',
-                blink: false,
-            },
-        });
-    }
-    get offsetStyle() {
-        if (!this.offset)
-            return {};
-        const [x = 0, y = 0] = this.offset.split(',').map(val => val.trim());
-        return { transform: `translate(${x}px, ${y}px)` };
-    }
-    get badgeStyle() {
-        if (!this.color)
-            return {};
-        const variantType = this.soft ? 'soft' : 'vivid';
-        return {
-            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,
-            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',
-        };
-    }
-    render() {
-        return (index.h("div", { key: '9c6ce83cc0ae25399f2d97139d9e91578be38237', class: "relative inline-flex" }, index.h("slot", { key: 'b05db7fc70a8ff5c680e79507d44678ea4f8aba4' }), index.h("div", { key: 'e3fe3d09e236ae1569d533824f4bb585a5871b53', 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' && index.h("slot", { key: '98e3f9eaa2966a748e41782efbe78ca35a9deee6', name: "badge" }, this.text))));
-    }
-};
-Badge.style = BcmBadgeStyle0;
-
-const basicBadgeCss = ":host{--bcm-badge-bg:var(--bcm-ui-color-background-default-default);--bcm-badge-text:var(--bcm-ui-color-text-default);--bcm-badge-radius:9999px;display:inline-flex;height:-moz-fit-content;height:fit-content;width:-moz-fit-content;width:fit-content}.badge-content{color:var(--bcm-badge-text);font-weight:500}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.inline-flex{display:inline-flex}.size-1{height:.25rem;width:.25rem}.size-1\\.5{height:.375rem;width:.375rem}.size-2{height:.5rem;width:.5rem}.select-none{user-select:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-0{gap:0}.whitespace-nowrap{white-space:nowrap}.rounded-\\[--bcm-badge-radius\\]{border-radius:var(--bcm-badge-radius)}.bg-\\[--bcm-badge-bg\\]{background-color:var(--bcm-badge-bg)}.p-0{padding:0}.px-1{padding-left:.25rem;padding-right:.25rem}.px-1\\.5{padding-left:.375rem;padding-right:.375rem}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.text-\\[0px\\]{font-size:0}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-medium{font-weight:500}.leading-none{line-height:1}.text-\\[--bcm-badge-text\\]{color:var(--bcm-badge-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)}";
-const BcmBasicBadgeStyle0 = basicBadgeCss;
-
-const BasicBadge = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        /**
-         * 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;
-        this.classes = index$2.ce({
-            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]',
-            variants: {
-                size: {
-                    small: 'px-1 text-size-3',
-                    medium: 'py-0.5 px-1.5 text-size-4',
-                    large: 'py-1 px-2 text-size-5',
-                },
-                variant: {
-                    dot: 'gap-0 p-0 text-[0px] leading-none',
-                    text: '',
-                },
-            },
-            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',
-                size: 'medium',
-                blink: false,
-            },
-        });
-    }
-    get badgeStyle() {
-        if (!this.color)
-            return {};
-        const variantType = this.soft ? 'palette' : 'vivid';
-        return {
-            '--bcm-badge-bg': `var(--bcm-ui-color-background-${variantType}-${this.color}-default)`,
-            '--bcm-badge-text': this.soft ? `var(--bcm-ui-color-text-palette-${this.color})` : 'var(--bcm-ui-color-text-base)',
-        };
-    }
-    render() {
-        return (index.h("span", { key: '808cd1e3672a57596174767ce793244024a3f6c3', part: "base", role: "status", "aria-live": "polite", style: this.badgeStyle, class: this.classes({
-                size: this.size,
-                variant: this.variant,
-            }) }, this.variant === 'text' && (index.h("span", { key: 'c3b5d31649cf6177173401cafcb8c520d4cf9745', class: "badge-content" }, index.h("slot", { key: 'a6a902a3a2a9c2effa1fc7e0ef4267ab17b6b2ef' })))));
-    }
-};
-BasicBadge.style = BcmBasicBadgeStyle0;
-
-const variantOptions = {
-    save: {
-        text: 'Save',
-        status: 'success',
-        icon: 'far fa-save',
-        iconPosition: 'prefix',
-        kind: 'primary',
-    },
-    ok: {
-        text: 'Ok',
-        status: 'success',
-        icon: 'far fa-check',
-        iconPosition: 'prefix',
-    },
-    new: {
-        text: 'New',
-        status: 'success',
-        icon: 'far fa-plus',
-        iconPosition: 'prefix',
-    },
-    add: {
-        text: 'Add',
-        status: 'success',
-        icon: 'far fa-plus',
-        iconPosition: 'prefix',
-    },
-    create: {
-        text: 'Create',
-        status: 'success',
-        icon: 'far fa-plus',
-        iconPosition: 'prefix',
-    },
-    prev: {
-        text: 'Prev',
-        status: 'default',
-        icon: 'far fa-arrow-left',
-        iconPosition: 'prefix',
-    },
-    next: {
-        text: 'Next',
-        status: 'default',
-        icon: 'far fa-arrow-right',
-        iconPosition: 'suffix',
-    },
-    apply: {
-        text: 'Apply',
-        status: 'default',
-        icon: 'far fa-check-circle',
-        iconPosition: 'prefix',
-    },
-    submit: {
-        text: 'Submit',
-        status: 'default',
-        icon: 'far fa-save',
-        iconPosition: 'prefix',
-    },
-    send: {
-        text: 'Send',
-        status: 'success',
-        icon: 'far fa-paper-plane',
-        iconPosition: 'prefix',
-    },
-    delete: {
-        text: 'Delete',
-        status: 'error',
-        icon: 'far fa-trash',
-        iconPosition: 'prefix',
-    },
-    cancel: {
-        text: 'Cancel',
-        status: 'error',
-        icon: 'far fa-times',
-        iconPosition: 'prefix',
-    },
-    decline: {
-        text: 'Decline',
-        status: 'error',
-        icon: 'far fa-ban',
-        iconPosition: 'prefix',
-    },
-    close: {
-        text: 'Close',
-        status: 'error',
-        icon: 'far fa-times-circle',
-        iconPosition: 'prefix',
-    },
-    archive: {
-        text: 'Archive',
-        status: 'error',
-        icon: 'far fa-folder-open',
-        iconPosition: 'prefix',
-    },
-    remove: {
-        text: 'Remove',
-        status: 'error',
-        icon: 'far fa-minus-circle',
-        iconPosition: 'prefix',
-    },
-    edit: {
-        text: 'Edit',
-        status: 'default',
-        icon: 'far fa-edit',
-        iconPosition: 'prefix',
-    },
-    export: {
-        text: 'Export',
-        status: 'default',
-        icon: 'far fa-sign-out',
-        iconPosition: 'prefix',
-    },
-    import: {
-        text: 'Import',
-        status: 'default',
-        icon: 'far fa-sign-in',
-        iconPosition: 'prefix',
-    },
-    filter: {
-        text: 'Filter',
-        status: 'default',
-        icon: 'far fa-filter',
-        iconPosition: 'prefix',
-    },
-    update: {
-        text: 'Update',
-        status: 'default',
-        icon: 'far fa-sync',
-        iconPosition: 'prefix',
-    },
-    reset: {
-        text: 'Reset',
-        status: 'default',
-        icon: 'far fa-sync',
-        iconPosition: 'prefix',
-    },
-    download: {
-        text: 'Download',
-        status: 'default',
-        icon: 'far fa-download',
-        iconPosition: 'prefix',
-    },
-};
-
-const buttonCss = ".relative{position:relative}:host{display:inline-block;position:relative}:host([full-width]){width:100%}:host([position=first]) .bcm-button{border-bottom-right-radius:0;border-top-right-radius:0}:host([position=middle]) .bcm-button{border-radius:0}:host([position=last]) .bcm-button{border-bottom-left-radius:0;border-top-left-radius:0}:host([position=first].orientation-vertical) .bcm-button{border-bottom-left-radius:0;border-bottom-right-radius:0;border-top-left-radius:var(--bcm-ui-border-radius,4px);border-top-right-radius:var(--bcm-ui-border-radius,4px)}:host([position=middle].orientation-vertical) .bcm-button{border-radius:0}:host([position=last].orientation-vertical) .bcm-button{border-bottom-left-radius:var(--bcm-ui-border-radius,4px);border-bottom-right-radius:var(--bcm-ui-border-radius,4px);border-top-left-radius:0;border-top-right-radius:0}.static{position:static}.inline-flex{display:inline-flex}.min-h-10{min-height:2.5rem}.min-h-6{min-height:1.5rem}.min-h-8{min-height:2rem}.w-full{width:100%}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-final-border-color\\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\\[--bcm-final-bg-color\\]{background-color:var(--bcm-final-bg-color)}.bg-\\[--bcm-ui-color-background-disabled-default\\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.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)}.leading-none{line-height:1}.text-\\[--bcm-final-text-color\\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.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)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\\:bg-\\[--bcm-final-hover-bg-color\\]:hover{background-color:var(--bcm-final-hover-bg-color)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\\:bg-\\[--bcm-final-active-bg-color\\]:active{background-color:var(--bcm-final-active-bg-color)}.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}.absolute{position:absolute}.z-\\[9999\\]{z-index:9999}.mx-auto{margin-left:auto;margin-right:auto}.flex{display:flex}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-64{max-width:16rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-2\\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.text-pretty{text-wrap:pretty}.rounded-\\[--popover-radius\\]{border-radius:var(--popover-radius)}.rounded-full{border-radius:var(--bcm-ui-border-radius-full,9999px)}.bg-\\[--popover-bg\\]{background-color:var(--popover-bg)}.p-4{padding:1rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.font-sans{font-family:Inter,sans-serif}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.text-size-inherit{font-size:inherit;line-height:inherit}.font-semibold{font-weight:600}.\\!text-color-header{color:var(--bcm-ui-color-text-header)!important}.text-\\[--text-color\\]{color:var(--text-color)}.shadow,.shadow-2{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2{--tw-shadow:var(--bcm-ui-box-shadow-2);--tw-shadow-colored:var(--bcm-ui-box-shadow-2)}.hover\\:bg-gray-100:hover{background-color:oklch(.967 .003 264.542)}.max-h-\\[--dropdown-box-max-height\\]{max-height:var(--dropdown-box-max-height)}.min-w-\\[--dropdown-box-min-weight\\]{min-width:var(--dropdown-box-min-weight)}.max-w-\\[--dropdown-box-max-weight\\]{max-width:var(--dropdown-box-max-weight)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-\\[--dropdown-box-background-color\\]{background-color:var(--dropdown-box-background-color)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}";
-const BcmButtonStyle0 = buttonCss;
-
-const BcmButton = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.bcmClick = index.createEvent(this, "bcmClick", 1);
-        this.bcmFocus = index.createEvent(this, "bcmFocus", 1);
-        this.bcmBlur = index.createEvent(this, "bcmBlur", 1);
-        /** Defines the main visual style of the button */
-        this.kind = 'primary';
-        /** Controls the button size */
-        this.size = 'medium';
-        /** Defines the button's status/state color */
-        this.status = 'default';
-        /** Icon placement (prefix/suffix) */
-        this.iconPosition = 'prefix';
-        /** Icon-only button mode */
-        this.iconOnly = false;
-        /** Full width button */
-        this.fullWidth = false;
-        /** HTML button type */
-        this.type = 'button';
-        /** Loading state */
-        this.loading = false;
-        /** Disabled state */
-        this.disabled = false;
-        /** Active state */
-        this.active = false;
-        this.handleClick = (event) => {
-            if (!this.disabled && !this.loading) {
-                this.bcmClick.emit(event);
-            }
-        };
-        this.handleFocus = (event) => {
-            this.bcmFocus.emit(event);
-        };
-        this.handleBlur = (event) => {
-            this.bcmBlur.emit(event);
-        };
-        this.buttonClass = index$2.ce({
-            base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',
-            variants: {
-                size: {
-                    small: 'text-size-4 py-px px-2 min-h-6',
-                    medium: 'text-size-5 py-0.5 px-3 min-h-8',
-                    large: 'text-size-6 py-1 px-3 min-h-10',
-                },
-                kind: {
-                    primary: 'kind-primary',
-                    ghost: 'kind-ghost',
-                    text: 'kind-text',
-                    outline: 'kind-outline',
-                },
-                fullWidth: {
-                    true: 'full-width w-full',
-                },
-                disabled: {
-                    true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',
-                    false: [
-                        'cursor-pointer',
-                        'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',
-                        'hover:bg-[--bcm-final-hover-bg-color]',
-                        'active:bg-[--bcm-final-active-bg-color]',
-                        'focus-visible:ring',
-                    ],
-                },
-                loading: {
-                    true: '',
-                },
-                position: {
-                    first: 'position-first',
-                    middle: 'position-middle',
-                    last: 'position-last',
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                kind: 'primary',
-                fullWidth: false,
-                disabled: false,
-                loading: false,
-            },
-        }, {
-            twMerge: false,
-        });
-    }
-    get buttonText() {
-        return this.text || (this.variant ? variantOptions[this.variant].text : '');
-    }
-    get buttonIcon() {
-        if (this.variant && variantOptions[this.variant].icon) {
-            return {
-                icon: variantOptions[this.variant].icon,
-                position: variantOptions[this.variant].iconPosition || 'prefix',
-            };
-        }
-        return {
-            icon: this.icon,
-            position: this.iconPosition,
-        };
-    }
-    get buttonStatus() {
-        return this.variant ? variantOptions[this.variant].status : this.status;
-    }
-    get buttonStyles() {
-        const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;
-        // These are the internal default styles based on component props (kind, status)
-        const kindStyleMap = {
-            primary: {
-                '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,
-                '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,
-                '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,
-                '--bcm-button-border': 'transparent',
-                '--bcm-button-text': 'var(--bcm-ui-color-text-base)',
-            },
-            outline: {
-                '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',
-                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
-                '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,
-                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
-            },
-            ghost: {
-                '--bcm-button-bg': 'transparent',
-                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
-                '--bcm-button-border': 'transparent',
-                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
-            },
-            text: {
-                '--bcm-button-bg': 'transparent',
-                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
-                '--bcm-button-border': 'transparent',
-                '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,
-            },
-        };
-        const internalDefaultStyles = kindStyleMap[this.kind];
-        // These are the "final" CSS custom properties used by the component's styling.
-        // They use the "--bcm-button-custom-..." token if provided by the user,
-        // otherwise, they fall back to the internal "--bcm-button-..." style defined above.
-        const finalEffectiveStyles = {
-            '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,
-            '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,
-            '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,
-            '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,
-            '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,
-        };
-        // return kindStyleMap[this.kind];
-        return Object.assign(Object.assign({}, internalDefaultStyles), finalEffectiveStyles);
-    }
-    render() {
-        const { icon, position } = this.buttonIcon;
-        return (index.h(index.Host, { key: '434cab012a2f174ca6b21f7484104ed9952daf38' }, index.h("button", { key: 'bf000fa02d836d0142e3f335b806c20afe10726b', type: this.type, disabled: this.disabled || this.loading, "aria-label": this.label, "aria-expanded": this.expanded, "aria-controls": this.controls, "aria-disabled": this.disabled, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, style: this.buttonStyles, class: this.buttonClass({
-                size: this.size,
-                kind: this.kind,
-                fullWidth: this.fullWidth,
-                disabled: this.disabled,
-                loading: this.loading,
-                position: this.position,
-            }) }, this.loading && index.h("slot", { key: 'c95198f7776c10c7b380c8f2c3c73a05517a72c8', name: "loading" }), index.h("span", { key: '3433ff03ba933966cab816a8f9882c51b647549d' }, index.h("slot", { key: 'd1027e43b007789d1da57ace2b2f2da585434604', name: "prefix" }, position === 'prefix' && icon && index.h("i", { key: '0be135da5ee717f885f56298e9886112ad44767f', class: ' leading-none ' + icon }))), index.h("slot", { key: '13dc3c513cc364615e15c7074729219a251c8756' }, this.buttonText), index.h("span", { key: '5dab9df786eec4ed2554df88ffbfea8c6a324c1f' }, index.h("slot", { key: 'ca80a898105d9d310fea2b34f9b6c9fe282a7eb0', name: "suffix" }, position === 'suffix' && icon && index.h("i", { key: '57d3a187cf7af1d6ebc289c472579aa973fc6c86', class: ' leading-none ' + icon }))))));
-    }
-};
-BcmButton.style = BcmButtonStyle0;
-
-exports.bcm_avatar = BcmAvatar;
-exports.bcm_badge = Badge;
-exports.bcm_basic_badge = BasicBadge;
-exports.bcm_button = BcmButton;
-
-//# sourceMappingURL=bcm-avatar_4.cjs.entry.js.map