bromcom-ui-next 0.1.21 → 0.1.22

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

@@ -1,1412 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-18b75a47.js';
-import { t as tv } from './tv-6dcd2224.js';
-import { c as classNames } from './index-097075ad.js';
-import { g as generateId } from './generate-id-3b2fcb93.js';
-import { s as setValidationMessages, g as getValidationMessage, d as defaultValidationMessages } from './validation-messages-af4512f0.js';
-import { a as autoUpdate, o as offset, f as flip, s as shift, c as computePosition } from './floating-ui.dom.esm-b7749b71.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-final-border-color\\]{border-color:var(--bcm-final-border-color)}.border-color-disabled{border-color:var(--bcm-ui-color-border-disabled)}.bg-\\[--bcm-final-bg-color\\]{background-color:var(--bcm-final-bg-color)}.bg-\\[--bcm-ui-color-background-disabled-default\\]{background-color:var(--bcm-ui-color-background-disabled-default)}.px-2{padding-left:.5rem;padding-right:.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.leading-none{line-height:1}.text-\\[--bcm-final-text-color\\]{color:var(--bcm-final-text-color)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.outline{outline-style:solid}.outline-0{outline-width:0}.hover\\:bg-\\[--bcm-final-hover-bg-color\\]:hover{background-color:var(--bcm-final-hover-bg-color)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.active\\:bg-\\[--bcm-final-active-bg-color\\]:active{background-color:var(--bcm-final-active-bg-color)}.flex{display:flex}.max-h-64{max-height:16rem}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.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)}.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}.hidden{display:none}.size-6{height:1.5rem;width:1.5rem}.h-2{height:.5rem}.w-4{width:1rem}.max-w-80{max-width:20rem}.max-w-96{max-width:24rem}.flex-1{flex:1 1 0%}.flex-row{flex-direction:row}.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)}";
-const BcmButtonStyle0 = buttonCss;
-
-const BcmButton = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        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 = tv({
-            base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',
-            variants: {
-                size: {
-                    small: 'text-size-4 py-px px-2 min-h-6',
-                    medium: 'text-size-5 py-0.5 px-3 min-h-8',
-                    large: 'text-size-6 py-1 px-3 min-h-10',
-                },
-                kind: {
-                    primary: 'kind-primary',
-                    ghost: 'kind-ghost',
-                    text: 'kind-text',
-                    outline: 'kind-outline',
-                },
-                fullWidth: {
-                    true: 'full-width w-full',
-                },
-                disabled: {
-                    true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',
-                    false: [
-                        'cursor-pointer',
-                        'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',
-                        'hover:bg-[--bcm-final-hover-bg-color]',
-                        'active:bg-[--bcm-final-active-bg-color]',
-                        'focus-visible:ring',
-                    ],
-                },
-                loading: {
-                    true: '',
-                },
-                position: {
-                    first: 'position-first',
-                    middle: 'position-middle',
-                    last: 'position-last',
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                kind: 'primary',
-                fullWidth: false,
-                disabled: false,
-                loading: false,
-            },
-        }, {
-            twMerge: false,
-        });
-    }
-    get buttonText() {
-        return this.text || (this.variant ? variantOptions[this.variant].text : '');
-    }
-    get buttonIcon() {
-        if (this.variant && variantOptions[this.variant].icon) {
-            return {
-                icon: variantOptions[this.variant].icon,
-                position: variantOptions[this.variant].iconPosition || 'prefix',
-            };
-        }
-        return {
-            icon: this.icon,
-            position: this.iconPosition,
-        };
-    }
-    get buttonStatus() {
-        return this.variant ? variantOptions[this.variant].status : this.status;
-    }
-    get buttonStyles() {
-        const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;
-        // These are the internal default styles based on component props (kind, status)
-        const kindStyleMap = {
-            primary: {
-                '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,
-                '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,
-                '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,
-                '--bcm-button-border': 'transparent',
-                '--bcm-button-text': 'var(--bcm-ui-color-text-base)',
-            },
-            outline: {
-                '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',
-                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
-                '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,
-                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
-            },
-            ghost: {
-                '--bcm-button-bg': 'transparent',
-                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
-                '--bcm-button-border': 'transparent',
-                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
-            },
-            text: {
-                '--bcm-button-bg': 'transparent',
-                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
-                '--bcm-button-border': 'transparent',
-                '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,
-            },
-        };
-        const internalDefaultStyles = kindStyleMap[this.kind];
-        // These are the "final" CSS custom properties used by the component's styling.
-        // They use the "--bcm-button-custom-..." token if provided by the user,
-        // otherwise, they fall back to the internal "--bcm-button-..." style defined above.
-        const finalEffectiveStyles = {
-            '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,
-            '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,
-            '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,
-            '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,
-            '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,
-        };
-        // return kindStyleMap[this.kind];
-        return Object.assign(Object.assign({}, internalDefaultStyles), finalEffectiveStyles);
-    }
-    render() {
-        const { icon, position } = this.buttonIcon;
-        return (h(Host, { key: '33e438220fdb261ff87289f8dcbaa7e0601d73c1' }, h("button", { key: '4fb4d22a44bac12b3780f9570c734f60fdaba788', 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: 'fa8dcbcba338f94700842fd0482d0261c9a1d3e3', name: "loading" }), h("span", { key: '345162b4ad0034d5081dee0438ceeefe4930ecfb' }, h("slot", { key: 'c65c9aa07fd2f159426192fc6239c394ee6ec58d', name: "prefix" }, position === 'prefix' && icon && h("i", { key: 'c94e32a5d308ba3ad98ac10239fc9a155f47e2ac', class: ' leading-none ' + icon }))), h("slot", { key: '171402bb9251492c7e5b0cf572fb0e2ae62a6add' }, this.buttonText), h("span", { key: 'ae3c5a885029b3d4c54e5ca21ac22adffa26b013' }, h("slot", { key: 'f80819d122624bb279d19822278c8e651dec27c7', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '69631e99a8b7f47dd1d00984f582ec6e7b5433e8', class: ' leading-none ' + icon }))))));
-    }
-};
-BcmButton.style = BcmButtonStyle0;
-
-const drawerCss = ".contents{display:contents}:host{display:contents}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.visible{visibility:visible}.invisible{visibility:hidden}.static{position:static}.fixed{position:fixed}.inset-0{inset:0}.bottom-0{bottom:0}.left-0{left:0}.right-0{right:0}.top-0{top:0}.z-40{z-index:40}.z-50{z-index:50}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.w-6{width:1.5rem}.flex-grow{flex-grow:1}.-translate-x-full{--tw-translate-x:-100%}.-translate-x-full,.-translate-y-full{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))}.-translate-y-full{--tw-translate-y:-100%}.translate-x-0{--tw-translate-x:0px}.translate-x-0,.translate-x-full{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))}.translate-x-full{--tw-translate-x:100%}.translate-y-0{--tw-translate-y:0px}.translate-y-0,.translate-y-full{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))}.translate-y-full{--tw-translate-y:100%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-between{justify-content:space-between}.overflow-y-auto{overflow-y:auto}.border-none{border-style:none}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.bg-color-transparent{background-color:var(--bcm-ui-color-background-transparent-default)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-default{color:var(--bcm-ui-color-text-default)}.opacity-0{opacity:0}.opacity-100{opacity:1}.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-opacity{transition-duration:.15s;transition-property:opacity;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)}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.active\\:bg-color-default-active:active{background-color:var(--bcm-ui-color-background-default-active)}";
-const BcmDrawerStyle0 = drawerCss;
-
-const BcmDrawer = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bcmOpen = createEvent(this, "bcmOpen", 7);
-        this.bcmClose = createEvent(this, "bcmClose", 7);
-        this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 7);
-        this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 7);
-        this.open = false;
-        this.size = 'medium';
-        this.position = 'right';
-        this.fullWidth = false;
-        this.noHeader = false;
-        this.drawerClass = tv({
-            slots: {
-                backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
-                wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
-                header: 'flex justify-between items-center bg-color-default text-color-default',
-                title: 'font-semibold m-0 text-size-6',
-                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
-                content: 'overflow-y-auto flex-grow',
-            },
-            variants: {
-                open: {
-                    true: {
-                        backdrop: 'opacity-100 visible',
-                    },
-                    false: {
-                        backdrop: 'opacity-0 invisible',
-                    },
-                },
-                position: {
-                    left: {
-                        wrapper: 'top-0 left-0 bottom-0',
-                    },
-                    right: {
-                        wrapper: 'top-0 right-0 bottom-0',
-                    },
-                    top: {
-                        wrapper: 'top-0 left-0 right-0',
-                    },
-                    bottom: {
-                        wrapper: 'bottom-0 left-0 right-0',
-                    },
-                },
-                size: {
-                    small: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                    },
-                    medium: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                    },
-                    large: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                    },
-                },
-                noHeader: {
-                    true: {
-                        header: 'hidden',
-                    },
-                },
-            },
-            compoundVariants: [
-                {
-                    open: true,
-                    position: ['left', 'right'],
-                    class: {
-                        wrapper: 'translate-x-0',
-                    },
-                },
-                {
-                    open: true,
-                    position: ['top', 'bottom'],
-                    class: {
-                        wrapper: 'translate-y-0',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'left',
-                    class: {
-                        wrapper: '-translate-x-full',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'right',
-                    class: {
-                        wrapper: 'translate-x-full',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'top',
-                    class: {
-                        wrapper: '-translate-y-full',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'bottom',
-                    class: {
-                        wrapper: 'translate-y-full',
-                    },
-                },
-            ],
-        });
-    }
-    handleOpenChange(isOpen) {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-            this.bcmOpen.emit();
-        }
-        else {
-            document.body.style.overflow = '';
-            this.bcmClose.emit();
-        }
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.open) {
-            this.hide();
-        }
-    }
-    async show() {
-        const event = this.bcmBeforeOpen.emit();
-        if (!event.defaultPrevented) {
-            this.open = true;
-        }
-    }
-    async hide() {
-        const event = this.bcmBeforeClose.emit();
-        if (!event.defaultPrevented) {
-            this.open = false;
-        }
-    }
-    disconnectedCallback() {
-        document.body.style.overflow = '';
-    }
-    getWrapperStyle() {
-        const style = {};
-        if (this.fullWidth) {
-            if (this.position === 'left' || this.position === 'right') {
-                style.width = '100vw';
-            }
-            else {
-                style.height = '100vh';
-            }
-            return style;
-        }
-        if (this.position === 'left' || this.position === 'right') {
-            switch (this.size) {
-                case 'small':
-                    style.width = '320px';
-                    break;
-                case 'medium':
-                    style.width = '480px';
-                    break;
-                case 'large':
-                    style.width = '1064px';
-                    break;
-            }
-        }
-        else {
-            switch (this.size) {
-                case 'small':
-                    style.height = '40vh';
-                    break;
-                case 'medium':
-                    style.height = '60vh';
-                    break;
-                case 'large':
-                    style.height = '90vh';
-                    break;
-            }
-        }
-        return style;
-    }
-    render() {
-        const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({
-            open: this.open,
-            position: this.position,
-            size: this.size,
-            noHeader: this.noHeader,
-        });
-        return (h("div", { key: '44379905f1499a16d625ac4d1ff5e89fc6367d46', part: "base" }, h("div", { key: 'bc53e5322a61cd4af0691905c509d4c5fb765939', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: 'd5a666671d24b2f3b55b7462b5218a3e11358982', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: '5124de9d7fa8f3aa7267f0998f4c4f98f3ebbc4a', part: "header", class: header() }, h("h2", { key: '8aa4b971efa9fe0fafa1cfb94f0b6b96f21f2f15', part: "title", class: title() }, h("slot", { key: '949ae8f65d13e9e1c973c16a9f90205ac7e7042f', name: "header" }, this.headerText)), h("button", { key: 'a0c42761ee859e87dee5c267ea7245dde4fb8756', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: '2df273d63da93eda2280759a909906fe4ae0c493', name: "fa-solid fa-xmark" }))), h("div", { key: 'b2532537d10f9aa0dcfa2fca8ac806577363e05b', part: "content", class: content() }, h("slot", { key: 'bfec5cff35a7bf7bf1d9801ba89559501e6f301f' })), h("div", { key: '4d44fdba62c74fd5c893c5296f998754228cf961', part: "footer" }, h("slot", { key: 'fd0a58127fd2f0ba0955cef629e55700142a8f32', name: "footer" })))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-};
-BcmDrawer.style = BcmDrawerStyle0;
-
-const dropdownCss = ".visible{visibility:visible}.hidden{display:none}.static{position:static}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";
-const BcmDropdownStyle0 = dropdownCss;
-
-const Dropdown = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bcmDropdownChange = createEvent(this, "bcmDropdownChange", 1);
-        this.isReady = false;
-        this.dropdownItems = [];
-        this.dropdownClass = tv({
-            base: 'dropdown flex flex-col items-center min-w-10 shadow-3 max-w-64 max-h-64 w-full bg-color-basic-panel rounded-lg py-1.5 overflow-y-auto',
-        });
-        this.handleSlotChange = () => {
-            this.dropdownItems = Array.from(this.host.querySelectorAll('bcm-dropdown-item'));
-            if (this.dropdownItems.length === 0) {
-                console.warn('No dropdown items found in dropdown component');
-            }
-        };
-    }
-    componentDidLoad() {
-        const button = this.host.shadowRoot.querySelector('bcm-button');
-        if (button) {
-            this.buttonRef = button;
-            this.isReady = true;
-        }
-    }
-    handleDropdownItemChange(event) {
-        var _a;
-        const { element, selected } = event === null || event === void 0 ? void 0 : event.detail;
-        (_a = this.dropdownItems) === null || _a === void 0 ? void 0 : _a.forEach(item => {
-            if (item != element) {
-                item.selected = false;
-            }
-        });
-        this.bcmDropdownChange.emit({
-            element: element,
-            selected,
-        });
-    }
-    render() {
-        return (h(Host, { key: '6aaff12c84d38c32df5bc8dccb83421afb315eef' }, h("bcm-button", { key: '5612cef7303a6b839531e125c895a4e7b8d32282', kind: "outline" }, h("span", { key: '951418845cb1ec71fe6dc5bbbc33c49934447640', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: 'd594359d6a9b7c673307c6a92e6d69cc47be3e1a', targetElement: this.buttonRef }, h("div", { key: '9badba5b1e99af6a5d58b02e849cb0923e49dfd8', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: 'c8191f215600170475d514bb6b4056047e6442d2', onSlotchange: this.handleSlotChange }))))));
-    }
-    get host() { return getElement(this); }
-};
-Dropdown.style = BcmDropdownStyle0;
-
-const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
-const BcmDropdownItemStyle0 = dropdownItemCss;
-
-const DropdownItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bcmDropDownItemChange = createEvent(this, "bcmDropDownItemChange", 1);
-        this.selected = false;
-        this.error = false;
-        this.disabled = false;
-        this.dropdownItemClass = tv({
-            base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',
-            variants: {
-                selected: {
-                    true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',
-                    false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',
-                },
-                error: {
-                    true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',
-                    false: '',
-                },
-                disabled: {
-                    true: '', // should be discuss with ux team
-                    false: '',
-                },
-            },
-            defaultVariants: {
-                selected: false,
-                error: false,
-                disabled: false,
-            },
-        }, {
-            twMerge: false,
-        });
-    }
-    handleClick() {
-        this.selected = true;
-        this.bcmDropDownItemChange.emit({
-            element: this.host,
-            selected: this.selected,
-        });
-    }
-    render() {
-        var _a;
-        return (h("div", { key: '69beaac4c9225bc7803b4002f1543c18e76e36cc', "aria-checked": this.selected, class: this.dropdownItemClass({
-                selected: this.selected,
-                error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: 'ca2712023285689a1774b5869d982e87d3add46a', name: "left-content" }, this.icon && h("bcm-icon", { key: 'bef7483a47c823ed746c39ae37acc3a2360f0c59', "icon-name": this.icon })), h("div", { key: 'a9bdddf97d4a4e07e601599a4adb11354227dd0f', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '51c488350d2daabc32fc9693211a4e89d8cce16f' }, this.text)), h("slot", { key: '9bf3f8b4affa41ea72f181a073aea8cd56f8a2df', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
-    }
-    get host() { return getElement(this); }
-};
-DropdownItem.style = BcmDropdownItemStyle0;
-
-/**
- * Checks if a named slot has any content
- * @param element - The host element (component instance)
- * @param slotName - Name of the slot to check
- * @returns boolean indicating if the slot has any assigned nodes
- */
-const checkSlotContent = (element, slotName) => {
-    var _a;
-    const slot = (_a = element.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(`slot[name="${slotName}"]`);
-    if (!slot)
-        return false;
-    const assignedNodes = slot.assignedNodes();
-    return assignedNodes.length > 0;
-};
-
-const inputCss = ".visible{visibility:visible}.collapse{visibility:collapse}.relative{position:relative}.block{display:block}.table{display:table}.contents{display:contents}.hidden{display:none}.border-collapse{border-collapse:collapse}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize{resize:both}.border{border-width:1px}.underline{text-decoration-line:underline}.outline{outline-style:solid}/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid oklch(.928 .006 264.531);box-sizing:border-box}:after,:before{--tw-content:\"\"}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,sans-serif;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:oklch(.707 .022 261.325);opacity:1}input::placeholder,textarea::placeholder{color:oklch(.707 .022 261.325);opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}:host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.mt-1{margin-top:.25rem}.flex{display:flex}.h-10{height:2.5rem}.h-6{height:1.5rem}.h-8{height:2rem}.h-full{height:100%}.w-6{width:1.5rem}.w-full{width:100%}.flex-1{flex:1 1 0%}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.text-ellipsis{text-overflow:ellipsis}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-solid{border-style:solid}.border-\\[--bcm-ui-color-border-default\\]{border-color:var(--bcm-ui-color-border-default)}.border-\\[--bcm-ui-color-border-error\\]{border-color:var(--bcm-ui-color-border-error)}.border-\\[--bcm-ui-color-border-info\\]{border-color:var(--bcm-ui-color-border-info)}.border-\\[--bcm-ui-color-border-success\\]{border-color:var(--bcm-ui-color-border-success)}.border-\\[--bcm-ui-color-border-warning\\]{border-color:var(--bcm-ui-color-border-warning)}.bg-\\[--bcm-ui-color-background-base-default\\]{background-color:var(--bcm-ui-color-background-base-default)}.bg-transparent{background-color:transparent}.px-1{padding-left:.25rem;padding-right:.25rem}.px-2{padding-left:.5rem;padding-right:.5rem}.font-sans{font-family:Inter,sans-serif}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.font-medium{font-weight:500}.text-\\[--bcm-ui-color-text-caption\\]{color:var(--bcm-ui-color-text-caption)}.text-\\[--bcm-ui-color-text-default\\]{color:var(--bcm-ui-color-text-default)}.text-\\[--bcm-ui-color-text-disabled\\]{color:var(--bcm-ui-color-text-disabled)}.text-\\[--bcm-ui-color-text-error\\]{color:var(--bcm-ui-color-text-error)}.text-\\[--bcm-ui-color-text-info\\]{color:var(--bcm-ui-color-text-info)}.text-\\[--bcm-ui-color-text-success\\]{color:var(--bcm-ui-color-text-success)}.text-\\[--bcm-ui-color-text-warning\\]{color:var(--bcm-ui-color-text-warning)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-label{color:var(--bcm-ui-color-text-label)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.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-0{outline-width:0}.blur{--tw-blur:blur(8px);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition-colors{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1)}.duration-200{transition-duration:.2s}.placeholder\\:font-normal::placeholder{font-weight:400}.placeholder\\:text-\\[--bcm-ui-color-text-placeholder\\]::placeholder{color:var(--bcm-ui-color-text-placeholder)}.hover\\:border-\\[--bcm-ui-color-border-error\\]:hover{border-color:var(--bcm-ui-color-border-error)}.hover\\:border-\\[--bcm-ui-color-border-info\\]:hover{border-color:var(--bcm-ui-color-border-info)}.hover\\:border-\\[--bcm-ui-color-border-primary\\]:hover{border-color:var(--bcm-ui-color-border-primary)}.hover\\:border-\\[--bcm-ui-color-border-success\\]:hover{border-color:var(--bcm-ui-color-border-success)}.hover\\:border-\\[--bcm-ui-color-border-warning\\]:hover{border-color:var(--bcm-ui-color-border-warning)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-error\\]:has(:focus){border-color:var(--bcm-ui-color-border-error)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-info\\]:has(:focus){border-color:var(--bcm-ui-color-border-info)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-primary\\]:has(:focus){border-color:var(--bcm-ui-color-border-primary)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-success\\]:has(:focus){border-color:var(--bcm-ui-color-border-success)}.has-\\[\\:focus\\]\\:border-\\[--bcm-ui-color-border-warning\\]:has(:focus){border-color:var(--bcm-ui-color-border-warning)}.\\[\\&\\:\\:-webkit-inner-spin-button\\]\\:appearance-none::-webkit-inner-spin-button{appearance:none}";
-const BcmInputStyle0 = inputCss;
-
-const BcmInput = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bcmInput = createEvent(this, "bcmInput", 1);
-        this.bcmChange = createEvent(this, "bcmChange", 1);
-        this.bcmFocus = createEvent(this, "bcmFocus", 1);
-        this.bcmBlur = createEvent(this, "bcmBlur", 1);
-        this.bcmKeyDown = createEvent(this, "bcmKeyDown", 1);
-        this.bcmKeyUp = createEvent(this, "bcmKeyUp", 1);
-        this.isFocused = false;
-        this.isValid = true;
-        this.internalStatus = 'default';
-        this.isPasswordVisible = false;
-        /** Input value */
-        this.value = '';
-        /** Input id */
-        this._id = generateId('input');
-        /** Controls the input size */
-        this.size = 'medium';
-        /** Defines the input's status/state */
-        this.status = 'default';
-        /** Full width input */
-        this.fullWidth = false;
-        /** HTML input type */
-        this.type = 'text';
-        /** Whether the input is disabled */
-        this.disabled = false;
-        /** Whether the input is readonly */
-        this.readonly = false;
-        /** Whether the input is required */
-        this.required = false;
-        /** Whether to use native form validation
-         * If false, component will handle validation internally
-         */
-        this.useNativeValidation = true;
-        this.onInput = (event) => {
-            const input = event.target;
-            this.value = input.value;
-            this.bcmInput.emit(event);
-            this.validateInput();
-        };
-        this.onChange = (event) => {
-            this.bcmChange.emit(event);
-        };
-        this.onFocus = (event) => {
-            this.isFocused = true;
-            this.bcmFocus.emit(event);
-        };
-        this.onBlur = (event) => {
-            this.isFocused = false;
-            this.bcmBlur.emit(event);
-            this.validateInput();
-        };
-        this.onKeyDown = (event) => {
-            this.bcmKeyDown.emit(event);
-        };
-        this.onKeyUp = (event) => {
-            this.bcmKeyUp.emit(event);
-        };
-        this.styleClass = tv({
-            slots: {
-                base: [
-                    'bcm-input bcm-input__container',
-                    'bg-[--bcm-ui-color-background-base-default]',
-                    'text-[--bcm-ui-color-text-default]',
-                    'border border-solid rounded',
-                    'flex items-center justify-between',
-                    'transition-colors duration-200',
-                    'px-2',
-                ],
-                inputClass: [
-                    'input',
-                    'w-full flex-1',
-                    'border-0 outline-0 bg-transparent',
-                    'appearance-none text-ellipsis',
-                    'text-[--bcm-ui-color-text-default] placeholder:text-[--bcm-ui-color-text-placeholder] placeholder:font-normal',
-                    'font-sans antialiased font-medium',
-                    'px-1',
-                    '[appearance:textfield][&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-                ],
-            },
-            variants: {
-                size: {
-                    small: {
-                        base: '',
-                        inputClass: 'text-size-4  h-6',
-                    },
-                    medium: {
-                        base: '',
-                        inputClass: 'text-size-5  h-8',
-                    },
-                    large: {
-                        base: '',
-                        inputClass: 'text-size-6  h-10',
-                    },
-                },
-                status: {
-                    default: {
-                        base: ['border-[--bcm-ui-color-border-default]', 'hover:border-[--bcm-ui-color-border-primary]', 'has-[:focus]:border-[--bcm-ui-color-border-primary]'],
-                    },
-                    error: {
-                        base: ['border-[--bcm-ui-color-border-error]', 'hover:border-[--bcm-ui-color-border-error]', 'has-[:focus]:border-[--bcm-ui-color-border-error]'],
-                    },
-                    success: {
-                        base: ['border-[--bcm-ui-color-border-success]', 'hover:border-[--bcm-ui-color-border-success]', 'has-[:focus]:border-[--bcm-ui-color-border-success]'],
-                    },
-                    warning: {
-                        base: ['border-[--bcm-ui-color-border-warning]', 'hover:border-[--bcm-ui-color-border-warning]', 'has-[:focus]:border-[--bcm-ui-color-border-warning]'],
-                    },
-                    info: {
-                        base: ['border-[--bcm-ui-color-border-info]', 'hover:border-[--bcm-ui-color-border-info]', 'has-[:focus]:border-[--bcm-ui-color-border-info]'],
-                    },
-                },
-                fullWidth: {
-                    true: 'full-width w-full',
-                },
-                disabled: {
-                    true: 'disabled cursor-not-allowed',
-                    false: '',
-                },
-                focused: {
-                    true: {
-                        base: '',
-                    },
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                status: 'default',
-                fullWidth: false,
-                disabled: false,
-                focused: false,
-            },
-        }, {
-            twMerge: false,
-        });
-        this.togglePasswordVisibility = () => {
-            this.isPasswordVisible = !this.isPasswordVisible;
-            this.inputRef.type = this.isPasswordVisible ? 'text' : 'password';
-        };
-        this.PasswordToggleButton = () => {
-            var _a;
-            if (this.type !== 'password' || this.disabled || this.readonly || ((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) === 0)
-                return null;
-            return (h("button", { class: "appearance-none flex items-center w-6 h-full justify-center", onClick: this.togglePasswordVisibility, type: "button" }, h("bcm-icon", { name: this.isPasswordVisible ? 'fa-eye-slash fa-regular' : 'fa-regular fa-eye', size: this.iconSize })));
-        };
-        this.iconSize = {
-            small: 14,
-            medium: 16,
-            large: 18,
-        }[this.size];
-    }
-    handleValueChange(newValue) {
-        if (this.inputRef) {
-            this.inputRef.value = newValue;
-        }
-    }
-    watchStatus(newValue) {
-        this.internalStatus = newValue;
-    }
-    watchErrorMessage(newValue) {
-        this.internalErrorMessage = newValue;
-    }
-    async setFocus() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    async setBlur() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.blur();
-    }
-    async select() {
-        var _a;
-        (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.select();
-    }
-    /** Sets locale and messages for all inputs */
-    async setLocale(locale, messages) {
-        // Set messages and update validation immediately
-        setValidationMessages(locale, messages);
-        // Mevcut validasyon mesajını güncelle
-        if (!this.isValid) {
-            this.validateInput();
-        }
-    }
-    componentWillLoad() {
-        // I18n için default mesajları set et
-        setValidationMessages('en', defaultValidationMessages);
-        this.internalStatus = this.status;
-        this.internalErrorMessage = this.errorMessage;
-    }
-    validateInput() {
-        if (!this.inputRef)
-            return;
-        // Reset validation state
-        this.isValid = true;
-        this.validationMessage = '';
-        const value = this.inputRef.value;
-        // Required check
-        if (this.required && !value) {
-            this.isValid = false;
-            this.validationMessage = getValidationMessage('required');
-            this.internalStatus = 'error';
-            this.internalErrorMessage = this.validationMessage;
-            return;
-        }
-        // Minimum length check
-        else if (this.minLength && value.length < this.minLength) {
-            this.isValid = false;
-            this.validationMessage = getValidationMessage('minlength', { min: this.minLength });
-        }
-        // Maximum length check
-        else if (this.maxLength && value.length > this.maxLength) {
-            this.isValid = false;
-            this.validationMessage = getValidationMessage('maxlength', { max: this.maxLength });
-        }
-        // Pattern check
-        else if (this.pattern && !new RegExp(this.pattern).test(value)) {
-            this.isValid = false;
-            this.validationMessage = getValidationMessage('pattern');
-        }
-        // Email check
-        else if (this.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
-            this.isValid = false;
-            this.validationMessage = getValidationMessage('email');
-        }
-        // Number range check
-        else if (this.type === 'number' && value) {
-            const numValue = parseFloat(value);
-            if (this.min !== undefined && numValue < this.min) {
-                this.isValid = false;
-                this.validationMessage = getValidationMessage('min', { min: this.min });
-            }
-            else if (this.max !== undefined && numValue > this.max) {
-                this.isValid = false;
-                this.validationMessage = getValidationMessage('max', { max: this.max });
-            }
-        }
-        // Update component state
-        this.internalStatus = this.isValid ? 'default' : 'error';
-        this.internalErrorMessage = this.validationMessage;
-    }
-    hasSlotContent(slotName) {
-        return checkSlotContent(this.el, slotName);
-    }
-    getDefaultIconForType() {
-        return; // TODO: Will be implemented later
-        // return defaultIcons[this.type as keyof typeof defaultIcons];
-    }
-    render() {
-        const inputId = this._id + '-input' || this.name;
-        const { base, inputClass } = this.styleClass({
-            size: this.size,
-            status: this.internalStatus,
-            fullWidth: this.fullWidth,
-            disabled: this.disabled,
-            focused: this.isFocused,
-        });
-        return (h("div", { key: '2b470d6a8d48e3867345a1baaf038f464167bd8c', class: "bcm-ui-element" }, this.label && (h("label", { key: '65aa7f333c4cc7deb68dec12ac25fd953d03e5a9', class: classNames('input-label font-medium', {
-                'text-color-label': !this.disabled,
-                'text-color-disabled': this.disabled,
-            }, {
-                'text-size-3': this.size === 'small',
-                'text-size-4': this.size === 'medium',
-                'text-size-5': this.size === 'large',
-            }), htmlFor: inputId }, h("slot", { key: '5507aaf837e03b059b5ee37270406519e3460d84', name: "label" }, this.label), this.required && h("span", { key: 'ae92e270cf66574dd511403df99ce6f0172f7cf0' }, "*"))), h("div", { key: 'c562649dbb4085830f2229af20b450de50af18ab', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (h("div", { key: '8e53088d990111325fad2c78c99818761e729e80', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (h("bcm-icon", { key: '0dd292f047e02ce75051b8a271ffcedb35036631', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), h("slot", { key: '6dd835e17b66f29681232748a9cc8fd04ef8365e', name: "prefix" }))), h("input", { key: '965fa5a5d2188a8608ae997973c792708fd986bf', ref: el => (this.inputRef = el), id: inputId, class: inputClass(), type: this.type, name: this.name, disabled: this.disabled, readonly: this.readonly, required: this.required, placeholder: this.placeholder, autocomplete: this.autocomplete, minlength: this.minLength, maxlength: this.maxLength, min: this.min, max: this.max, step: this.step, pattern: this.pattern, "aria-invalid": this.status === 'error', "aria-required": this.required, "aria-labelledby": this.labelledby, "aria-describedby": this.describedby, value: this.value, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown, onKeyUp: this.onKeyUp }), (this.hasSlotContent('suffix') || this.suffixIcon) && (h("div", { key: 'f0f78deaa350963ff31b07c2076a405bb4560fc5', class: "flex items-center gap-2 px-2" }, h("slot", { key: '6b6afb6088fa96b9c1daa97641e70bd9d1a8f044', name: "suffix" }), this.suffixIcon && h("bcm-icon", { key: '9f33e74c6629341ba5cc447af1b4ba9237997138', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (h("div", { key: '416b4a6c586ebd6e722a68181ca4dc1125fc5e7d', class: classNames('input-caption-text font-regular mt-1', {
-                'text-[--bcm-ui-color-text-caption]': !this.disabled && this.internalStatus === 'default',
-                'text-[--bcm-ui-color-text-error]': !this.disabled && (this.internalStatus === 'error' || !this.isValid),
-                'text-[--bcm-ui-color-text-success]': !this.disabled && this.internalStatus === 'success',
-                'text-[--bcm-ui-color-text-warning]': !this.disabled && this.internalStatus === 'warning',
-                'text-[--bcm-ui-color-text-info]': !this.disabled && this.internalStatus === 'info',
-                'text-[--bcm-ui-color-text-disabled]': this.disabled,
-            }, {
-                'text-size-3': this.size === 'small',
-                'text-size-4': this.size === 'medium',
-                'text-size-5': this.size === 'large',
-            }) }, !this.isValid ? this.validationMessage : this.internalStatus === 'error' ? this.internalErrorMessage : this.captionText))));
-    }
-    get el() { return getElement(this); }
-    static get watchers() { return {
-        "value": ["handleValueChange"],
-        "status": ["watchStatus"],
-        "errorMessage": ["watchErrorMessage"]
-    }; }
-};
-BcmInput.style = BcmInputStyle0;
-
-const linkedCss = ".absolute{position:absolute}.relative{position:relative}.block{display:block}.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))}.border{border-width:1px}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}bcm-linked{display:block;position:relative}bcm-linked[append-to-body]{display:none}.floating-content{min-width:-moz-max-content;min-width:max-content;transition:opacity .2s ease,visibility .2s ease,transform .2s ease;will-change:transform,opacity}.floating-visible{animation:fadeInScale .2s ease-out}.floating-hidden{display:none!important;pointer-events:none}.floating-wrapper{position:relative;z-index:1}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95) translateY(-5px)}to{opacity:1;transform:scale(1) translateY(0)}}.floating-arrow{z-index:-1}.floating-arrow,.floating-arrow:before{height:10px;position:absolute;width:10px}.floating-arrow:before{background:#fff;border:1px solid #e2e8f0;content:\"\";transform:rotate(45deg)}.arrow-top{bottom:-5px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{top:-5px}.arrow-left{right:-5px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{left:-5px}.arrow-top:before{border-bottom:0;border-right:0}.arrow-bottom:before{border-left:0;border-top:0}.arrow-left:before{border-right:0;border-top:0}.arrow-right:before{border-bottom:0;border-left:0}@media (max-width:768px){.floating-content{max-height:calc(100vh - 32px);max-width:calc(100vw - 32px)}}.visible{visibility:visible}.static{position:static}.fixed{position:fixed}.hidden{display:none}.resize{resize:both}.blur{--tw-blur:blur(8px);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)}.flex{display:flex}.max-h-64{max-height:16rem}.w-full{width:100%}.min-w-10{min-width:2.5rem}.max-w-64{max-width:16rem}.flex-col{flex-direction:column}.items-center{align-items:center}.overflow-y-auto{overflow-y:auto}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.bg-color-basic-panel{background-color:var(--bcm-ui-color-background-basic-panel)}.py-1\\.5{padding-bottom:.375rem;padding-top:.375rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default)}.shadow,.shadow-3{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-3{--tw-shadow:var(--bcm-ui-box-shadow-3);--tw-shadow-colored:var(--bcm-ui-box-shadow-3)}.outline{outline-style:solid}";
-const BcmLinkedStyle0 = linkedCss;
-
-const BcmLinked = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bcmShow = createEvent(this, "bcmShow", 7);
-        this.bcmHide = createEvent(this, "bcmHide", 7);
-        this.bcmShown = createEvent(this, "bcmShown", 7);
-        this.bcmHidden = createEvent(this, "bcmHidden", 7);
-        // Trigger configuration
-        this.trigger = 'click';
-        this.placement = 'bottom-start';
-        // Timing configuration
-        this.showDelay = 0;
-        this.hideDelay = 0;
-        // Positioning configuration
-        this.offset = 8;
-        this.arrow = false;
-        this.disabled = false;
-        // Style configuration
-        this.zIndex = 1000;
-        this.appendToBody = false;
-        this.destroyOnHide = false;
-        // State
-        this.isVisible = false;
-        this.isReady = false;
-        this.handleMouseEnter = () => {
-            this.clearTimeouts();
-            if (this.showDelay > 0) {
-                this.showTimeout = setTimeout(() => this.show(), this.showDelay);
-            }
-            else {
-                this.show();
-            }
-        };
-        this.handleMouseLeave = () => {
-            this.clearTimeouts();
-            if (this.hideDelay > 0) {
-                this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
-            }
-            else {
-                this.hide();
-            }
-        };
-        this.handleFloatingMouseEnter = () => {
-            this.clearTimeouts();
-        };
-        this.handleFloatingMouseLeave = () => {
-            this.clearTimeouts();
-            if (this.hideDelay > 0) {
-                this.hideTimeout = setTimeout(() => this.hide(), this.hideDelay);
-            }
-            else {
-                this.hide();
-            }
-        };
-        this.handleClick = (e) => {
-            e.stopPropagation();
-            this.toggle();
-        };
-        this.handleFocus = () => {
-            this.show();
-        };
-        this.handleBlur = () => {
-            this.hide();
-        };
-    }
-    // Watch for changes
-    setupTarget() {
-        this.disconnectTarget();
-        this.connectTarget();
-    }
-    onVisibilityChange(newValue) {
-        if (newValue) {
-            this.updatePosition();
-            this.bcmShown.emit();
-        }
-        else {
-            this.bcmHidden.emit();
-        }
-    }
-    async componentDidLoad() {
-        // Wait for render
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        this.floatingEl = this.host.querySelector('.floating-content');
-        if (this.floatingEl) {
-            this.isReady = true;
-            this.connectTarget();
-            this.setupFloatingObserver();
-            console.log('✅ bcm-linked initialized successfully');
-        }
-        else {
-            console.error('❌ Could not find .floating-content element');
-        }
-    }
-    disconnectedCallback() {
-        var _a, _b;
-        this.disconnectTarget();
-        this.clearTimeouts();
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        // Restore element to original position if component is destroyed while in portal
-        if (this.appendToBody && this.floatingEl && this.originalParent) {
-            this.originalParent.appendChild(this.floatingEl);
-        }
-    }
-    connectTarget() {
-        if (!this.isReady)
-            return;
-        // Find target element
-        this.targetEl =
-            this.targetElement || (this.targetId ? document.getElementById(this.targetId) : null) || this.host.previousElementSibling || this.host.parentElement;
-        if (!this.targetEl) {
-            console.warn('bcm-linked: No target element found');
-            return;
-        }
-        // Setup event listeners based on trigger type
-        this.setupEventListeners();
-        // Setup auto-update for position
-        if (this.targetEl && this.floatingEl) {
-            this.cleanup = autoUpdate(this.targetEl, this.floatingEl, () => {
-                if (this.isVisible) {
-                    this.updatePosition();
-                }
-            });
-        }
-        // Setup resize observer for responsive positioning
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.isVisible) {
-                this.updatePosition();
-            }
-        });
-        this.resizeObserver.observe(this.floatingEl);
-    }
-    disconnectTarget() {
-        var _a, _b;
-        if (this.targetEl) {
-            this.removeEventListeners();
-        }
-        (_a = this.cleanup) === null || _a === void 0 ? void 0 : _a.call(this);
-        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-    }
-    setupEventListeners() {
-        var _a, _b;
-        if (!this.targetEl || this.disabled)
-            return;
-        switch (this.trigger) {
-            case 'hover':
-                this.targetEl.addEventListener('mouseenter', this.handleMouseEnter);
-                this.targetEl.addEventListener('mouseleave', this.handleMouseLeave);
-                (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', this.handleFloatingMouseEnter);
-                (_b = this.floatingEl) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', this.handleFloatingMouseLeave);
-                break;
-            case 'click':
-                this.targetEl.addEventListener('click', this.handleClick);
-                this.setupClickOutside();
-                break;
-            case 'focus':
-                this.targetEl.addEventListener('focus', this.handleFocus);
-                this.targetEl.addEventListener('blur', this.handleBlur);
-                break;
-        }
-    }
-    removeEventListeners() {
-        var _a, _b;
-        if (!this.targetEl)
-            return;
-        this.targetEl.removeEventListener('mouseenter', this.handleMouseEnter);
-        this.targetEl.removeEventListener('mouseleave', this.handleMouseLeave);
-        this.targetEl.removeEventListener('click', this.handleClick);
-        this.targetEl.removeEventListener('focus', this.handleFocus);
-        this.targetEl.removeEventListener('blur', this.handleBlur);
-        (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', this.handleFloatingMouseEnter);
-        (_b = this.floatingEl) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', this.handleFloatingMouseLeave);
-        this.removeClickOutside();
-    }
-    setupClickOutside() {
-        this.clickOutsideHandler = (e) => {
-            var _a, _b;
-            const target = e.target;
-            if (!((_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.contains(target)) && !((_b = this.targetEl) === null || _b === void 0 ? void 0 : _b.contains(target)) && !this.host.contains(target)) {
-                this.hide();
-            }
-        };
-        document.addEventListener('click', this.clickOutsideHandler, true);
-    }
-    removeClickOutside() {
-        if (this.clickOutsideHandler) {
-            document.removeEventListener('click', this.clickOutsideHandler, true);
-            this.clickOutsideHandler = undefined;
-        }
-    }
-    clearTimeouts() {
-        if (this.showTimeout) {
-            clearTimeout(this.showTimeout);
-            this.showTimeout = undefined;
-        }
-        if (this.hideTimeout) {
-            clearTimeout(this.hideTimeout);
-            this.hideTimeout = undefined;
-        }
-    }
-    async updatePosition() {
-        if (!this.targetEl || !this.floatingEl || !this.isVisible)
-            return;
-        // Use autoPlacement only for bottom-start (dropdown default)
-        // For other placements, respect the manual placement with flip fallback
-        // const useAutoPlacement = this.placement === 'bottom-start';
-        const middleware = [
-            offset(this.offset),
-            // useAutoPlacement
-            //   ? autoPlacement({
-            //       allowedPlacements: ['bottom-start', 'bottom-end', 'bottom', 'top-start', 'top-end', 'top', 'right-start', 'right-end', 'right', 'left-start', 'left-end', 'left'],
-            //       boundary: document.body,
-            //     })
-            //   :
-            flip({
-                fallbackPlacements: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'],
-            }),
-            shift({
-                padding: 8,
-            }),
-        ];
-        const { x, y, placement } = await computePosition(this.targetEl, this.floatingEl, {
-            placement: this.placement,
-            middleware,
-            strategy: 'fixed',
-        });
-        Object.assign(this.floatingEl.style, {
-            left: `${x}px`,
-            top: `${y}px`,
-            zIndex: this.zIndex.toString(),
-        });
-        // Update arrow if enabled
-        if (this.arrow) {
-            this.updateArrow(placement);
-        }
-    }
-    updateArrow(placement) {
-        var _a;
-        const arrow = (_a = this.floatingEl) === null || _a === void 0 ? void 0 : _a.querySelector('.floating-arrow');
-        if (!arrow)
-            return;
-        // Remove all arrow classes
-        arrow.className = 'floating-arrow';
-        // Add placement-specific class
-        const side = placement.split('-')[0];
-        arrow.classList.add(`arrow-${side}`);
-    }
-    async show() {
-        if (this.disabled || this.isVisible)
-            return;
-        this.bcmShow.emit();
-        // Portalling: Move the floating element to the body
-        if (this.appendToBody && this.floatingEl) {
-            this.originalParent = this.floatingEl.parentNode;
-            this.originalNextSibling = this.floatingEl.nextSibling;
-            document.body.appendChild(this.floatingEl);
-        }
-        this.isVisible = true;
-        // Use requestAnimationFrame to ensure the element is visible before positioning
-        await new Promise(resolve => requestAnimationFrame(resolve));
-        await this.updatePosition();
-    }
-    async hide() {
-        if (!this.isVisible)
-            return;
-        this.bcmHide.emit();
-        this.isVisible = false;
-        // Portalling: Restore the floating element to its original position
-        if (this.appendToBody && this.floatingEl && this.originalParent) {
-            if (this.originalNextSibling) {
-                this.originalParent.insertBefore(this.floatingEl, this.originalNextSibling);
-            }
-            else {
-                this.originalParent.appendChild(this.floatingEl);
-            }
-            this.originalParent = undefined;
-            this.originalNextSibling = undefined;
-        }
-        if (this.destroyOnHide && this.floatingEl && this.floatingEl.parentNode) {
-            this.floatingEl.parentNode.removeChild(this.floatingEl);
-        }
-    }
-    async toggle() {
-        if (this.isVisible) {
-            await this.hide();
-        }
-        else {
-            await this.show();
-        }
-    }
-    async updatePositioning() {
-        await this.updatePosition();
-    }
-    setupFloatingObserver() {
-        if (!this.floatingEl)
-            return;
-        // Observe floating element size changes for position updates
-        this.resizeObserver = new ResizeObserver(() => {
-            if (this.isVisible) {
-                this.updatePosition();
-            }
-        });
-        this.resizeObserver.observe(this.floatingEl);
-    }
-    render() {
-        const floatingClasses = {
-            'floating-content': true,
-            'floating-visible': this.isVisible,
-            'floating-hidden': !this.isVisible,
-            'floating-with-arrow': this.arrow,
-            'floating-destroy-on-hide': this.destroyOnHide,
-        };
-        return (h(Host, { key: 'f5835cc1b6044476e66402d23a3becf18d3f2049' }, h("div", { key: '2c7f92bbe85bc938a767734ef4b27702247fb390', class: floatingClasses, style: {
-                position: 'fixed',
-                top: '0px',
-                left: '0px',
-                zIndex: this.zIndex.toString(),
-                display: this.isVisible ? 'block' : 'none',
-                visibility: this.isVisible ? 'visible' : 'hidden',
-                opacity: this.isVisible ? '1' : '0',
-                pointerEvents: this.isVisible ? 'auto' : 'none',
-            } }, this.arrow && h("div", { key: 'f6eedac02b29b3ca00a9a84eea940ac89089f30c', class: "floating-arrow" }), h("div", { key: '7cb19f085de1d77a41fd9897be90999e78a0a54d', class: "floating-wrapper" }, h("slot", { key: 'a4b4289642850e3c2f7f27771b3d28bc41c8248a' }))), h("div", { key: '61cd7af9a4a47c87c308e1e67f96efb987c97312', style: { display: 'none' } }, h("slot", { key: '7160df275f5c7c66733158f95266598d0d207a17', name: "fallback" }))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "targetId": ["setupTarget"],
-        "targetElement": ["setupTarget"],
-        "isVisible": ["onVisibilityChange"]
-    }; }
-};
-BcmLinked.style = BcmLinkedStyle0;
-
-const shortcutCss = ":host{display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.block{display:block}.h-fit{height:fit-content}.w-fit{width:fit-content}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border{border-width:1px}.border-solid{border-style:solid}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-default{background-color:var(--bcm-ui-color-background-default-default)}.px-1{padding-left:.25rem;padding-right:.25rem}.text-center{text-align:center}.text-size-2{font-size:var(--bcm-ui-font-size-2,10px);line-height:var(--bcm-ui-line-height-2,12px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.font-medium{font-weight:500}.capitalize{text-transform:capitalize}.text-color-default{color:var(--bcm-ui-color-text-default)}.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 BcmShortcutStyle0 = shortcutCss;
-
-const osKeys = {
-    ctrl: '⌘',
-    alt: '⌥',
-    shift: '⇧',
-    del: '⌫',
-    delete: '⌫',
-    backspace: '⌦',
-    enter: '⏎',
-    return: '⏎',
-};
-const BcmShortcut = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.size = 'small';
-        this.isMac = /Mac/.test(window.navigator.userAgent);
-    }
-    getHotkey(key) {
-        if (!key) {
-            return '';
-        }
-        if (this.isMac && (key.includes(' ') || key.includes('+'))) {
-            const keys = key.split(/[\s+]+/);
-            return keys.map(k => osKeys[k] || k).join('');
-        }
-        else {
-            return key;
-        }
-    }
-    render() {
-        const { size, hotkey } = this;
-        return (h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: classNames('bcm-ui-element bcm-ui-content-display', 'block h-fit w-fit rounded border border-solid px-1', 'border-color-default bg-color-default text-color-default', 'text-center font-medium capitalize', {
-                'text-size-2': size === 'small',
-                'text-size-3': size === 'medium',
-                'text-size-4': size === 'large',
-            }) }, this.getHotkey(hotkey)));
-    }
-};
-BcmShortcut.style = BcmShortcutStyle0;
-
-const variantTagMap = {
-    display: 'h1',
-    heading1: 'h2',
-    heading2: 'h3',
-    title1: 'h4',
-    title2: 'h5',
-    title3: 'h6',
-    body: 'p',
-    bodyAccent: 'p',
-    helper: 'p',
-    caption: 'p',
-    label: 'label',
-    placeholder: 'p',
-    link: 'a',
-    info: 'p',
-    infoAccent: 'p',
-};
-
-const textCss = ".static{position:static}.m-0{margin:0}.appearance-none{appearance:none}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.p-0{padding:0}.text-size-12{font-size:var(--bcm-ui-font-size-12,60px);line-height:var(--bcm-ui-line-height-12,72px)}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.text-size-6{font-size:var(--bcm-ui-font-size-6,18px);line-height:var(--bcm-ui-line-height-6,24px)}.text-size-7{font-size:var(--bcm-ui-font-size-7,20px);line-height:var(--bcm-ui-line-height-7,28px)}.font-medium{font-weight:500}.font-semibold{font-weight:600}.text-color-caption{color:var(--bcm-ui-color-text-caption)}.text-color-default{color:var(--bcm-ui-color-text-default)}.text-color-disabled{color:var(--bcm-ui-color-text-disabled)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-helper{color:var(--bcm-ui-color-text-helper)}.text-color-label{color:var(--bcm-ui-color-text-label)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.text-color-primary{color:var(--bcm-ui-color-text-primary)}.underline{text-decoration-line:underline}.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 BcmTextStyle0 = textCss;
-
-const BcmText = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        /** Text variant */
-        this.variant = 'body';
-        /** Text size */
-        this.size = 'medium';
-        /** Text overflow behavior */
-        this.overflow = false;
-        this.variantClassMap = {
-            display: 'font-semibold text-size-12 text-color-header',
-            heading1: 'font-semibold text-size-7 text-color-header',
-            heading2: 'font-semibold text-size-6 text-color-header',
-            title1: {
-                small: 'font-semibold text-size-5 text-color-header',
-                medium: 'font-semibold text-size-6 text-color-header',
-                large: 'font-semibold text-size-7 text-color-header',
-            },
-            title2: {
-                small: 'font-semibold text-size-4 text-color-default',
-                medium: 'font-semibold text-size-5 text-color-default',
-                large: 'font-semibold text-size-6 text-color-default',
-            },
-            title3: {
-                small: 'font-semibold text-size-3 text-color-disabled',
-                medium: 'font-semibold text-size-4 text-color-disabled',
-                large: 'font-semibold text-size-5 text-color-disabled',
-            },
-            body: {
-                small: 'font-regular text-size-4 text-color-default',
-                medium: 'font-regular text-size-5 text-color-default',
-                large: 'font-regular text-size-6 text-color-default',
-            },
-            bodyAccent: {
-                small: 'font-medium text-size-4 text-color-default',
-                medium: 'font-medium text-size-5 text-color-default',
-                large: 'font-medium text-size-6 text-color-default',
-            },
-            helper: {
-                small: 'font-regular text-size-4 text-color-helper',
-                medium: 'font-regular text-size-5 text-color-helper',
-                large: 'font-regular text-size-6 text-color-helper',
-            },
-            caption: {
-                small: 'font-regular text-size-3 text-color-caption',
-                medium: 'font-regular text-size-4 text-color-caption',
-                large: 'font-regular text-size-5 text-color-caption',
-            },
-            link: {
-                small: 'font-medium text-size-4 underline text-color-primary',
-                medium: 'font-medium text-size-5 underline text-color-primary',
-                large: 'font-medium text-size-6 underline text-color-primary',
-            },
-            label: {
-                small: 'font-medium text-size-3 text-color-label',
-                medium: 'font-medium text-size-4 text-color-label',
-                large: 'font-medium text-size-5 text-color-label',
-            },
-            placeholder: {
-                small: 'font-regular text-size-4 text-color-placeholder',
-                medium: 'font-regular text-size-5 text-color-placeholder',
-                large: 'font-regular text-size-6 text-color-placeholder',
-            },
-            info: {
-                small: 'font-regular text-size-3 text-color-default',
-                medium: 'font-regular text-size-4 text-color-default',
-                large: 'font-regular text-size-5 text-color-default',
-            },
-            infoAccent: {
-                small: 'font-medium text-size-3 text-color-header',
-                medium: 'font-medium text-size-4 text-color-header',
-                large: 'font-medium text-size-5 text-color-header',
-            },
-        };
-        this.getTextClass = (variant, size) => {
-            const variantClasses = this.variantClassMap[variant];
-            if (typeof variantClasses === 'string') {
-                return variantClasses;
-            }
-            return variantClasses[size];
-        };
-        this.getOverflowClass = (overflow) => {
-            return overflow ? 'truncate' : '';
-        };
-    }
-    render() {
-        var _a;
-        const Tag = variantTagMap[this.variant];
-        const variantClass = this.getTextClass(this.variant, this.size);
-        const overflowClass = this.getOverflowClass((_a = this.overflow) !== null && _a !== void 0 ? _a : false);
-        return (h(Tag, { key: '152d737752eea962ac3c5086011da69578ef0920', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'e8c8c89a5925936a2e22a75265b7f42317eab983' }, this.text)));
-    }
-};
-BcmText.style = BcmTextStyle0;
-
-export { BcmButton as bcm_button, BcmDrawer as bcm_drawer, Dropdown as bcm_dropdown, DropdownItem as bcm_dropdown_item, BcmInput as bcm_input, BcmLinked as bcm_linked, BcmShortcut as bcm_shortcut, BcmText as bcm_text };
-
-//# sourceMappingURL=bcm-button_8.entry.js.map