bromcom-ui-next 0.1.25 → 0.1.26

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

@@ -0,0 +1,1414 @@
+'use strict';
+
+var index = require('./index-DHDrXFLM.js');
+var tv = require('./tv-ngpIbGlG.js');
+var index$1 = require('./index-Bp6Dd2i1.js');
+var generateId = require('./generate-id-CG_BkTJu.js');
+var validationMessages = require('./validation-messages-BjfpSEWk.js');
+var floatingUi_dom = require('./floating-ui.dom-DyKmFgkP.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-flex;height:-moz-fit-content;height:fit-content;position:relative;width:-moz-fit-content;width:fit-content}: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 BcmButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmClick = index.createEvent(this, "bcmClick", 1);
+        this.bcmFocus = index.createEvent(this, "bcmFocus", 1);
+        this.bcmBlur = index.createEvent(this, "bcmBlur", 1);
+        /** Defines the main visual style of the button */
+        this.kind = 'primary';
+        /** Controls the button size */
+        this.size = 'medium';
+        /** Defines the button's status/state color */
+        this.status = 'default';
+        /** Icon placement (prefix/suffix) */
+        this.iconPosition = 'prefix';
+        /** Icon-only button mode */
+        this.iconOnly = false;
+        /** Full width button */
+        this.fullWidth = false;
+        /** HTML button type */
+        this.type = 'button';
+        /** Loading state */
+        this.loading = false;
+        /** Disabled state */
+        this.disabled = false;
+        /** Active state */
+        this.active = false;
+        this.handleClick = (event) => {
+            if (!this.disabled && !this.loading) {
+                this.bcmClick.emit(event);
+            }
+        };
+        this.handleFocus = (event) => {
+            this.bcmFocus.emit(event);
+        };
+        this.handleBlur = (event) => {
+            this.bcmBlur.emit(event);
+        };
+        this.buttonClass = tv.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 (index.h(index.Host, { key: '33e438220fdb261ff87289f8dcbaa7e0601d73c1' }, index.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 && index.h("slot", { key: 'fa8dcbcba338f94700842fd0482d0261c9a1d3e3', name: "loading" }), index.h("span", { key: '345162b4ad0034d5081dee0438ceeefe4930ecfb' }, index.h("slot", { key: 'c65c9aa07fd2f159426192fc6239c394ee6ec58d', name: "prefix" }, position === 'prefix' && icon && index.h("i", { key: 'c94e32a5d308ba3ad98ac10239fc9a155f47e2ac', class: ' leading-none ' + icon }))), index.h("slot", { key: '171402bb9251492c7e5b0cf572fb0e2ae62a6add' }, this.buttonText), index.h("span", { key: 'ae3c5a885029b3d4c54e5ca21ac22adffa26b013' }, index.h("slot", { key: 'f80819d122624bb279d19822278c8e651dec27c7', name: "suffix" }, position === 'suffix' && icon && index.h("i", { key: '69631e99a8b7f47dd1d00984f582ec6e7b5433e8', class: ' leading-none ' + icon }))))));
+    }
+};
+BcmButton.style = buttonCss;
+
+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 BcmDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmOpen = index.createEvent(this, "bcmOpen", 7);
+        this.bcmClose = index.createEvent(this, "bcmClose", 7);
+        this.bcmBeforeOpen = index.createEvent(this, "bcmBeforeOpen", 7);
+        this.bcmBeforeClose = index.createEvent(this, "bcmBeforeClose", 7);
+        this.open = false;
+        this.size = 'medium';
+        this.position = 'right';
+        this.fullWidth = false;
+        this.noHeader = false;
+        this.drawerClass = tv.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 (index.h("div", { key: '44379905f1499a16d625ac4d1ff5e89fc6367d46', part: "base" }, index.h("div", { key: 'bc53e5322a61cd4af0691905c509d4c5fb765939', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), index.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 }, index.h("div", { key: '5124de9d7fa8f3aa7267f0998f4c4f98f3ebbc4a', part: "header", class: header() }, index.h("h2", { key: '8aa4b971efa9fe0fafa1cfb94f0b6b96f21f2f15', part: "title", class: title() }, index.h("slot", { key: '949ae8f65d13e9e1c973c16a9f90205ac7e7042f', name: "header" }, this.headerText)), index.h("button", { key: 'a0c42761ee859e87dee5c267ea7245dde4fb8756', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, index.h("bcm-icon", { key: '2df273d63da93eda2280759a909906fe4ae0c493', name: "fa-solid fa-xmark" }))), index.h("div", { key: 'b2532537d10f9aa0dcfa2fca8ac806577363e05b', part: "content", class: content() }, index.h("slot", { key: 'bfec5cff35a7bf7bf1d9801ba89559501e6f301f' })), index.h("div", { key: '4d44fdba62c74fd5c893c5296f998754228cf961', part: "footer" }, index.h("slot", { key: 'fd0a58127fd2f0ba0955cef629e55700142a8f32', name: "footer" })))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": ["handleOpenChange"]
+    }; }
+};
+BcmDrawer.style = drawerCss;
+
+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 Dropdown = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmDropdownChange = index.createEvent(this, "bcmDropdownChange", 1);
+        this.isReady = false;
+        this.dropdownItems = [];
+        this.dropdownClass = tv.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 (index.h(index.Host, { key: '6aaff12c84d38c32df5bc8dccb83421afb315eef' }, index.h("bcm-button", { key: '5612cef7303a6b839531e125c895a4e7b8d32282', kind: "outline" }, index.h("span", { key: '951418845cb1ec71fe6dc5bbbc33c49934447640', part: "text" }, this.text)), this.isReady && (index.h("bcm-linked", { key: 'd594359d6a9b7c673307c6a92e6d69cc47be3e1a', targetElement: this.buttonRef }, index.h("div", { key: '9badba5b1e99af6a5d58b02e849cb0923e49dfd8', part: "dropdown-container", class: this.dropdownClass() }, index.h("slot", { key: 'c8191f215600170475d514bb6b4056047e6442d2', onSlotchange: this.handleSlotChange }))))));
+    }
+    get host() { return index.getElement(this); }
+};
+Dropdown.style = dropdownCss;
+
+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 DropdownItem = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmDropDownItemChange = index.createEvent(this, "bcmDropDownItemChange", 1);
+        this.selected = false;
+        this.error = false;
+        this.disabled = false;
+        this.dropdownItemClass = tv.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 (index.h("div", { key: '69beaac4c9225bc7803b4002f1543c18e76e36cc', "aria-checked": this.selected, class: this.dropdownItemClass({
+                selected: this.selected,
+                error: this.error,
+            }), onClick: () => this.handleClick() }, index.h("slot", { key: 'ca2712023285689a1774b5869d982e87d3add46a', name: "left-content" }, this.icon && index.h("bcm-icon", { key: 'bef7483a47c823ed746c39ae37acc3a2360f0c59', "icon-name": this.icon })), index.h("div", { key: 'a9bdddf97d4a4e07e601599a4adb11354227dd0f', class: "flex flex-row text-pretty w-full" }, index.h("slot", { key: '51c488350d2daabc32fc9693211a4e89d8cce16f' }, this.text)), index.h("slot", { key: '9bf3f8b4affa41ea72f181a073aea8cd56f8a2df', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (index.h("bcm-icon", { "icon-name": icon }))))));
+    }
+    get host() { return index.getElement(this); }
+};
+DropdownItem.style = dropdownItemCss;
+
+/**
+ * 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(92.8% .006 264.531deg);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(70.7% .022 261.325deg);opacity:1}input::placeholder,textarea::placeholder{color:oklch(70.7% .022 261.325deg);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-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}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.py-px{padding-bottom:1px;padding-top:1px}.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}.leading-6{line-height:1.5rem}.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 BcmInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmInput = index.createEvent(this, "bcmInput", 1);
+        this.bcmChange = index.createEvent(this, "bcmChange", 1);
+        this.bcmFocus = index.createEvent(this, "bcmFocus", 1);
+        this.bcmBlur = index.createEvent(this, "bcmBlur", 1);
+        this.bcmKeyDown = index.createEvent(this, "bcmKeyDown", 1);
+        this.bcmKeyUp = index.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.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.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 py-px',
+                    },
+                    medium: {
+                        base: '',
+                        inputClass: 'text-size-5 leading-6 py-1',
+                    },
+                    large: {
+                        base: '',
+                        inputClass: 'text-size-6 py-2',
+                    },
+                },
+                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 (index.h("button", { class: "appearance-none flex items-center w-6 h-full justify-center", onClick: this.togglePasswordVisibility, type: "button" }, index.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
+        validationMessages.setValidationMessages(locale, messages);
+        // Mevcut validasyon mesajını güncelle
+        if (!this.isValid) {
+            this.validateInput();
+        }
+    }
+    componentWillLoad() {
+        // I18n için default mesajları set et
+        validationMessages.setValidationMessages('en', validationMessages.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 = validationMessages.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 = validationMessages.getValidationMessage('minlength', { min: this.minLength });
+        }
+        // Maximum length check
+        else if (this.maxLength && value.length > this.maxLength) {
+            this.isValid = false;
+            this.validationMessage = validationMessages.getValidationMessage('maxlength', { max: this.maxLength });
+        }
+        // Pattern check
+        else if (this.pattern && !new RegExp(this.pattern).test(value)) {
+            this.isValid = false;
+            this.validationMessage = validationMessages.getValidationMessage('pattern');
+        }
+        // Email check
+        else if (this.type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
+            this.isValid = false;
+            this.validationMessage = validationMessages.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 = validationMessages.getValidationMessage('min', { min: this.min });
+            }
+            else if (this.max !== undefined && numValue > this.max) {
+                this.isValid = false;
+                this.validationMessage = validationMessages.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 (index.h("div", { key: 'effaec9bfaf730d8dc64c1eebb18f24f1b81d6a7', class: "bcm-ui-element" }, this.label && (index.h("label", { key: '1ab316bc8c04c5a17280d539976f8304d9a146cf', class: index$1.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 }, index.h("slot", { key: '89fb855f3c84bd43759fdf3ab19298dd376e9714', name: "label" }, this.label), this.required && index.h("span", { key: 'e82f1aa9da8e7b6098128e6a9fb49453aab662a9' }, "*"))), index.h("div", { key: 'b2503d3e60b246fe6342c0ae9ad74c95f993b11b', class: base() }, (this.hasSlotContent('prefix') || this.prefixIcon || this.getDefaultIconForType()) && (index.h("div", { key: '311435f21f3e357d8f7e87e191152d32b2b39ba3', class: "flex items-center gap-2 px-2" }, (this.prefixIcon || this.getDefaultIconForType()) && (index.h("bcm-icon", { key: '9bcff2b57c2364e5e84c4cd5202c9a7c5c6a59f6', class: "prefix-icon", "icon-name": this.prefixIcon || this.getDefaultIconForType(), size: this.iconSize })), index.h("slot", { key: 'bacfdc130d70df0c8e6bcadb9fc4d58a66067a47', name: "prefix" }))), index.h("input", { key: '9d78831b435a606f06214bfb9ac8a17f743c8ba9', 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) && (index.h("div", { key: '060a4cb048a6f041acadfb6375307d736e18c6e4', class: "flex items-center gap-2 px-2" }, index.h("slot", { key: '54536a8b871e6524f3e2aa885ff38dbe8e1f7337', name: "suffix" }), this.suffixIcon && index.h("bcm-icon", { key: 'ec7482256e4fc4154ddaef6070045b6c926d9f7b', class: "suffix-icon", "icon-name": this.suffixIcon, size: this.iconSize }))), this.PasswordToggleButton()), (this.captionText || this.internalErrorMessage || this.validationMessage) && (index.h("div", { key: '6c09a0de12102b805ad224da2007405d4f03e03f', class: index$1.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 index.getElement(this); }
+    static get watchers() { return {
+        "value": ["handleValueChange"],
+        "status": ["watchStatus"],
+        "errorMessage": ["watchErrorMessage"]
+    }; }
+};
+BcmInput.style = inputCss;
+
+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)}}.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}.visible{visibility:visible}.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)}";
+
+const BcmLinked = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.bcmShow = index.createEvent(this, "bcmShow", 7);
+        this.bcmHide = index.createEvent(this, "bcmHide", 7);
+        this.bcmShown = index.createEvent(this, "bcmShown", 7);
+        this.bcmHidden = index.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 = floatingUi_dom.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 = [
+            floatingUi_dom.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,
+            //     })
+            //   :
+            floatingUi_dom.flip({
+                fallbackPlacements: ['top', 'bottom', 'left', 'right', 'top-start', 'top-end', 'bottom-start', 'bottom-end', 'left-start', 'left-end', 'right-start', 'right-end'],
+            }),
+            floatingUi_dom.shift({
+                padding: 8,
+            }),
+        ];
+        const { x, y, placement } = await floatingUi_dom.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 (index.h(index.Host, { key: 'f5835cc1b6044476e66402d23a3becf18d3f2049' }, index.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 && index.h("div", { key: 'f6eedac02b29b3ca00a9a84eea940ac89089f30c', class: "floating-arrow" }), index.h("div", { key: '7cb19f085de1d77a41fd9897be90999e78a0a54d', class: "floating-wrapper" }, index.h("slot", { key: 'a4b4289642850e3c2f7f27771b3d28bc41c8248a' }))), index.h("div", { key: '61cd7af9a4a47c87c308e1e67f96efb987c97312', style: { display: 'none' } }, index.h("slot", { key: '7160df275f5c7c66733158f95266598d0d207a17', name: "fallback" }))));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "targetId": ["setupTarget"],
+        "targetElement": ["setupTarget"],
+        "isVisible": ["onVisibilityChange"]
+    }; }
+};
+BcmLinked.style = linkedCss;
+
+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 osKeys = {
+    ctrl: '⌘',
+    alt: '⌥',
+    shift: '⇧',
+    del: '⌫',
+    delete: '⌫',
+    backspace: '⌦',
+    enter: '⏎',
+    return: '⏎',
+};
+const BcmShortcut = class {
+    constructor(hostRef) {
+        index.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 (index.h("div", { key: '007588d1d20941ead644a3d1fd72410cb6793ff5', class: index$1.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 = shortcutCss;
+
+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 BcmText = class {
+    constructor(hostRef) {
+        index.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 (index.h(Tag, { key: 'cb3c78143a1f52fdadd9458219ef5f12eace04e6', class: index$1.classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, index.h("slot", { key: '7ab30bbf72b0fe1be98089b6c452662a382363e1' }, this.text)));
+    }
+};
+BcmText.style = textCss;
+
+exports.bcm_button = BcmButton;
+exports.bcm_drawer = BcmDrawer;
+exports.bcm_dropdown = Dropdown;
+exports.bcm_dropdown_item = DropdownItem;
+exports.bcm_input = BcmInput;
+exports.bcm_linked = BcmLinked;
+exports.bcm_shortcut = BcmShortcut;
+exports.bcm_text = BcmText;
+//# sourceMappingURL=bcm-button.bcm-drawer.bcm-dropdown.bcm-dropdown-item.bcm-input.bcm-linked.bcm-shortcut.bcm-text.entry.cjs.js.map
+
+//# sourceMappingURL=bcm-button_8.cjs.entry.js.map