bromcom-ui-next 0.1.25 → 0.1.27

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

@@ -0,0 +1,790 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-DCguxqPb.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 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, BcmDrawer as bcm_drawer, BcmModal as bcm_modal };
+//# sourceMappingURL=bcm-button.bcm-drawer.bcm-modal.entry.js.map
+
+//# sourceMappingURL=bcm-button_3.entry.js.map