bromcom-ui-next 0.1.8 → 0.1.10

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

@@ -0,0 +1,822 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-8571fbf7.js';
+import { c as ce } from './index-f3b17e60.js';
+import { a as autoUpdate, o as offset, f as flip, s as shift, c as computePosition } from './floating-ui.dom.esm-b7749b71.js';
+import { c as classNames } from './index-097075ad.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}.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}.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%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.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-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)}.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)}.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}.cursor-not-allowed{cursor:not-allowed}.appearance-none{appearance:none}.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}.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)}.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)}";
+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 = ce({
+            base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',
+            variants: {
+                size: {
+                    small: 'text-size-4 py-px px-2 min-h-6',
+                    medium: 'text-size-5 py-0.5 px-3 min-h-8',
+                    large: 'text-size-6 py-1 px-3 min-h-10',
+                },
+                kind: {
+                    primary: 'kind-primary',
+                    ghost: 'kind-ghost',
+                    text: 'kind-text',
+                    outline: 'kind-outline',
+                },
+                fullWidth: {
+                    true: 'full-width w-full',
+                },
+                disabled: {
+                    true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',
+                    false: [
+                        'cursor-pointer',
+                        'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',
+                        'hover:bg-[--bcm-final-hover-bg-color]',
+                        'active:bg-[--bcm-final-active-bg-color]',
+                        'focus-visible:ring',
+                    ],
+                },
+                loading: {
+                    true: '',
+                },
+                position: {
+                    first: 'position-first',
+                    middle: 'position-middle',
+                    last: 'position-last',
+                },
+            },
+            defaultVariants: {
+                size: 'medium',
+                kind: 'primary',
+                fullWidth: false,
+                disabled: false,
+                loading: false,
+            },
+        }, {
+            twMerge: false,
+        });
+    }
+    get buttonText() {
+        return this.text || (this.variant ? variantOptions[this.variant].text : '');
+    }
+    get buttonIcon() {
+        if (this.variant && variantOptions[this.variant].icon) {
+            return {
+                icon: variantOptions[this.variant].icon,
+                position: variantOptions[this.variant].iconPosition || 'prefix',
+            };
+        }
+        return {
+            icon: this.icon,
+            position: this.iconPosition,
+        };
+    }
+    get buttonStatus() {
+        return this.variant ? variantOptions[this.variant].status : this.status;
+    }
+    get buttonStyles() {
+        const status = this.buttonStatus === 'default' ? 'primary' : this.buttonStatus;
+        // These are the internal default styles based on component props (kind, status)
+        const kindStyleMap = {
+            primary: {
+                '--bcm-button-bg': `var(--bcm-ui-color-background-${status}-default)`,
+                '--bcm-button-bg-hover': `var(--bcm-ui-color-background-${status}-hover)`,
+                '--bcm-button-bg-active': `var(--bcm-ui-color-background-${status}-active)`,
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': 'var(--bcm-ui-color-text-base)',
+            },
+            outline: {
+                '--bcm-button-bg': 'var(--bcm-ui-color-background-default-default)',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': `var(--bcm-ui-color-border-${this.buttonStatus})`,
+                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
+            },
+            ghost: {
+                '--bcm-button-bg': 'transparent',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': `var(--bcm-ui-color-text-${this.buttonStatus})`,
+            },
+            text: {
+                '--bcm-button-bg': 'transparent',
+                '--bcm-button-bg-hover': 'var(--bcm-ui-color-background-default-hover)',
+                '--bcm-button-bg-active': 'var(--bcm-ui-color-background-default-active)',
+                '--bcm-button-border': 'transparent',
+                '--bcm-button-text': `var(--bcm-ui-color-text-${status})`,
+            },
+        };
+        const internalDefaultStyles = kindStyleMap[this.kind];
+        // These are the "final" CSS custom properties used by the component's styling.
+        // They use the "--bcm-button-custom-..." token if provided by the user,
+        // otherwise, they fall back to the internal "--bcm-button-..." style defined above.
+        const finalEffectiveStyles = {
+            '--bcm-final-text-color': `var(--bcm-button-custom-text-color, ${internalDefaultStyles['--bcm-button-text']})`,
+            '--bcm-final-border-color': `var(--bcm-button-custom-border-color, ${internalDefaultStyles['--bcm-button-border']})`,
+            '--bcm-final-bg-color': `var(--bcm-button-custom-bg-color, ${internalDefaultStyles['--bcm-button-bg']})`,
+            '--bcm-final-hover-bg-color': `var(--bcm-button-custom-hover-bg-color, ${internalDefaultStyles['--bcm-button-bg-hover']})`,
+            '--bcm-final-active-bg-color': `var(--bcm-button-custom-active-bg-color, ${internalDefaultStyles['--bcm-button-bg-active']})`,
+        };
+        // return kindStyleMap[this.kind];
+        return Object.assign(Object.assign({}, internalDefaultStyles), finalEffectiveStyles);
+    }
+    render() {
+        const { icon, position } = this.buttonIcon;
+        return (h(Host, { key: '914c4285f46931841225bb3ec03374424bebf005' }, h("button", { key: '56b3364b113a4fd6f97c9a6e6b3e3e14fc814de0', 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: '0f8c5c99e3489bf49ae66f7b6803f4b46b9b6684', name: "loading" }), h("span", { key: '6ecbe1b1eb0c4b7fe389dc923e22df21dc33cad3' }, h("slot", { key: 'ac5ccada947a49b0995e149082b15a5aeb885a85', name: "prefix" }, position === 'prefix' && icon && h("i", { key: '32f1363e0300fbaa20789b9b5259f5b36f5fe86a', class: ' leading-none ' + icon }))), h("slot", { key: 'acfc12c837c3be3025a2c4a9be3de02a116bdfa3' }, this.buttonText), h("span", { key: 'e7ff604974e2489bc791d9e853d476e88334c75b' }, h("slot", { key: '2a8e9d5db9e907f710da9728ac8cc85c53d8864a', name: "suffix" }, position === 'suffix' && icon && h("i", { key: 'a7d25eb005aef8ed4aa807004bb79fc55c45d3de', class: ' leading-none ' + icon }))))));
+    }
+};
+BcmButton.style = BcmButtonStyle0;
+
+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 = ce({
+            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: 'bbbe833906ad9261f0e186a73c38838895b4163a' }, h("bcm-button", { key: 'bc658a949cd8d65b92ec8458d6f7fc310a72ef4f', kind: "outline" }, h("span", { key: '3ff8e4e6765ea6bc1c8b41094ea7b7d928027d49', part: "text" }, this.text)), this.isReady && (h("bcm-linked", { key: 'c625fa0a88c0e88d8ee4b8a9e76e04d2feabb34c', targetElement: this.buttonRef }, h("div", { key: 'e45943e172eef094f9009123c8267b74641d5087', part: "dropdown-container", class: this.dropdownClass() }, h("slot", { key: 'd6b7558138785231877ab570b3e345b3deae008b', 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 = ce({
+            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: 'dab286a93e70df2389820986b12dbb099686a949', "aria-checked": this.selected, class: this.dropdownItemClass({
+                selected: this.selected,
+                error: this.error,
+            }), onClick: () => this.handleClick() }, h("slot", { key: 'd8b3f85acfa5f9744cdcd7aac41cce576123ff2b', name: "left-content" }, this.icon && h("bcm-icon", { key: '4a8908b05d48832b5758fa430f8d188b2bcb2caf', "icon-name": this.icon })), h("div", { key: '233863671bd28de9c5bc45f7221398f04297dcaa', class: "flex flex-row text-pretty w-full" }, h("slot", { key: 'b2cf533aff90f2bff5328d26b964f00664d42473' }, this.text)), h("slot", { key: '3f423b125ba32fe7d593a0cb5d000b7a6db8f172', 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;
+
+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)}:host{display:block;position:relative}.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{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 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();
+        }
+    }
+    componentDidLoad() {
+        requestAnimationFrame(() => {
+            this.floatingEl = this.host.shadowRoot.querySelector('.floating-content');
+            this.isReady = true;
+            this.connectTarget();
+        });
+    }
+    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();
+    }
+    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;
+        const middleware = [
+            offset(this.offset),
+            flip({
+                fallbackPlacements: ['top-start', 'bottom-start', 'right-start', 'left-start'],
+            }),
+            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();
+        this.isVisible = true;
+        // Don't move to body in StencilJS, keep in shadow DOM
+        // if (this.appendToBody && this.floatingEl) {
+        //     document.body.appendChild(this.floatingEl);
+        // }
+        await this.updatePosition();
+    }
+    async hide() {
+        if (!this.isVisible)
+            return;
+        this.bcmHide.emit();
+        this.isVisible = false;
+        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();
+    }
+    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 [
+            // Portal div to body for positioning, but keep slot in shadow DOM
+            h("div", { key: 'b6af79e7bb9a025d39686d02416175ace281a19a', class: floatingClasses, style: {
+                    position: 'fixed',
+                    top: '0px',
+                    left: '0px',
+                    zIndex: this.zIndex.toString(),
+                    visibility: this.isVisible ? 'visible' : 'hidden',
+                    opacity: this.isVisible ? '1' : '0',
+                    pointerEvents: this.isVisible ? 'auto' : 'none',
+                } }, this.arrow && h("div", { key: 'ec25846caa6c8c3ee71ca01e802f714a01491a67', class: "floating-arrow" }), h("div", { key: '7a855e6caaee49c17c1f57d8283af789e7bb458f', class: "floating-wrapper" }, h("slot", { key: 'ba15b2faf8a0c7e6fa14441aa366deaa582aa419' }))),
+            // Hidden content holder for slot fallback
+            h("div", { key: 'e1542255d3d34e5c3d2d3b3e5d752848dc706ed5', style: { display: 'none' } }, h("slot", { key: 'aa62f7a2a3f109160082fb6ef798bd7b61760fb2', name: "fallback" })),
+        ];
+    }
+    get host() { return getElement(this); }
+    static get watchers() { return {
+        "targetId": ["setupTarget"],
+        "targetElement": ["setupTarget"],
+        "isVisible": ["onVisibilityChange"]
+    }; }
+};
+BcmLinked.style = BcmLinkedStyle0;
+
+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: '0c9e834dbe47309b7ec41c7c79bf07bf7d825f26', class: classNames('bcm-text appearance-none m-0 p-0', variantClass, overflowClass), part: "text" }, h("slot", { key: 'c947db45b7b7147c0780bbb3294802cd0f1be268' }, this.text)));
+    }
+};
+BcmText.style = BcmTextStyle0;
+
+export { BcmButton as bcm_button, Dropdown as bcm_dropdown, DropdownItem as bcm_dropdown_item, BcmLinked as bcm_linked, BcmText as bcm_text };
+
+//# sourceMappingURL=bcm-button_5.entry.js.map