bromcom-ui-next 0.1.28 → 0.1.30

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

@@ -1,910 +0,0 @@
-import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-BuuGCw0z.js';
-import { t as tv } from './tv-CEcVC0yX.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) {
-        registerInstance(this, hostRef);
-        this.bcmClick = createEvent(this, "bcmClick", 1);
-        this.bcmFocus = createEvent(this, "bcmFocus", 1);
-        this.bcmBlur = createEvent(this, "bcmBlur", 1);
-        /** Defines the main visual style of the button */
-        this.kind = 'primary';
-        /** Controls the button size */
-        this.size = 'medium';
-        /** Defines the button's status/state color */
-        this.status = 'default';
-        /** Icon placement (prefix/suffix) */
-        this.iconPosition = 'prefix';
-        /** Icon-only button mode */
-        this.iconOnly = false;
-        /** Full width button */
-        this.fullWidth = false;
-        /** HTML button type */
-        this.type = 'button';
-        /** Loading state */
-        this.loading = false;
-        /** Disabled state */
-        this.disabled = false;
-        /** Active state */
-        this.active = false;
-        this.handleClick = (event) => {
-            if (!this.disabled && !this.loading) {
-                this.bcmClick.emit(event);
-            }
-        };
-        this.handleFocus = (event) => {
-            this.bcmFocus.emit(event);
-        };
-        this.handleBlur = (event) => {
-            this.bcmBlur.emit(event);
-        };
-        this.buttonClass = tv({
-            base: 'bcm-button appearance-none inline-flex items-center justify-center border border-solid rounded outline-0',
-            variants: {
-                size: {
-                    small: 'text-size-4 py-px px-2 min-h-6',
-                    medium: 'text-size-5 py-0.5 px-3 min-h-8',
-                    large: 'text-size-6 py-1 px-3 min-h-10',
-                },
-                kind: {
-                    primary: 'kind-primary',
-                    ghost: 'kind-ghost',
-                    text: 'kind-text',
-                    outline: 'kind-outline',
-                },
-                fullWidth: {
-                    true: 'full-width w-full',
-                },
-                disabled: {
-                    true: 'disabled cursor-not-allowed bg-[--bcm-ui-color-background-disabled-default] text-color-disabled border-color-disabled',
-                    false: [
-                        'cursor-pointer',
-                        'bg-[--bcm-final-bg-color] text-[--bcm-final-text-color] border-[--bcm-final-border-color]',
-                        'hover:bg-[--bcm-final-hover-bg-color]',
-                        'active:bg-[--bcm-final-active-bg-color]',
-                        'focus-visible:ring',
-                    ],
-                },
-                loading: {
-                    true: '',
-                },
-                position: {
-                    first: 'position-first',
-                    middle: 'position-middle',
-                    last: 'position-last',
-                },
-            },
-            defaultVariants: {
-                size: 'medium',
-                kind: 'primary',
-                fullWidth: false,
-                disabled: false,
-                loading: false,
-            },
-        }, {
-            twMerge: false,
-        });
-    }
-    get buttonText() {
-        return this.text || (this.variant && variantOptions[this.variant] ? variantOptions[this.variant].text : '');
-    }
-    get buttonIcon() {
-        var _a;
-        if (this.variant && ((_a = variantOptions[this.variant]) === null || _a === void 0 ? void 0 : _a.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] ? 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: 'a9d5f590bcc4175aa663c999f5a84bee10c3c7f2' }, h("button", { key: 'c18c414edad304b4f9cd0155e683f1f9783b6fde', 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: '682e48b9d4a5e4ab6fb66bf44781448fad55f720', name: "loading" }), h("span", { key: 'b201ef2563f68e42416efa2816b890b2d41867ad' }, h("slot", { key: '4b30c9c05551671c45757a7afbccaabe4dea1d9a', name: "prefix" }, position === 'prefix' && icon && h("i", { key: '618a7e811aa190f60621095dbece3d29ee133f9e', class: ' leading-none ' + icon }))), h("slot", { key: 'b3a3a7257767f3e49895c8e7963899a701cdab43' }, this.buttonText), h("span", { key: '81b97078b064ce82516cea7564c64c8a89332759' }, h("slot", { key: '4e4d3bfb4814f207f27f6efc2327575e65f69180', name: "suffix" }, position === 'suffix' && icon && h("i", { key: '75373a66baeae2a66b219626b2f3694ac7cb4179', class: ' leading-none ' + icon }))))));
-    }
-};
-BcmButton.style = buttonCss;
-
-const STATUS_COLORS = {
-    info: 'blue',
-    error: 'red',
-    warning: 'amber',
-    success: 'green',
-    primary: 'primary',
-};
-
-const chipCss = ":host{--bcm-chip-bg:var(--bcm-ui-color-background-default-default);--bcm-chip-text:var(--bcm-ui-color-text-default);--bcm-chip-border:var(--bcm-ui-color-border-default);--bcm-chip-hover-bg:var(--bcm-ui-color-background-default-hover);--bcm-chip-active-bg:var(--bcm-ui-color-background-default-active);--bcm-chip-radius:6px;display:inline-block}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.flex{display:flex}.min-w-max{min-width:max-content}.cursor-not-allowed{cursor:not-allowed}.cursor-pointer{cursor:pointer}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:.25rem}.rounded-\\[--bcm-chip-radius\\]{border-radius:var(--bcm-chip-radius)}.border{border-width:1px}.border-none{border-style:none}.border-\\[--bcm-chip-border\\]{border-color:var(--bcm-chip-border)}.border-transparent{border-color:transparent}.bg-\\[--bcm-chip-bg\\]{background-color:var(--bcm-chip-bg)}.px-2{padding-left:.5rem;padding-right:.5rem}.py-0\\.5{padding-bottom:.125rem;padding-top:.125rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-px{padding-bottom:1px;padding-top:1px}.text-size-3{font-size:var(--bcm-ui-font-size-3,12px);line-height:var(--bcm-ui-line-height-3,16px)}.text-size-4{font-size:var(--bcm-ui-font-size-4,14px);line-height:var(--bcm-ui-line-height-4,20px)}.text-size-5{font-size:var(--bcm-ui-font-size-5,16px);line-height:var(--bcm-ui-line-height-5,24px)}.font-normal{font-weight:400}.text-\\[--bcm-chip-text\\]{color:var(--bcm-chip-text)}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[--bcm-chip-hover-bg\\]:hover{background-color:var(--bcm-chip-hover-bg)}.active\\:bg-\\[--bcm-chip-active-bg\\]:active{background-color:var(--bcm-chip-active-bg)}";
-
-const BcmChip = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bcmDismiss = createEvent(this, "bcmDismiss", 1);
-        /** Chip size variant */
-        this.size = 'medium';
-        /** Chip style variant */
-        this.kind = 'filled';
-        /** Chip status */
-        this.status = 'default';
-        /** Whether chip can be dismissed */
-        this.dismissible = false;
-        /** Whether chip is disabled */
-        this.disabled = false;
-        this.chipClass = tv({
-            base: [
-                'chip bcm-ui-element font-normal flex items-center justify-center px-2 gap-1 min-w-max border',
-                'bg-[--bcm-chip-bg] text-[--bcm-chip-text] rounded-[--bcm-chip-radius] border-[--bcm-chip-border]',
-                'hover:bg-[--bcm-chip-hover-bg] active:bg-[--bcm-chip-active-bg]',
-            ],
-            variants: {
-                size: {
-                    small: 'small py-px text-size-3',
-                    medium: 'medium py-0.5 text-size-4',
-                    large: 'large py-1 text-size-5',
-                },
-                kind: {
-                    filled: 'filled border-transparent',
-                    outlined: 'outlined',
-                    text: 'text border-none',
-                },
-                disabled: {
-                    true: 'cursor-not-allowed',
-                },
-            },
-        }, { twMerge: false });
-    }
-    get chipStyle() {
-        let _color = this.color;
-        if (this.disabled) {
-            return {
-                '--bcm-chip-bg': 'var(--bcm-ui-color-background-disabled-default)',
-                '--bcm-chip-text': 'var(--bcm-ui-color-text-disabled)',
-                '--bcm-chip-border': 'var(--bcm-ui-color-border-disabled)',
-                '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-disabled-default)',
-                '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-disabled-default)',
-            };
-        }
-        if (this.status !== 'default') {
-            _color = STATUS_COLORS[this.status];
-        }
-        const styles = {
-            filled: {
-                '--bcm-chip-bg': `var(--bcm-ui-color-background-palette-${_color}-default)`,
-                '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,
-                '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,
-                '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,
-                '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,
-            },
-            outlined: {
-                '--bcm-chip-bg': 'transparent',
-                '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,
-                '--bcm-chip-border': `var(--bcm-ui-color-border-${_color})`,
-                '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,
-                '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,
-            },
-            text: {
-                '--bcm-chip-bg': 'transparent',
-                '--bcm-chip-text': `var(--bcm-ui-color-text-palette-${_color})`,
-                '--bcm-chip-border': 'transparent',
-                '--bcm-chip-hover-bg': `var(--bcm-ui-color-background-palette-${_color}-hover)`,
-                '--bcm-chip-active-bg': `var(--bcm-ui-color-background-palette-${_color}-active)`,
-            },
-        };
-        const defaultStyles = {
-            filled: {
-                '--bcm-chip-bg': 'var(--bcm-ui-color-background-default-default)',
-                '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',
-                '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',
-                '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',
-            },
-            outlined: {
-                '--bcm-chip-bg': 'transparent',
-                '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',
-                '--bcm-chip-border': 'var(--bcm-ui-color-border-default)',
-                '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',
-            },
-            text: {
-                '--bcm-chip-bg': 'transparent',
-                '--bcm-chip-text': 'var(--bcm-ui-color-text-default)',
-                '--bcm-chip-border': 'transparent',
-                '--bcm-chip-hover-bg': 'var(--bcm-ui-color-background-default-hover)',
-                '--bcm-chip-active-bg': 'var(--bcm-ui-color-background-default-active)',
-            },
-        };
-        return _color ? styles[this.kind] : defaultStyles[this.kind];
-    }
-    handleDismiss() {
-        if (!this.disabled) {
-            this.bcmDismiss.emit();
-        }
-    }
-    render() {
-        return (h("div", { key: 'd2692652edd6275d143e7ddffbc789d0b5315027', style: this.chipStyle, class: this.chipClass({ size: this.size, kind: this.kind, disabled: this.disabled }), role: "button", "aria-disabled": this.disabled ? 'true' : 'false' }, h("slot", { key: '8d3abf8a40a30dc93003077e52edc81062f10424' }), this.dismissible && h("bcm-icon", { key: '9914f1803e5d6feece7221e73b041d46f8237e95', onClick: () => this.handleDismiss(), class: "cursor-pointer", "icon-name": "fa-regular fa-xmark", "aria-label": "Dismiss chip" })));
-    }
-};
-BcmChip.style = chipCss;
-
-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) {
-        registerInstance(this, hostRef);
-        this.bcmOpen = createEvent(this, "bcmOpen", 7);
-        this.bcmClose = createEvent(this, "bcmClose", 7);
-        this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 7);
-        this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 7);
-        this.open = false;
-        this.size = 'medium';
-        this.position = 'right';
-        this.fullWidth = false;
-        this.noHeader = false;
-        this.drawerClass = tv({
-            slots: {
-                backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',
-                wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',
-                header: 'flex justify-between items-center bg-color-default text-color-default',
-                title: 'font-semibold m-0 text-size-6',
-                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 hover:bg-color-default-hover cursor-pointer active:bg-color-default-active',
-                content: 'overflow-y-auto flex-grow',
-            },
-            variants: {
-                open: {
-                    true: {
-                        backdrop: 'opacity-100 visible',
-                    },
-                    false: {
-                        backdrop: 'opacity-0 invisible',
-                    },
-                },
-                position: {
-                    left: {
-                        wrapper: 'top-0 left-0 bottom-0',
-                    },
-                    right: {
-                        wrapper: 'top-0 right-0 bottom-0',
-                    },
-                    top: {
-                        wrapper: 'top-0 left-0 right-0',
-                    },
-                    bottom: {
-                        wrapper: 'bottom-0 left-0 right-0',
-                    },
-                },
-                size: {
-                    small: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                    },
-                    medium: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                    },
-                    large: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                    },
-                },
-                noHeader: {
-                    true: {
-                        header: 'hidden',
-                    },
-                },
-            },
-            compoundVariants: [
-                {
-                    open: true,
-                    position: ['left', 'right'],
-                    class: {
-                        wrapper: 'translate-x-0',
-                    },
-                },
-                {
-                    open: true,
-                    position: ['top', 'bottom'],
-                    class: {
-                        wrapper: 'translate-y-0',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'left',
-                    class: {
-                        wrapper: '-translate-x-full',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'right',
-                    class: {
-                        wrapper: 'translate-x-full',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'top',
-                    class: {
-                        wrapper: '-translate-y-full',
-                    },
-                },
-                {
-                    open: false,
-                    position: 'bottom',
-                    class: {
-                        wrapper: 'translate-y-full',
-                    },
-                },
-            ],
-        });
-    }
-    handleOpenChange(isOpen) {
-        if (isOpen) {
-            document.body.style.overflow = 'hidden';
-            this.bcmOpen.emit();
-        }
-        else {
-            document.body.style.overflow = '';
-            this.bcmClose.emit();
-        }
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.open) {
-            this.hide();
-        }
-    }
-    async show() {
-        const event = this.bcmBeforeOpen.emit();
-        if (!event.defaultPrevented) {
-            this.open = true;
-        }
-    }
-    async hide() {
-        const event = this.bcmBeforeClose.emit();
-        if (!event.defaultPrevented) {
-            this.open = false;
-        }
-    }
-    disconnectedCallback() {
-        document.body.style.overflow = '';
-    }
-    getWrapperStyle() {
-        const style = {};
-        if (this.fullWidth) {
-            if (this.position === 'left' || this.position === 'right') {
-                style.width = '100vw';
-            }
-            else {
-                style.height = '100vh';
-            }
-            return style;
-        }
-        if (this.position === 'left' || this.position === 'right') {
-            switch (this.size) {
-                case 'small':
-                    style.width = '320px';
-                    break;
-                case 'medium':
-                    style.width = '480px';
-                    break;
-                case 'large':
-                    style.width = '1064px';
-                    break;
-            }
-        }
-        else {
-            switch (this.size) {
-                case 'small':
-                    style.height = '40vh';
-                    break;
-                case 'medium':
-                    style.height = '60vh';
-                    break;
-                case 'large':
-                    style.height = '90vh';
-                    break;
-            }
-        }
-        return style;
-    }
-    render() {
-        const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({
-            open: this.open,
-            position: this.position,
-            size: this.size,
-            noHeader: this.noHeader,
-        });
-        return (h("div", { key: '120639c39b40ba77d7420813e82c18952ae67514', part: "base" }, h("div", { key: '3f59e0b0c482421b38d8eb39076da51453a91a70', part: "backdrop", class: backdrop(), onClick: () => this.hide() }), h("div", { key: '9b97aeb2ad7067a11c76a7b265adeb2e3c80eac5', part: "wrapper", class: wrapper(), style: this.getWrapperStyle(), role: "dialog", "aria-modal": "true", "aria-hidden": !this.open ? 'true' : 'false', "aria-label": this.headerText }, h("div", { key: 'd2613cabb535822fed605f52fd782af88c6bef8e', part: "header", class: header() }, h("h2", { key: '1771936e710fe478e3793a1846a0acf3f98d8864', part: "title", class: title() }, h("slot", { key: '0f6e8cb671e201d20b54b7669de9abec7a5627d0', name: "header" }, this.headerText)), h("button", { key: 'da006eaf46c4e6e3d7e7f773477e8eb61be69c00', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close" }, h("bcm-icon", { key: '913497c5cc4305f3b0ddaf751803fdca19143a9d', name: "fa-solid fa-xmark" }))), h("div", { key: 'd0a287ee5726197cd180724fc70984c5f54f5ba2', part: "content", class: content() }, h("slot", { key: '8401ec9c937f0888499ec8bd4c7bdead3141284e' })), h("div", { key: '14991163fc8d7d78b5a89b8ec18cbf82690a4f0d', part: "footer" }, h("slot", { key: '10e3bb6c6e9aefa5eea8d24dd02fa482feedfb18', name: "footer" })))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-};
-BcmDrawer.style = drawerCss;
-
-const modalCss = ".contents{display:contents}:host{display:contents}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.m-0{margin:0}.flex{display:flex}.hidden{display:none}.h-6{height:1.5rem}.h-full{height:100%}.h-screen{height:100vh}.max-h-full{max-height:100%}.max-h-none{max-height:none}.w-6{width:1.5rem}.w-full{width:100%}.w-screen{width:100vw}.min-w-0{min-width:0}.max-w-full{max-width:100%}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.flex-grow{flex-grow:1}.-translate-y-4{--tw-translate-y:-1rem}.-translate-y-4,.translate-y-0{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-0{--tw-translate-y:0px}.scale-100{--tw-scale-x:1;--tw-scale-y:1}.scale-100,.scale-95{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))}.scale-95{--tw-scale-x:.95;--tw-scale-y:.95}.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))}.animate-shake{animation:shake .82s cubic-bezier(.36,.07,.19,.97) infinite;animation:shake .3s cubic-bezier(.36,.07,.19,.97) both}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-center{align-items:center}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.overflow-y-auto{overflow-y:auto}.overscroll-contain{overscroll-behavior:contain}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.rounded-lg{border-radius:var(--bcm-ui-border-radius-lg,8px)}.rounded-none{border-radius:var(--bcm-ui-border-radius-none,0)}.rounded-t-lg{border-top-left-radius:var(--bcm-ui-border-radius-lg,8px);border-top-right-radius:var(--bcm-ui-border-radius-lg,8px)}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-solid{border-style:solid}.border-none{border-style:none}.border-color-default{border-color:var(--bcm-ui-color-border-default)}.bg-color-base{background-color:var(--bcm-ui-color-background-base-default)}.bg-color-basic-base{background-color:var(--bcm-ui-color-background-basic-base)}.bg-transparent{background-color:transparent}.p-0{padding:0}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.px-8{padding-left:2rem;padding-right:2rem}.py-3{padding-bottom:.75rem;padding-top:.75rem}.py-4{padding-bottom:1rem;padding-top:1rem}.py-5{padding-bottom:1.25rem;padding-top:1.25rem}.pt-20{padding-top:5rem}.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)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.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)}.shadow,.shadow-2xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-2xl{--tw-shadow:var(--bcm-ui-box-shadow-2xl);--tw-shadow-colored:var(--bcm-ui-box-shadow-2xl)}.outline-none{outline:2px solid transparent;outline-offset:2px}.transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.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-300{transition-duration:.3s}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\\:bg-color-default-dark::backdrop{background-color:var(--bcm-ui-color-background-default-dark-default)}.backdrop\\:opacity-50::backdrop{opacity:.5}.backdrop\\:transition-opacity::backdrop{transition-duration:.15s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}.backdrop\\:duration-300::backdrop{transition-duration:.3s}.hover\\:bg-color-default-hover:hover{background-color:var(--bcm-ui-color-background-default-hover)}.focus-visible\\:ring:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}";
-
-const BcmModal = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.bcmOpen = createEvent(this, "bcmOpen", 7);
-        this.bcmClose = createEvent(this, "bcmClose", 7);
-        this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 7);
-        this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 7);
-        this.open = false;
-        this.size = 'medium';
-        this.placement = 'center';
-        this.backdrop = true;
-        this.fullWidth = false;
-        this.fullScreen = false;
-        this.noHeader = false;
-        this.noFooter = false;
-        this.closeOnBackdrop = true;
-        this.closeOnEscape = true;
-        this.isAnimating = false;
-        this.shake = false;
-        this.modalClass = tv({
-            slots: {
-                dialog: 'bcm-ui-element fixed inset-0 m-0 p-0 w-full max-w-full h-full max-h-full border-none bg-transparent backdrop:bg-color-default-dark backdrop:opacity-50 backdrop:transition-opacity backdrop:duration-300',
-                container: 'fixed inset-0 flex items-start justify-center p-4 overflow-y-auto overscroll-contain',
-                modal: 'relative bg-color-basic-base text-color-default rounded-lg shadow-2xl transform transition-all duration-300 ease-in-out flex flex-col',
-                header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 border-b rounded-t-lg',
-                headerContent: 'flex-1 min-w-0 flex items-center gap-2',
-                title: 'font-semibold m-0 text-size-6 text-color-header',
-                helperText: 'text-size-5 text-color-placeholder m-0',
-                closeButton: 'text-size-5 font-medium text-color-default bg-transparent border-none p-0 h-6 w-6 rounded hover:bg-color-default-hover cursor-pointer active:bg-color-active transition-colors flex-shrink-0 outline-none focus-visible:ring ',
-                content: 'flex-grow overflow-y-auto',
-                footer: 'flex items-center justify-end gap-2',
-            },
-            variants: {
-                open: {
-                    true: {
-                        modal: 'opacity-100 translate-y-0 scale-100',
-                    },
-                    false: {
-                        modal: 'opacity-0 -translate-y-4 scale-95',
-                    },
-                },
-                placement: {
-                    center: {
-                        container: 'items-center',
-                    },
-                    top: {
-                        container: 'items-start pt-20',
-                    },
-                },
-                size: {
-                    small: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                        footer: 'py-3 px-4',
-                    },
-                    medium: {
-                        header: 'py-4 px-5',
-                        content: 'p-5',
-                        footer: 'py-4 px-5',
-                    },
-                    large: {
-                        header: 'py-4 px-6',
-                        content: 'p-6',
-                        footer: 'py-4 px-6',
-                    },
-                    xlarge: {
-                        header: 'py-5 px-6',
-                        content: 'p-6',
-                        footer: 'py-5 px-6',
-                    },
-                    xxlarge: {
-                        header: 'py-5 px-8',
-                        content: 'p-8',
-                        footer: 'py-5 px-8',
-                    },
-                    full: {
-                        header: 'py-5 px-8',
-                        content: 'p-8',
-                        footer: 'py-5 px-8',
-                    },
-                },
-                fullScreen: {
-                    true: {
-                        modal: 'rounded-none w-screen h-screen max-w-none max-h-none',
-                        container: 'p-0',
-                    },
-                },
-                shake: {
-                    true: {
-                        modal: 'animate-shake',
-                    },
-                },
-                noHeader: {
-                    true: {
-                        header: 'hidden',
-                    },
-                },
-                noFooter: {
-                    true: {
-                        footer: 'hidden',
-                    },
-                },
-            },
-        });
-        this.handleBackdropClick = (event) => {
-            const target = event.target;
-            // Check if click is on the container (backdrop area), not on modal content
-            if (target.getAttribute('part') === 'container') {
-                if (this.backdrop === 'static') {
-                    this.shakeModal();
-                }
-                else if (this.closeOnBackdrop) {
-                    this.hide();
-                }
-            }
-        };
-        this.handleDialogCancel = (event) => {
-            event.preventDefault();
-            if (this.closeOnEscape) {
-                if (this.backdrop === 'static') {
-                    this.shakeModal();
-                }
-                else {
-                    this.hide();
-                }
-            }
-        };
-    }
-    async handleOpenChange(isOpen) {
-        if (isOpen) {
-            this.isAnimating = true;
-            const event = this.bcmBeforeOpen.emit();
-            if (event.defaultPrevented) {
-                this.open = false;
-                return;
-            }
-            // Use native dialog API with top-layer
-            if (this.dialogRef) {
-                this.dialogRef.showModal();
-                // Small delay for animation
-                await new Promise(resolve => setTimeout(resolve, 50));
-                this.isAnimating = false;
-                this.bcmOpen.emit();
-            }
-        }
-        else {
-            this.isAnimating = true;
-            const event = this.bcmBeforeClose.emit();
-            if (event.defaultPrevented) {
-                this.open = true;
-                return;
-            }
-            // Wait for animation before closing
-            await new Promise(resolve => setTimeout(resolve, 300));
-            if (this.dialogRef) {
-                this.dialogRef.close();
-            }
-            this.isAnimating = false;
-            this.bcmClose.emit();
-        }
-    }
-    handleClick(event) {
-        // Use composedPath to work with shadow DOM and slots
-        const path = event.composedPath();
-        const dismissElement = path.find(el => { var _a; return (_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-dismiss'); });
-        const closeModalElement = path.find(el => { var _a; return (_a = el.hasAttribute) === null || _a === void 0 ? void 0 : _a.call(el, 'data-close-modal'); });
-        if (dismissElement) {
-            this.hide();
-            event.preventDefault();
-            event.stopPropagation();
-        }
-        else if (closeModalElement) {
-            const modalId = closeModalElement.getAttribute('data-close-modal');
-            // If modalId matches this modal's id, close it
-            if (!modalId || modalId === this.host.id) {
-                this.hide();
-                event.preventDefault();
-                event.stopPropagation();
-            }
-        }
-    }
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.open) {
-            // Only handle ESC if this is the topmost modal
-            const openModals = Array.from(document.querySelectorAll('bcm-modal[open]'));
-            const topModal = openModals[openModals.length - 1];
-            if (topModal !== this.host) {
-                return;
-            }
-            event.preventDefault();
-            if (this.closeOnEscape) {
-                if (this.backdrop === 'static') {
-                    this.shakeModal();
-                }
-                else {
-                    this.hide();
-                }
-            }
-            else if (this.backdrop === 'static') {
-                this.shakeModal();
-            }
-        }
-    }
-    async show() {
-        this.open = true;
-    }
-    async hide() {
-        this.open = false;
-    }
-    async toggle() {
-        this.open = !this.open;
-    }
-    shakeModal() {
-        this.shake = true;
-        setTimeout(() => {
-            this.shake = false;
-        }, 300);
-    }
-    getModalStyle() {
-        if (this.fullScreen) {
-            return {
-                width: '100vw',
-                height: '100vh',
-                maxWidth: 'none',
-                maxHeight: 'none',
-            };
-        }
-        if (this.fullWidth) {
-            return {
-                width: '100%',
-                maxWidth: '100%',
-            };
-        }
-        const widths = {
-            small: '400px',
-            medium: '600px',
-            large: '800px',
-            xlarge: '1024px',
-            xxlarge: '1200px',
-            full: '100%',
-        };
-        return {
-            width: widths[this.size],
-            maxWidth: this.fullScreen ? 'none' : '90vw',
-            maxHeight: this.fullScreen ? 'none' : '90vh',
-        };
-    }
-    componentDidLoad() {
-        if (this.open && this.dialogRef) {
-            this.dialogRef.showModal();
-        }
-    }
-    disconnectedCallback() {
-        if (this.dialogRef && this.open) {
-            this.dialogRef.close();
-        }
-    }
-    render() {
-        const { dialog, container, modal, header, headerContent, title, helperText, closeButton, content, footer } = this.modalClass({
-            open: this.open,
-            placement: this.placement,
-            size: this.size,
-            fullScreen: this.fullScreen,
-            shake: this.shake,
-            noHeader: this.noHeader,
-            noFooter: this.noFooter,
-        });
-        return (h("dialog", { key: 'c56eace3816f22ce8c5c3d779940c32c1a2504fe', ref: el => (this.dialogRef = el), part: "dialog", class: dialog(), onClick: this.handleBackdropClick, onCancel: this.handleDialogCancel, "aria-labelledby": "modal-title", "aria-describedby": this.helperText ? 'modal-helper' : undefined, "aria-modal": "true" }, h("div", { key: '0c8185cd161cb0dafcbd8a6c5f67528cd32c23de', part: "container", class: container() }, h("div", { key: 'ff66ec6396147a71d7819ae5e2f00ca38070b306', part: "modal", class: modal(), style: this.getModalStyle(), role: "document", onClick: e => e.stopPropagation() }, !this.noHeader && (h("div", { key: '4cc6b28b668fe76dcaee1138887183ea98466cbe', part: "header", class: header() }, h("div", { key: '8b005c9d586d4d2527c0319c4d17512650479bb0', part: "header-content", class: headerContent() }, h("h2", { key: '756e7f7f7e0d7b2b8c1f476fcb2b00a204884b8e', id: "modal-title", part: "title", class: title() }, h("slot", { key: 'd814bb4b44e47455ded1b0f737c8ddf61fddf9b3', name: "header" }, this.headerText)), this.helperText && (h("p", { key: '7c385f9dce88bc22bf0b7700bb2b289b7803683e', id: "modal-helper", part: "helper-text", class: helperText() }, h("slot", { key: '57bdf3201dd678a1ebdda9893b67032ff773fd05', name: "helper" }, this.helperText)))), h("button", { key: '6bcdfc24e13b375f81c9664a20b552a3f0c5d591', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close modal", type: "button" }, h("bcm-icon", { key: '894f44177f0acbf3e581cbae5cdc76f71e321b57', name: "fa-solid fa-xmark" })))), h("div", { key: '74db820df232cb7728c8a58923a9459b9545e8a1', part: "content", class: content() }, h("slot", { key: '95fd04fbbb441d79d649fd68eeef3868ce65bccc' })), !this.noFooter && (h("div", { key: '7c841bfe1a35abc8d9fe031eb0c8fed5a131db4e', part: "footer", class: footer() }, h("slot", { key: '9bd84178717338a821204f81179571a48bfd1f66', name: "footer" })))))));
-    }
-    get host() { return getElement(this); }
-    static get watchers() { return {
-        "open": ["handleOpenChange"]
-    }; }
-};
-BcmModal.style = modalCss;
-
-export { BcmButton as bcm_button, BcmChip as bcm_chip, BcmDrawer as bcm_drawer, BcmModal as bcm_modal };
-//# sourceMappingURL=bcm-button.bcm-chip.bcm-drawer.bcm-modal.entry.js.map
-
-//# sourceMappingURL=bcm-button_4.entry.js.map