bromcom-ui-next 0.1.4 → 0.1.6

package/dist/components/p-c3a60937.js

@@ -0,0 +1,338 @@
+import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-5377117d.js';
+import { c as ce } from './p-5fcf77f9.js';
+
+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-button-border\\]{border-color:var(--bcm-button-border)}.bg-\\[--bcm-button-bg\\]{background-color:var(--bcm-button-bg)}.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-button-text\\]{color:var(--bcm-button-text)}.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-button-bg-hover\\]:hover{background-color:var(--bcm-button-bg-hover)}.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-button-bg-active\\]:active{background-color:var(--bcm-button-bg-active)}.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 = /*@__PURE__*/ proxyCustomElement(class BcmButton extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.bcmClick = createEvent(this, "bcmClick", 1);
+        this.bcmFocus = createEvent(this, "bcmFocus", 1);
+        this.bcmBlur = 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 = 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-button-bg] text-[--bcm-button-text] border-[--bcm-button-border]',
+                        'hover:bg-[--bcm-button-bg-hover]',
+                        'active:bg-[--bcm-button-bg-active]',
+                        '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;
+        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})`,
+            },
+        };
+        return kindStyleMap[this.kind];
+    }
+    render() {
+        const { icon, position } = this.buttonIcon;
+        return (h(Host, { key: '3983c85df11a13f852af55310ba15a4099fe1f54' }, h("button", { key: 'a01a152f16e5a97197f17517d6cc225aacf1f7e0', 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 && h("slot", { key: '161b90eebdc8157163aaeda1ce542fe87c60db78', name: "loading" }), h("span", { key: '6c63908979e465eea1cc358bf4c87f0710891d41' }, h("slot", { key: 'c2931b0dfff2ff00730addc734cb0f24b24ea4ba', name: "prefix" }, position === 'prefix' && icon && h("i", { key: 'cab571f159ae0b6d87862acc4b187fd42189d574', class: ' leading-none ' + icon }))), h("slot", { key: '387a3f7452b7cfc5ad6484743ad3a02aa0d8427e' }, this.buttonText), h("span", { key: '19db4a9fe4b85df6fd85ebad6eac2d7c82313820' }, h("slot", { key: '4f1169aed2c8e446b267139ece8b5db01d9f1da3', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '67355ba68078bc921d99ebb7d3b8d5bc7c0f2776', class: ' leading-none ' + icon }))))));
+    }
+    static get style() { return BcmButtonStyle0; }
+}, [1, "bcm-button", {
+        "kind": [1],
+        "size": [1],
+        "status": [1],
+        "variant": [1],
+        "position": [513],
+        "icon": [1],
+        "iconPosition": [1, "icon-position"],
+        "iconOnly": [4, "icon-only"],
+        "fullWidth": [516, "full-width"],
+        "type": [1],
+        "loading": [4],
+        "disabled": [4],
+        "text": [1],
+        "active": [4],
+        "form": [1],
+        "value": [1],
+        "name": [1],
+        "label": [1],
+        "expanded": [1],
+        "controls": [1]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["bcm-button"];
+    components.forEach(tagName => { switch (tagName) {
+        case "bcm-button":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, BcmButton);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { BcmButton as B, defineCustomElement as d };
+
+//# sourceMappingURL=p-c3a60937.js.map

package/dist/components/p-c3a60937.js.map

@@ -0,0 +1 @@
+{"file":"p-c3a60937.js","mappings":";;;AAiBO,MAAM,cAAc,GAAkC;IAC3D,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;QACtB,IAAI,EAAE,SAAS;KAChB;IACD,EAAE,EAAE;QACF,IAAI,EAAE,IAAI;QACV,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,cAAc;QACpB,YAAY,EAAE,QAAQ;KACvB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,GAAG,EAAE;QACH,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,mBAAmB;QACzB,YAAY,EAAE,QAAQ;KACvB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,oBAAoB;QAC1B,YAAY,EAAE,QAAQ;KACvB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,oBAAoB;QAC1B,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,cAAc;QACpB,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,cAAc;QACpB,YAAY,EAAE,QAAQ;KACvB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,YAAY;QAClB,YAAY,EAAE,QAAQ;KACvB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EAAE,QAAQ;KACvB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,SAAS;QACf,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,oBAAoB;QAC1B,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,OAAO;QACf,IAAI,EAAE,qBAAqB;QAC3B,YAAY,EAAE,QAAQ;KACvB;IACD,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM;QACZ,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,iBAAiB;QACvB,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,gBAAgB;QACtB,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,eAAe;QACrB,YAAY,EAAE,QAAQ;KACvB;IACD,MAAM,EAAE;QACN,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,KAAK,EAAE;QACL,IAAI,EAAE,OAAO;QACb,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,aAAa;QACnB,YAAY,EAAE,QAAQ;KACvB;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,UAAU;QAChB,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,iBAAiB;QACvB,YAAY,EAAE,QAAQ;KACvB;CACF;;AC7JD,MAAM,SAAS,GAAG,+7KAA+7K,CAAC;AACl9K,wBAAe,SAAS;;MCQX,SAAS;IALtB;;;;;;;;QAQE,SAAI,GAAe,SAAS,CAAC;;QAI7B,SAAI,GAAe,QAAQ,CAAC;;QAI5B,WAAM,GAAiB,SAAS,CAAC;;QAgBjC,iBAAY,GAAiB,QAAQ,CAAC;;QAItC,aAAQ,GAAG,KAAK,CAAC;;QAIjB,cAAS,GAAG,KAAK,CAAC;;QAIlB,SAAI,GAAe,QAAQ,CAAC;;QAI5B,YAAO,GAAG,KAAK,CAAC;;QAIhB,aAAQ,GAAG,KAAK,CAAC;;QAQjB,WAAM,GAAG,KAAK,CAAC;QA6CP,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;gBACnC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;aAC3B;SACF,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC3B,CAAC;QAEM,eAAU,GAAG,CAAC,KAAiB;YACrC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;SAC1B,CAAC;QA6DM,gBAAW,GAAGA,EAAE,CACtB;YACE,IAAI,EAAE,0GAA0G;YAChH,QAAQ,EAAE;gBACR,IAAI,EAAE;oBACJ,KAAK,EAAE,gCAAgC;oBACvC,MAAM,EAAE,iCAAiC;oBACzC,KAAK,EAAE,gCAAgC;iBACxC;gBACD,IAAI,EAAE;oBACJ,OAAO,EAAE,cAAc;oBACvB,KAAK,EAAE,YAAY;oBACnB,IAAI,EAAE,WAAW;oBACjB,OAAO,EAAE,cAAc;iBACxB;gBACD,SAAS,EAAE;oBACT,IAAI,EAAE,mBAAmB;iBAC1B;gBACD,QAAQ,EAAE;oBACR,IAAI,EAAE,uHAAuH;oBAC7H,KAAK,EAAE;wBACL,gBAAgB;wBAChB,4EAA4E;wBAC5E,kCAAkC;wBAClC,oCAAoC;wBACpC,oBAAoB;qBACrB;iBACF;gBACD,OAAO,EAAE;oBACP,IAAI,EAAE,EAAE;iBACT;gBACD,QAAQ,EAAE;oBACR,KAAK,EAAE,gBAAgB;oBACvB,MAAM,EAAE,iBAAiB;oBACzB,IAAI,EAAE,eAAe;iBACtB;aACF;YACD,eAAe,EAAE;gBACf,IAAI,EAAE,QAAQ;gBACd,IAAI,EAAE,SAAS;gBACf,SAAS,EAAE,KAAK;gBAChB,QAAQ,EAAE,KAAK;gBACf,OAAO,EAAE,KAAK;aACf;SACF,EACD;YACE,OAAO,EAAE,KAAK;SACf,CACF,CAAC;KAuCH;IAlJC,IAAY,UAAU;QACpB,OAAO,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,GAAG,EAAE,CAAC,CAAC;KAC7E;IAED,IAAY,UAAU;QACpB,IAAI,IAAI,CAAC,OAAO,IAAI,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,EAAE;YACrD,OAAO;gBACL,IAAI,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI;gBACvC,QAAQ,EAAE,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,YAAY,IAAI,QAAQ;aAChE,CAAC;SACH;QAED,OAAO;YACL,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,IAAI,CAAC,YAAY;SAC5B,CAAC;KACH;IAED,IAAY,YAAY;QACtB,OAAO,IAAI,CAAC,OAAO,GAAG,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC;KACzE;IAED,IAAY,YAAY;QACtB,MAAM,MAAM,GAAG,IAAI,CAAC,YAAY,KAAK,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC,YAAY,CAAC;QAE/E,MAAM,YAAY,GAAG;YACnB,OAAO,EAAE;gBACP,iBAAiB,EAAE,iCAAiC,MAAM,WAAW;gBACrE,uBAAuB,EAAE,iCAAiC,MAAM,SAAS;gBACzE,wBAAwB,EAAE,iCAAiC,MAAM,UAAU;gBAC3E,qBAAqB,EAAE,aAAa;gBACpC,mBAAmB,EAAE,+BAA+B;aACrD;YACD,OAAO,EAAE;gBACP,iBAAiB,EAAE,gDAAgD;gBACnE,uBAAuB,EAAE,8CAA8C;gBACvE,wBAAwB,EAAE,+CAA+C;gBACzE,qBAAqB,EAAE,6BAA6B,IAAI,CAAC,YAAY,GAAG;gBACxE,mBAAmB,EAAE,2BAA2B,IAAI,CAAC,YAAY,GAAG;aACrE;YACD,KAAK,EAAE;gBACL,iBAAiB,EAAE,aAAa;gBAChC,uBAAuB,EAAE,8CAA8C;gBACvE,wBAAwB,EAAE,+CAA+C;gBACzE,qBAAqB,EAAE,aAAa;gBACpC,mBAAmB,EAAE,2BAA2B,IAAI,CAAC,YAAY,GAAG;aACrE;YACD,IAAI,EAAE;gBACJ,iBAAiB,EAAE,aAAa;gBAChC,uBAAuB,EAAE,8CAA8C;gBACvE,wBAAwB,EAAE,+CAA+C;gBACzE,qBAAqB,EAAE,aAAa;gBACpC,mBAAmB,EAAE,2BAA2B,MAAM,GAAG;aAC1D;SACF,CAAC;QAEF,OAAO,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAChC;IAoDD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC;QAE3C,QACE,EAAC,IAAI,uDACH,+DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,QAAQ,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,gBAC3B,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,mBACb,IAAI,CAAC,QAAQ,EAC5B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,KAAK,EAAE,IAAI,CAAC,YAAY,EACxB,KAAK,EAAE,IAAI,CAAC,WAAW,CAAC;gBACtB,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,IAAI,EAAE,IAAI,CAAC,IAAI;gBACf,SAAS,EAAE,IAAI,CAAC,SAAS;gBACzB,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;aACxB,CAAC,IAED,IAAI,CAAC,OAAO,IAAI,6DAAM,IAAI,EAAC,SAAS,GAAQ,EAC7C,+DACE,6DAAM,IAAI,EAAC,QAAQ,IAAE,QAAQ,KAAK,QAAQ,IAAI,IAAI,IAAI,0DAAG,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAM,CAAQ,CAChG,EACP,+DAAO,IAAI,CAAC,UAAU,CAAQ,EAC9B,+DACE,6DAAM,IAAI,EAAC,QAAQ,IAAE,QAAQ,KAAK,QAAQ,IAAI,IAAI,IAAI,0DAAG,KAAK,EAAE,gBAAgB,GAAG,IAAI,GAAM,CAAQ,CAChG,CACA,CACJ,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["tv"],"sources":["src/components/button/types.ts","src/components/button/button.css?tag=bcm-button&encapsulation=shadow","src/components/button/button.component.tsx"],"sourcesContent":["export type ButtonKind = 'primary' | 'ghost' | 'text' | 'outline';\nexport type ButtonSize = 'small' | 'medium' | 'large';\nexport type ButtonType = 'button' | 'reset' | 'submit';\nexport type ButtonStatus = 'default' | 'success' | 'error' | 'warning' | 'info';\nexport type IconPosition = 'prefix' | 'suffix';\n\n// Button group position\nexport type ButtonPosition = 'first' | 'middle' | 'last' | null;\n\nexport interface VariantOption {\n  text: string;\n  icon?: string;\n  iconPosition?: IconPosition;\n  status?: ButtonStatus;\n  kind?: ButtonKind;\n}\n\nexport const variantOptions: Record<string, VariantOption> = {\n  save: {\n    text: 'Save',\n    status: 'success',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n    kind: 'primary',\n  },\n  ok: {\n    text: 'Ok',\n    status: 'success',\n    icon: 'far fa-check',\n    iconPosition: 'prefix',\n  },\n  new: {\n    text: 'New',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  add: {\n    text: 'Add',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  create: {\n    text: 'Create',\n    status: 'success',\n    icon: 'far fa-plus',\n    iconPosition: 'prefix',\n  },\n  prev: {\n    text: 'Prev',\n    status: 'default',\n    icon: 'far fa-arrow-left',\n    iconPosition: 'prefix',\n  },\n  next: {\n    text: 'Next',\n    status: 'default',\n    icon: 'far fa-arrow-right',\n    iconPosition: 'suffix',\n  },\n  apply: {\n    text: 'Apply',\n    status: 'default',\n    icon: 'far fa-check-circle',\n    iconPosition: 'prefix',\n  },\n  submit: {\n    text: 'Submit',\n    status: 'default',\n    icon: 'far fa-save',\n    iconPosition: 'prefix',\n  },\n  send: {\n    text: 'Send',\n    status: 'success',\n    icon: 'far fa-paper-plane',\n    iconPosition: 'prefix',\n  },\n  delete: {\n    text: 'Delete',\n    status: 'error',\n    icon: 'far fa-trash',\n    iconPosition: 'prefix',\n  },\n  cancel: {\n    text: 'Cancel',\n    status: 'error',\n    icon: 'far fa-times',\n    iconPosition: 'prefix',\n  },\n  decline: {\n    text: 'Decline',\n    status: 'error',\n    icon: 'far fa-ban',\n    iconPosition: 'prefix',\n  },\n  close: {\n    text: 'Close',\n    status: 'error',\n    icon: 'far fa-times-circle',\n    iconPosition: 'prefix',\n  },\n  archive: {\n    text: 'Archive',\n    status: 'error',\n    icon: 'far fa-folder-open',\n    iconPosition: 'prefix',\n  },\n  remove: {\n    text: 'Remove',\n    status: 'error',\n    icon: 'far fa-minus-circle',\n    iconPosition: 'prefix',\n  },\n  edit: {\n    text: 'Edit',\n    status: 'default',\n    icon: 'far fa-edit',\n    iconPosition: 'prefix',\n  },\n  export: {\n    text: 'Export',\n    status: 'default',\n    icon: 'far fa-sign-out',\n    iconPosition: 'prefix',\n  },\n  import: {\n    text: 'Import',\n    status: 'default',\n    icon: 'far fa-sign-in',\n    iconPosition: 'prefix',\n  },\n  filter: {\n    text: 'Filter',\n    status: 'default',\n    icon: 'far fa-filter',\n    iconPosition: 'prefix',\n  },\n  update: {\n    text: 'Update',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  reset: {\n    text: 'Reset',\n    status: 'default',\n    icon: 'far fa-sync',\n    iconPosition: 'prefix',\n  },\n  download: {\n    text: 'Download',\n    status: 'default',\n    icon: 'far fa-download',\n    iconPosition: 'prefix',\n  },\n};\n\nexport type ButtonVariant = keyof typeof variantOptions;\n",":host {\n  display: inline-block;\n  position: relative;\n}\n\n:host([full-width]) {\n  width: 100%;\n}\n\n:host([position='first']) .bcm-button {\n  border-top-right-radius: 0;\n  border-bottom-right-radius: 0;\n}\n\n:host([position='middle']) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last']) .bcm-button {\n  border-top-left-radius: 0;\n  border-bottom-left-radius: 0;\n}\n\n:host([position='first'].orientation-vertical) .bcm-button {\n  border-bottom-left-radius: 0;\n  border-bottom-right-radius: 0;\n  border-top-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-top-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n\n:host([position='middle'].orientation-vertical) .bcm-button {\n  border-radius: 0;\n}\n\n:host([position='last'].orientation-vertical) .bcm-button {\n  border-top-left-radius: 0;\n  border-top-right-radius: 0;\n  border-bottom-right-radius: var(--bcm-ui-border-radius, 4px);\n  border-bottom-left-radius: var(--bcm-ui-border-radius, 4px);\n}\n","import { Component, Prop, h, Event, EventEmitter, Host } from '@stencil/core';\nimport { ButtonKind, ButtonSize, ButtonType, ButtonStatus, ButtonVariant, IconPosition, ButtonPosition, variantOptions } from './types';\nimport { tv } from 'tailwind-variants';\n\n@Component({\n  tag: 'bcm-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class BcmButton {\n  /** Defines the main visual style of the button */\n  @Prop()\n  kind: ButtonKind = 'primary';\n\n  /** Controls the button size */\n  @Prop()\n  size: ButtonSize = 'medium';\n\n  /** Defines the button's status/state color */\n  @Prop()\n  status: ButtonStatus = 'default';\n\n  /** Predefined button variants */\n  @Prop()\n  variant?: ButtonVariant;\n\n  /** Button position in button group (first, middle, last) */\n  @Prop({ reflect: true })\n  position?: ButtonPosition;\n\n  /** Icon class name */\n  @Prop()\n  icon?: string;\n\n  /** Icon placement (prefix/suffix) */\n  @Prop()\n  iconPosition: IconPosition = 'prefix';\n\n  /** Icon-only button mode */\n  @Prop()\n  iconOnly = false;\n\n  /** Full width button */\n  @Prop({ attribute: 'full-width', reflect: true })\n  fullWidth = false;\n\n  /** HTML button type */\n  @Prop()\n  type: ButtonType = 'button';\n\n  /** Loading state */\n  @Prop()\n  loading = false;\n\n  /** Disabled state */\n  @Prop()\n  disabled = false;\n\n  /** Button text content */\n  @Prop()\n  text?: string;\n\n  /** Active state */\n  @Prop()\n  active = false;\n\n  /** Form association */\n  @Prop()\n  form: string;\n\n  @Prop()\n  value: string;\n\n  @Prop()\n  name: string;\n\n  /** Screen reader label */\n  @Prop()\n  label: string;\n\n  /** Expanded state for expandable content */\n  @Prop()\n  expanded?: string;\n\n  /** ID of controlled element */\n  @Prop()\n  controls: string;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmClick: EventEmitter<MouseEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmFocus: EventEmitter<FocusEvent>;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n  })\n  bcmBlur: EventEmitter<FocusEvent>;\n\n  private handleClick = (event: MouseEvent) => {\n    if (!this.disabled && !this.loading) {\n      this.bcmClick.emit(event);\n    }\n  };\n\n  private handleFocus = (event: FocusEvent) => {\n    this.bcmFocus.emit(event);\n  };\n\n  private handleBlur = (event: FocusEvent) => {\n    this.bcmBlur.emit(event);\n  };\n\n  private get buttonText(): string {\n    return this.text || (this.variant ? variantOptions[this.variant].text : '');\n  }\n\n  private get buttonIcon(): { icon?: string; position: IconPosition } {\n    if (this.variant && variantOptions[this.variant].icon) {\n      return {\n        icon: variantOptions[this.variant].icon,\n        position: variantOptions[this.variant].iconPosition || 'prefix',\n      };\n    }\n\n    return {\n      icon: this.icon,\n      position: this.iconPosition,\n    };\n  }\n\n  private get buttonStatus(): ButtonStatus {\n    return this.variant ? variantOptions[this.variant].status : this.status;\n  }\n\n  private get buttonStyles() {\n    const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;\n\n    const kindStyleMap = {\n      primary: {\n        '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,\n        '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,\n        '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': 'var(--bcm-ui-color-text-base)',\n      },\n      outline: {\n        '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      ghost: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,\n      },\n      text: {\n        '--bcm-button-bg': 'transparent',\n        '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',\n        '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',\n        '--bcm-button-border': 'transparent',\n        '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,\n      },\n    };\n\n    return kindStyleMap[this.kind];\n  }\n\n  private buttonClass = tv(\n    {\n      base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',\n      variants: {\n        size: {\n          small: 'text-size-4 py-px px-2 min-h-6',\n          medium: 'text-size-5 py-0.5 px-3 min-h-8',\n          large: 'text-size-6 py-1 px-3 min-h-10',\n        },\n        kind: {\n          primary: 'kind-primary',\n          ghost: 'kind-ghost',\n          text: 'kind-text',\n          outline: 'kind-outline',\n        },\n        fullWidth: {\n          true: 'full-width w-full',\n        },\n        disabled: {\n          true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',\n          false: [\n            'cursor-pointer',\n            'bg-[--bcm-button-bg] text-[--bcm-button-text] border-[--bcm-button-border]',\n            'hover:bg-[--bcm-button-bg-hover]',\n            'active:bg-[--bcm-button-bg-active]',\n            'focus-visible:ring',\n          ],\n        },\n        loading: {\n          true: '',\n        },\n        position: {\n          first: 'position-first',\n          middle: 'position-middle',\n          last: 'position-last',\n        },\n      },\n      defaultVariants: {\n        size: 'medium',\n        kind: 'primary',\n        fullWidth: false,\n        disabled: false,\n        loading: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    const { icon, position } = this.buttonIcon;\n\n    return (\n      <Host>\n        <button\n          type={this.type}\n          disabled={this.disabled || this.loading}\n          aria-label={this.label}\n          aria-expanded={this.expanded}\n          aria-controls={this.controls}\n          aria-disabled={this.disabled}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n          style={this.buttonStyles}\n          class={this.buttonClass({\n            size: this.size,\n            kind: this.kind,\n            fullWidth: this.fullWidth,\n            disabled: this.disabled,\n            loading: this.loading,\n            position: this.position,\n          })}\n        >\n          {this.loading && <slot name=\"loading\"></slot>}\n          <span>\n            <slot name=\"prefix\">{position === 'prefix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n          <slot>{this.buttonText}</slot>\n          <span>\n            <slot name=\"suffix\">{position === 'suffix' && icon && <i class={' leading-none ' + icon}></i>}</slot>\n          </span>\n        </button>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/esm/app-globals-bfa07b76.js.map

@@ -1 +1 @@
-{"file":"app-globals-bfa07b76.js","mappings":"AAAA,SAAS,aAAa,CAAC,GAAG,EAAE;AAC5B,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC;AAC1B,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;AAC1C,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG;AAChC,QAAQ,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAC1B;AACA,IAAI,IAAI,CAAC,WAAW,CAAC;AACrB;;AAEA,MAAM,aAAa,GAAG,qEAAqE,CAAC;;AAE5F,IAAI,WAAW,GAAG;;AAElB,QAAQ,MAAM,MAAM;AACpB,QAAQ;AACR;AACA;AACA,MAAM,CAAC,CAAC;AACR,KAAK;AACL,IAAI,IAAI,IAAI,GAAG;AACf,QAAQ,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;AACjD,KAAK;AACL,IAAI;AACJ;;AAEA,IAAI;AACJ,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;AAC5C;;AAEA,CAAC,CAAC,CAAC;AACI,MAAM,QAAQ,GAAG,MAAM,GAAG;;AC7BrB,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n  const head = document.head;\n  const script = document.createElement('script');\n  Object.keys(obj).forEach(key => {\n    script[key] = obj[key];\n  });\n  head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\ncustomElements.define(\n  'bcm-icon',\n  class extends HTMLElement {\n    constructor() {\n      super();\n      const shadow = this.attachShadow({ mode: 'open' });\n      shadow.innerHTML = `\n        <link rel=\"stylesheet\" href=\"${FA_GLOBAL_CSS}\"/>\n        <i></i>\n      `;\n    }\n\n    get icon() {\n      return this.getAttribute('name') || this.getAttribute('icon-name');\n    }\n\n    set icon(icon) {\n      this.shadowRoot.querySelector('i').className = `${icon}`;\n    }\n\n    connectedCallback() {\n      this.style.display = 'inline-block';\n      this.icon = this.icon;\n    }\n  },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/bromcom-ui-next/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"version":3}
+{"file":"app-globals-bfa07b76.js","mappings":"AAAA,SAAS,aAAa,CAAC,GAAG,EAAE;AAC5B,IAAI,MAAM,IAAI,GAAG,QAAQ,CAAC;AAC1B,IAAI,MAAM,MAAM,GAAG,QAAQ,CAAC,aAAa,CAAC;AAC1C,IAAI,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,GAAG;AAChC,QAAQ,MAAM,CAAC,GAAG,CAAC,GAAG,GAAG,CAAC;AAC1B;AACA,IAAI,IAAI,CAAC,WAAW,CAAC;AACrB;;AAEA,MAAM,aAAa,GAAG,qEAAqE,CAAC;;AAE5F,IAAI,WAAW,GAAG;;AAElB,QAAQ,MAAM,MAAM;AACpB,QAAQ;AACR;AACA;AACA,MAAM,CAAC,CAAC;AACR,KAAK;AACL,IAAI,IAAI,IAAI,GAAG;AACf,QAAQ,OAAO,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC;AACjD,KAAK;AACL,IAAI;AACJ;;AAEA,IAAI;AACJ,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;AAC5C;;AAEA,CAAC,CAAC,CAAC;AACI,MAAM,QAAQ,GAAG,MAAM,GAAG;;AC7BrB,MAAC,aAAa,GAAGA;;;;","names":["appGlobalScript"],"sources":["src/global/global.js","@stencil/core/internal/app-globals"],"sourcesContent":["function addHeadScript(obj) {\n  const head = document.head;\n  const script = document.createElement('script');\n  Object.keys(obj).forEach(key => {\n    script[key] = obj[key];\n  });\n  head.appendChild(script);\n}\n\naddHeadScript({ src: 'https://kit.fontawesome.com/5e86bea963.js', crossOrigin: 'anonymous' });\n\nconst FA_GLOBAL_CSS = 'https://designsystem.bromcomcloud.com/fontawesome/6/css/all.min.css';\n\ncustomElements.define(\n  'bcm-icon',\n  class extends HTMLElement {\n    constructor() {\n      super();\n      const shadow = this.attachShadow({ mode: 'open' });\n      shadow.innerHTML = `\n        <link rel=\"stylesheet\" href=\"${FA_GLOBAL_CSS}\"/>\n        <i></i>\n      `;\n    }\n\n    get icon() {\n      return this.getAttribute('name') || this.getAttribute('icon-name');\n    }\n\n    set icon(icon) {\n      this.shadowRoot.querySelector('i').className = `${icon}`;\n    }\n\n    connectedCallback() {\n      this.style.display = 'inline-block';\n      this.icon = this.icon;\n    }\n  },\n);\n","import appGlobalScript from '/Users/muratpolatozkan/works/bromcom/bromcom-ui-v2/src/global/global.js';\nexport const globalScripts = appGlobalScript;\n"],"version":3}

package/dist/esm/bcm-accordion-group.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-27cc1bac.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8571fbf7.js';
 
-const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);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)}";
+const accordionGroupCss = ".block{display:block}:host{--bcm-accordion-border:var(--bcm-ui-color-border-default);--bcm-accordion-radius:6px;display:block;width:100%}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.collapse{visibility:collapse}.static{position:static}.flex{display:flex}.w-full{width:100%}.flex-col{flex-direction:column}.rounded-\\[--bcm-accordion-radius\\]{border-radius:var(--bcm-accordion-radius)}.border{border-width:1px}.border-solid{border-style:solid}.border-\\[--bcm-accordion-border\\]{border-color:var(--bcm-accordion-border)}.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)}";
 const BcmAccordionGroupStyle0 = accordionGroupCss;
 
 const BcmAccordionGroup = class {

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

@@ -1 +1 @@
-{"file":"bcm-accordion-group.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,uhCAAuhC,CAAC;AACljC,gCAAe,iBAAiB;;MCmEnB,iBAAiB;IAL9B;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5B,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;","names":[],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"version":3}
+{"file":"bcm-accordion-group.entry.js","mappings":";;AAAA,MAAM,iBAAiB,GAAG,u9BAAu9B,CAAC;AACl/B,gCAAe,iBAAiB;;MCmEnB,iBAAiB;IAL9B;;;;QAUY,UAAK,GAAY,KAAK,CAAC;;QAGtB,mBAAc,GAA8B,EAAE,CAAC;;;;QAoDhD,qBAAgB,GAAG;YACvB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC,CAAC;YAC9E,IAAI,CAAC,gBAAgB,EAAE,CAAC;;YAExB,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;gBAClC,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;aAC/D;SACJ,CAAC;KAuCL;;;;;IApFG,MAAM,SAAS;QACX,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,6CAA6C,CAAC,CAAC;YAC5D,OAAO;SACV;QACD,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;KACrE;;;;IAMD,MAAM,WAAW;QACb,MAAM,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;KACvE;;;;IAMD,MAAM,gBAAgB;QAClB,OAAO,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;KAC5D;IAED,iBAAiB;QACb,IAAI,CAAC,gBAAgB,EAAE,CAAC;KAC3B;IAGO,gBAAgB;QACpB,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;YAC5B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC;SACrB,CAAC,CAAC;KACN;;;;IAkBD,qBAAqB,CAAC,KAA4C;QAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,CAAC;QAE3C,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE;YACb,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI;gBAC5B,IAAI,IAAI,KAAK,MAAM,EAAE;oBACjB,IAAI,CAAC,QAAQ,EAAE,CAAC;iBACnB;gBACD,IAAI,CAAC,QAAQ,GAAG,IAAI,KAAK,MAAM,GAAG,QAAQ,GAAG,KAAK,CAAC;aACtD,CAAC,CAAC;SACN;QAED,MAAM,aAAa,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,IAAI,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC;QACxE,IAAI,CAAC,uBAAuB,CAAC,IAAI,CAAC;YAC9B,QAAQ;YACR,OAAO,EAAE,MAAM;YACf,aAAa;YACb,aAAa,EAAE,aAAa,CAAC,MAAM;SACtC,CAAC,CAAC;KACN;IAED,MAAM;QACF,QACI,4DACI,KAAK,EAAC,0HAA0H,EAChI,IAAI,EAAC,OAAO,gBACD,iBAAiB,IAE5B,6DAAM,YAAY,EAAE,IAAI,CAAC,gBAAgB,GAAS,CAChD,EACR;KACL;;;;;;;","names":[],"sources":["src/components/accordion-group/accordion-group.css?tag=bcm-accordion-group&encapsulation=shadow","src/components/accordion-group/accordion-group.component.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  --bcm-accordion-border: var(--bcm-ui-color-border-default);\n  --bcm-accordion-radius: 6px;\n}\n","\nimport { Component, ComponentInterface, h, Element, Prop, Listen, State, Event, EventEmitter, Method } from '@stencil/core';\nimport { AccordionChangeEventType } from '../accordion/types';\nimport { AccordionGroupChangeEventType } from './types';\n\n/**\n* @component BcmAccordionGroup\n* @description A container component that manages a group of accordions. Provides single/multiple expansion \n* modes and methods for controlling all accordions simultaneously. Uses shadow DOM for style encapsulation.\n*\n* @example Basic usage - Single expansion mode\n* <bcm-accordion-group>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 1</div>\n*     <div>Content 1</div>\n*   </bcm-accordion>\n*   <bcm-accordion>\n*     <div slot=\"title\">Section 2</div>\n*     <div>Content 2</div>\n*   </bcm-accordion>\n* </bcm-accordion-group>\n*\n* @example Multiple expansion mode\n* <bcm-accordion-group multi={true}>\n*   <bcm-accordion>...</bcm-accordion>\n*   <bcm-accordion>...</bcm-accordion>\n* </bcm-accordion-group>\n* \n* @example Event handling\n* // Listen to accordion group changes\n* const accordionGroup = document.querySelector('bcm-accordion-group');\n* accordionGroup.addEventListener('bcmAccordionGroupChange', (event) => {\n*   const { expanded, changed, expandedItems, expandedCount } = event.detail;\n*   console.log('Accordion expanded state:', expanded);\n*   console.log('Changed accordion:', changed);\n*   console.log('Currently expanded accordions:', expandedItems);\n*   console.log('Number of expanded accordions:', expandedCount);\n* });\n* \n* // Using methods\n* await accordionGroup.expandAll();   // Expands all accordions (only in multi mode)\n* await accordionGroup.collapseAll(); // Collapses all accordions\n* const expanded = await accordionGroup.getExpandedItems(); // Gets expanded accordions\n*\n* @prop {boolean} multi - Controls whether multiple accordions can be expanded simultaneously (default: false)\n*\n* @slot default - Container slot for bcm-accordion components\n*\n* @event {EventEmitter<AccordionGroupChangeEventType>} bcmAccordionGroupChange - Emitted when any accordion's state changes\n* @eventProperty {boolean} expanded - Current expanded state of the changed accordion\n* @eventProperty {HTMLElement} changed - The accordion element that triggered the change\n* @eventProperty {HTMLElement[]} expandedItems - Array of currently expanded accordion elements\n* @eventProperty {number} expandedCount - Number of currently expanded accordions\n*\n* @method expandAll() - Expands all accordions (only available in multi mode)\n* @method collapseAll() - Collapses all accordions\n* @method getExpandedItems() - Returns array of currently expanded accordions\n*\n* @csspart container - The accordion group container element\n*\n* @css {string} --bcm-accordion-border - Border color of the accordion group\n* @css {string} --bcm-accordion-radius - Border radius of the accordion group\n*/\n@Component({\n    tag: 'bcm-accordion-group',\n    styleUrl: 'accordion-group.css',\n    shadow: true,\n})\nexport class BcmAccordionGroup implements ComponentInterface {\n    /** Reference to the host element */\n    @Element() host: HTMLElement;\n\n    /** Controls whether multiple accordions can be expanded simultaneously */\n    @Prop() multi: boolean = false;\n\n    /** Array of accordion elements within the group */\n    @State() accordionItems: HTMLBcmAccordionElement[] = [];\n\n    /** Event emitted when any accordion's expanded state changes */\n    @Event({\n        composed: false,\n        bubbles: false,\n        cancelable: true,\n    }) bcmAccordionGroupChange: EventEmitter<AccordionGroupChangeEventType>;\n\n    /**\n     * Expands all accordions in the group\n     * Only available when multi=true\n     */\n    @Method()\n    async expandAll(): Promise<void> {\n        if (!this.multi) {\n            console.warn('expandAll is only available when multi=true');\n            return;\n        }\n        await Promise.all(this.accordionItems.map(item => item.expand()));\n    }\n\n    /**\n     * Collapses all accordions in the group\n     */\n    @Method()\n    async collapseAll(): Promise<void> {\n        await Promise.all(this.accordionItems.map(item => item.collapse()));\n    }\n\n    /**\n     * Returns an array of currently expanded accordion elements\n     */\n    @Method()\n    async getExpandedItems(): Promise<HTMLBcmAccordionElement[]> {\n        return this.accordionItems.filter(item => item.expanded);\n    }\n\n    componentWillLoad() {\n        this.handleSlotChange();\n    }\n\n\n    private setGroupBehavior(): void {\n        this.accordionItems.forEach(item => {\n            item.group = true;\n        });\n    }\n\n    /**\n     * Updates the accordion items array when slot content changes\n     */\n    private handleSlotChange = () => {\n        this.accordionItems = Array.from(this.host.querySelectorAll('bcm-accordion'));\n        this.setGroupBehavior();\n        // Validate accordion items\n        if (this.accordionItems.length === 0) {\n            console.warn('No accordion items found in accordion group');\n        }\n    };\n\n    /**\n     * Handles state changes of individual accordions\n     */\n    @Listen('bcmAccordionChange', { capture: true })\n    handleAccordionChange(event: CustomEvent<AccordionChangeEventType>) {\n        this.handleSlotChange();\n        const { expanded, source } = event?.detail;\n\n        if (!this.multi) {\n            this.accordionItems.forEach(item => {\n                if (item !== source) {\n                    item.collapse();\n                }\n                item.expanded = item === source ? expanded : false;\n            });\n        }\n\n        const expandedItems = this.accordionItems.filter(item => item.expanded);\n        this.bcmAccordionGroupChange.emit({\n            expanded,\n            changed: source,\n            expandedItems,\n            expandedCount: expandedItems.length,\n        });\n    }\n\n    render() {\n        return (\n            <div\n                class=\"flex flex-col bcm-ui-element w-full border border-solid border-[--bcm-accordion-border] rounded-[--bcm-accordion-radius]\"\n                role=\"group\"\n                aria-label=\"Accordion group\"\n            >\n                <slot onSlotchange={this.handleSlotChange}></slot>\n            </div>\n        );\n    }\n}"],"version":3}

package/dist/esm/bcm-accordion.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-27cc1bac.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8571fbf7.js';
 import { c as ce } from './index-f3b17e60.js';
 
-const accordionCss = ".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)}.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:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);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)}";
+const accordionCss = ".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)}.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)}";
 const BcmAccordionStyle0 = accordionCss;
 
 const BcmAccordion = class {

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

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

package/dist/esm/bcm-alert.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h } from './index-27cc1bac.js';
+import { r as registerInstance, c as createEvent, h } from './index-8571fbf7.js';
 import { c as ce } from './index-f3b17e60.js';
 
-const alertCss = ":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}.static{position:static}.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:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}";
+const alertCss = ":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}.static{position:static}.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)}";
 const BcmAlertStyle0 = alertCss;
 
 const BcmAlert = class {

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

@@ -1 +1 @@
-{"file":"bcm-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,y8CAAy8C,CAAC;AAC39C,uBAAe,QAAQ;;MCaV,QAAQ;IALrB;;;;QAQI,WAAM,GAAiB,SAAS,CAAC;;QAIjC,SAAI,GAAe,QAAQ,CAAC;;QAI5B,SAAI,GAAe,QAAQ,CAAC;;QAI5B,gBAAW,GAAa,IAAI,CAAC;;QAI7B,mBAAc,GAAa,IAAI,CAAC;KAiGnC;;;;;IAxFW,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;IAEO,aAAa;QACjB,MAAM,UAAU,GAAG;YACf,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,4BAA4B;SACxC,CAAC;QACF,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAClC;IAED,IAAY,UAAU;QAClB,OAAOA,EAAE,CACL;YACI,KAAK,EAAE;gBACH,IAAI,EAAE,+JAA+J;gBACrK,OAAO,EAAE,yBAAyB;aACrC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;oBACD,MAAM,EAAE;wBACJ,IAAI,EAAE,kBAAkB;qBAC3B;oBACD,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;iBACJ;aACJ;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KACL;IAED,IAAY,WAAW;QACnB,IAAI,WAAW,GAAG;YACd,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,OAAO,EAAE,uDAAuD;YAChE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,qDAAqD;SACjE,CAAC;QAEF,IAAI,eAAe,GAAG;YAClB,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,gCAAgC;YACvC,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;SAC9C,CAAC;QAEF,IAAI,UAAU,GAAG;YACb,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,IAAI,SAAS,GAAG;YACZ,gBAAgB,EAAE,aAAa;YAC/B,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;KAC1D;IAED,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,QACI,4DAAK,IAAI,EAAC,OAAO,eAAW,WAAW,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAC7F,4DAAK,KAAK,EAAE,OAAO,EAAE,IAChB,IAAI,CAAC,cAAc,IAAI,8EAAqB,IAAI,CAAC,aAAa,EAAE,GAAa,EAC9E,8DAAa,CACX,EACN,4DAAK,KAAK,EAAE,OAAO,EAAE,IACjB,4DAAK,IAAI,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,EACN,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,IAAI,iEAAU,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,gBAAgB,eAAW,qBAAqB,GAAY,CAAQ,CAC1J,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n  --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-alert-text: var(--bcm-ui-color-text-default);\n  --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\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    /**\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":"bcm-alert.entry.js","mappings":";;;AAAA,MAAM,QAAQ,GAAG,y4CAAy4C,CAAC;AAC35C,uBAAe,QAAQ;;MCaV,QAAQ;IALrB;;;;QAQI,WAAM,GAAiB,SAAS,CAAC;;QAIjC,SAAI,GAAe,QAAQ,CAAC;;QAI5B,SAAI,GAAe,QAAQ,CAAC;;QAI5B,gBAAW,GAAa,IAAI,CAAC;;QAI7B,mBAAc,GAAa,IAAI,CAAC;KAiGnC;;;;;IAxFW,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KAC1B;IAEO,aAAa;QACjB,MAAM,UAAU,GAAG;YACf,IAAI,EAAE,2BAA2B;YACjC,KAAK,EAAE,kCAAkC;YACzC,OAAO,EAAE,oCAAoC;YAC7C,OAAO,EAAE,4BAA4B;SACxC,CAAC;QACF,OAAO,UAAU,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KAClC;IAED,IAAY,UAAU;QAClB,OAAOA,EAAE,CACL;YACI,KAAK,EAAE;gBACH,IAAI,EAAE,+JAA+J;gBACrK,OAAO,EAAE,yBAAyB;aACrC;YACD,QAAQ,EAAE;gBACN,IAAI,EAAE;oBACF,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;oBACD,MAAM,EAAE;wBACJ,IAAI,EAAE,kBAAkB;qBAC3B;oBACD,KAAK,EAAE;wBACH,IAAI,EAAE,oBAAoB;qBAC7B;iBACJ;aACJ;SACJ,EACD;YACI,OAAO,EAAE,KAAK;SACjB,CACJ,CAAC;KACL;IAED,IAAY,WAAW;QACnB,IAAI,WAAW,GAAG;YACd,IAAI,EAAE,qDAAqD;YAC3D,KAAK,EAAE,oDAAoD;YAC3D,OAAO,EAAE,uDAAuD;YAChE,OAAO,EAAE,sDAAsD;YAC/D,OAAO,EAAE,qDAAqD;SACjE,CAAC;QAEF,IAAI,eAAe,GAAG;YAClB,IAAI,EAAE,+BAA+B;YACrC,KAAK,EAAE,gCAAgC;YACvC,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;YAC3C,OAAO,EAAE,kCAAkC;SAC9C,CAAC;QAEF,IAAI,UAAU,GAAG;YACb,gBAAgB,EAAE,WAAW,CAAC,IAAI,CAAC,MAAM,CAAC;YAC1C,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,IAAI,SAAS,GAAG;YACZ,gBAAgB,EAAE,aAAa;YAC/B,kBAAkB,EAAE,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC;SACnD,CAAC;QAEF,OAAO,IAAI,CAAC,IAAI,KAAK,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAC;KAC1D;IAED,MAAM;QACF,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAC/D,QACI,4DAAK,IAAI,EAAC,OAAO,eAAW,WAAW,iBAAa,MAAM,EAAC,KAAK,EAAE,IAAI,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,WAAW,IAC7F,4DAAK,KAAK,EAAE,OAAO,EAAE,IAChB,IAAI,CAAC,cAAc,IAAI,8EAAqB,IAAI,CAAC,aAAa,EAAE,GAAa,EAC9E,8DAAa,CACX,EACN,4DAAK,KAAK,EAAE,OAAO,EAAE,IACjB,4DAAK,IAAI,EAAC,QAAQ,IACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACzB,EACN,6DAAM,IAAI,EAAC,MAAM,IAAE,IAAI,CAAC,WAAW,IAAI,iEAAU,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,EAAE,EAAE,KAAK,EAAC,gBAAgB,eAAW,qBAAqB,GAAY,CAAQ,CAC1J,CACJ,EACR;KACL;;;;;;","names":["tv"],"sources":["src/components/alert/alert.css?tag=bcm-alert&encapsulation=shadow","src/components/alert/alert.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n  --bcm-alert-bg: var(--bcm-ui-color-background-default-default);\n  --bcm-alert-text: var(--bcm-ui-color-text-default);\n  --bcm-alert-radius: 6px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter } from '@stencil/core';\nimport { AlertKind, AlertSize, AlertStatus } from './types';\nimport { tv } from 'tailwind-variants';\n\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    /**\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}