bromcom-ui-next 0.1.29 → 0.1.30

package/dist/components/bcm-drawer.js

@@ -1,66 +1,121 @@
 import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
 import { t as tv } from './p-CEcVC0yX.js';
 
-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 drawerCss = ".contents{display:contents}.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))}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}:host{display:contents}[part=dialog]::backdrop{animation:backdrop-fade-in .2s ease-out}@keyframes backdrop-fade-in{0%{opacity:0}to{opacity:.5}}[part=drawer]{transition:transform .2s ease-out}:host([position=left]) [part=drawer]{transform:translateX(-20px)}:host([position=left][open]) [part=drawer]{transform:translateX(0)}:host([position=right]) [part=drawer]{transform:translateX(20px)}:host([position=right][open]) [part=drawer]{transform:translateX(0)}:host([position=top]) [part=drawer]{transform:translateY(-20px)}:host([position=top][open]) [part=drawer]{transform:translateY(0)}:host([position=bottom]) [part=drawer]{transform:translateY(20px)}:host([position=bottom][open]) [part=drawer]{transform:translateY(0)}.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}.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-end{align-items:flex-end}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:var(--bcm-ui-border-radius-default,6px)}.border-0{border-width:0}.border-b{border-bottom-width:1px}.border-t{border-top-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-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)}.text-color-header{color:var(--bcm-ui-color-text-header)}.text-color-placeholder{color:var(--bcm-ui-color-text-placeholder)}.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-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)}.backdrop\\:bg-color-default-dark::backdrop{background-color:var(--bcm-ui-color-background-default-dark-default)}.backdrop\\:opacity-50::backdrop{opacity:.5}.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 BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.bcmOpen = createEvent(this, "bcmOpen", 7);
         this.bcmClose = createEvent(this, "bcmClose", 7);
         this.bcmBeforeOpen = createEvent(this, "bcmBeforeOpen", 7);
         this.bcmBeforeClose = createEvent(this, "bcmBeforeClose", 7);
+        /**
+         * Controls whether the drawer is open or closed
+         */
         this.open = false;
+        /**
+         * The size of the drawer. Can be a preset value or a custom CSS size
+         * - For left/right drawers:
+         *   - 'small': 320px
+         *   - 'medium': 480px
+         *   - 'large': 1064px
+         * - For top/bottom drawers:
+         *   - 'small': 40vh
+         *   - 'medium': 60vh
+         *   - 'large': 90vh
+         * - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')
+         */
         this.size = 'medium';
+        /**
+         * The position where the drawer slides in from
+         * - 'left': Slides from the left edge
+         * - 'right': Slides from the right edge
+         * - 'top': Slides from the top edge
+         * - 'bottom': Slides from the bottom edge
+         */
         this.position = 'right';
+        /**
+         * Makes the drawer take full width (for left/right) or full height (for top/bottom)
+         */
         this.fullWidth = false;
+        /**
+         * Makes the drawer take the full screen (100vw x 100vh)
+         */
+        this.fullScreen = false;
+        /**
+         * Controls backdrop behavior
+         * - true: Shows backdrop, drawer can be closed by clicking outside
+         * - false: No backdrop
+         * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)
+         */
+        this.backdrop = true;
+        /**
+         * Hides the header section completely
+         */
         this.noHeader = false;
+        /**
+         * Hides the footer section completely
+         */
+        this.noFooter = false;
+        /**
+         * Allows closing the drawer by clicking on the backdrop
+         */
+        this.closeOnBackdrop = true;
+        /**
+         * Allows closing the drawer by pressing the Escape key
+         */
+        this.closeOnEscape = true;
+        this.shake = 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',
+                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',
+                container: 'fixed inset-0 flex overflow-hidden',
+                drawer: 'relative bg-color-base text-color-default shadow-2xl flex flex-col',
+                header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 py-3 px-4',
+                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 p-4',
+                footer: 'flex items-center justify-end gap-2 py-3 px-4',
             },
             variants: {
-                open: {
-                    true: {
-                        backdrop: 'opacity-100 visible',
-                    },
-                    false: {
-                        backdrop: 'opacity-0 invisible',
-                    },
-                },
                 position: {
                     left: {
-                        wrapper: 'top-0 left-0 bottom-0',
+                        container: 'justify-start',
+                        drawer: 'h-full',
+                        header: 'border-b',
                     },
                     right: {
-                        wrapper: 'top-0 right-0 bottom-0',
+                        container: 'justify-end',
+                        drawer: 'h-full',
+                        header: 'border-b',
                     },
                     top: {
-                        wrapper: 'top-0 left-0 right-0',
+                        container: 'items-start',
+                        drawer: 'w-full',
+                        header: 'border-b',
                     },
                     bottom: {
-                        wrapper: 'bottom-0 left-0 right-0',
+                        container: 'items-end',
+                        drawer: 'w-full',
+                        header: 'border-t',
                     },
                 },
-                size: {
-                    small: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
-                    },
-                    medium: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
+                fullScreen: {
+                    true: {
+                        drawer: 'w-screen h-screen max-w-none max-h-none',
+                        container: 'p-0',
                     },
-                    large: {
-                        header: 'py-3 px-4',
-                        content: 'p-4',
+                },
+                shake: {
+                    true: {
+                        drawer: 'animate-shake',
                     },
                 },
                 noHeader: {
@@ -68,85 +123,122 @@ const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
                         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',
+                noFooter: {
+                    true: {
+                        footer: 'hidden',
                     },
                 },
-            ],
+            },
         });
+        this.handleBackdropClick = (event) => {
+            const target = event.target;
+            // Check if click is on the container (backdrop area), not on drawer content
+            if (target.getAttribute('part') === 'container') {
+                if (this.backdrop === 'static') {
+                    this.shakeDrawer();
+                }
+                else if (this.closeOnBackdrop) {
+                    this.hide();
+                }
+            }
+        };
+        this.handleDialogCancel = (event) => {
+            event.preventDefault();
+            if (this.backdrop === 'static') {
+                this.shakeDrawer();
+                // Force dialog to stay open for static backdrop
+                requestAnimationFrame(() => {
+                    if (this.dialogRef && !this.dialogRef.open && this.open) {
+                        this.dialogRef.showModal();
+                    }
+                });
+            }
+            else if (this.closeOnEscape) {
+                this.hide();
+            }
+        };
+        this.handleDrawerClick = (e) => {
+            e.stopPropagation();
+        };
     }
     handleOpenChange(isOpen) {
         if (isOpen) {
-            document.body.style.overflow = 'hidden';
+            const event = this.bcmBeforeOpen.emit();
+            if (event.defaultPrevented) {
+                this.open = false;
+                return;
+            }
+            if (this.dialogRef) {
+                if (!this.dialogRef.open) {
+                    this.dialogRef.showModal();
+                }
+            }
             this.bcmOpen.emit();
         }
         else {
-            document.body.style.overflow = '';
+            const event = this.bcmBeforeClose.emit();
+            if (event.defaultPrevented) {
+                this.open = true;
+                return;
+            }
+            if (this.dialogRef && this.dialogRef.open) {
+                this.dialogRef.close();
+            }
             this.bcmClose.emit();
         }
     }
-    handleKeyDown(event) {
-        if (event.key === 'Escape' && this.open) {
+    handleClick(event) {
+        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'); });
+        if (dismissElement) {
             this.hide();
+            event.preventDefault();
+            event.stopPropagation();
         }
     }
+    /**
+     * Programmatically opens the drawer
+     */
     async show() {
-        const event = this.bcmBeforeOpen.emit();
-        if (!event.defaultPrevented) {
-            this.open = true;
-        }
+        this.open = true;
     }
+    /**
+     * Programmatically closes the drawer
+     */
     async hide() {
-        const event = this.bcmBeforeClose.emit();
-        if (!event.defaultPrevented) {
-            this.open = false;
+        this.open = false;
+    }
+    /**
+     * Toggles the drawer open/closed state
+     */
+    async toggle() {
+        this.open = !this.open;
+    }
+    shakeDrawer() {
+        this.shake = true;
+        setTimeout(() => {
+            this.shake = false;
+        }, 300);
+    }
+    componentDidLoad() {
+        if (this.open && this.dialogRef) {
+            this.dialogRef.showModal();
         }
     }
     disconnectedCallback() {
-        document.body.style.overflow = '';
+        if (this.dialogRef && this.open) {
+            this.dialogRef.close();
+        }
     }
-    getWrapperStyle() {
+    getDrawerStyle() {
         const style = {};
+        if (this.fullScreen) {
+            style.width = '100vw';
+            style.height = '100vh';
+            style.maxWidth = 'none';
+            style.maxHeight = 'none';
+            return style;
+        }
         if (this.fullWidth) {
             if (this.position === 'left' || this.position === 'right') {
                 style.width = '100vw';
@@ -156,42 +248,55 @@ const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
             }
             return style;
         }
+        // Check if size is a custom value (contains px, %, rem, etc.)
+        const isCustomSize = this.size && (this.size.includes('px') || this.size.includes('%') || this.size.includes('rem') || this.size.includes('em') || this.size.includes('vw') || this.size.includes('vh'));
         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;
+            if (isCustomSize) {
+                style.width = this.size;
+            }
+            else {
+                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;
+            if (isCustomSize) {
+                style.height = this.size;
+            }
+            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,
+        const { dialog, container, drawer, header, headerContent, title, helperText, closeButton, content, footer } = this.drawerClass({
             position: this.position,
-            size: this.size,
+            fullScreen: this.fullScreen,
+            shake: this.shake,
             noHeader: this.noHeader,
+            noFooter: this.noFooter,
         });
-        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" })))));
+        return (h("dialog", { key: '2b60e637660a9aaed3d1223114d2f0df4c66bb44', ref: el => (this.dialogRef = el), part: "dialog", class: dialog(), onClick: this.handleBackdropClick, onCancel: this.handleDialogCancel, "aria-labelledby": "drawer-title", "aria-describedby": this.helperText ? 'drawer-helper' : undefined, "aria-modal": "true" }, h("div", { key: 'd08f1664dfc39e62bc0cf499b5976af0e14310da', part: "container", class: container() }, h("div", { key: 'ec18449ff5552177551606c5fdd48ce9116fd287', part: "drawer", class: drawer(), style: this.getDrawerStyle(), role: "document", onClick: this.handleDrawerClick }, !this.noHeader && (h("div", { key: '43a3e3afd31c5db5cf9c616f01a3212ec6e3472b', part: "header", class: header() }, h("div", { key: 'bb3d4eea627e0425422015cc400ccea81c70a1a5', part: "header-content", class: headerContent() }, h("h2", { key: '5c5cbd204a44f31171b932fba0932bfcba89e255', id: "drawer-title", part: "title", class: title() }, h("slot", { key: 'c8785c89adb151666c76c158c82f3e9ca6666199', name: "header" }, this.headerText)), this.helperText && (h("p", { key: '2ca315ad22086559305dc0cdcd63f32115a4f721', id: "drawer-helper", part: "helper-text", class: helperText() }, h("slot", { key: '93dcafee1e25675a0e72b53d9d6c848fd63c2f86', name: "helper" }, this.helperText)))), h("button", { key: '1eb3d5b2e9ac607bd1642ca9f067064bf376ce97', part: "close-button", class: closeButton(), onClick: () => this.hide(), "aria-label": "Close drawer", type: "button" }, h("bcm-icon", { key: '0c48991f9d68c874b78384de0d8a3bd15b27f363', name: "fa-solid fa-xmark" })))), h("div", { key: 'd34a886ca003e38bc84b86185fd0b5690954fd9f', part: "content", class: content() }, h("slot", { key: '1c3978b0a66f122b5d4ee5582ed0458c6fc16c73' })), !this.noFooter && (h("div", { key: 'db5faf3da663d11455299840e33732995aa75cf0', part: "footer", class: footer() }, h("slot", { key: '4836d78626ec999eb8f0aa8585d20df48a677f72', name: "footer" })))))));
     }
     get host() { return this; }
     static get watchers() { return {
@@ -201,13 +306,21 @@ const BcmDrawer$1 = /*@__PURE__*/ proxyCustomElement(class BcmDrawer extends H {
 }, [257, "bcm-drawer", {
         "open": [1540],
         "size": [1],
-        "position": [1],
+        "position": [513],
         "fullWidth": [4, "full-width"],
+        "fullScreen": [4, "full-screen"],
+        "backdrop": [8],
         "headerText": [1, "header-text"],
+        "helperText": [1, "helper-text"],
         "noHeader": [4, "no-header"],
+        "noFooter": [4, "no-footer"],
+        "closeOnBackdrop": [4, "close-on-backdrop"],
+        "closeOnEscape": [4, "close-on-escape"],
+        "shake": [32],
         "show": [64],
-        "hide": [64]
-    }, [[8, "keydown", "handleKeyDown"]], {
+        "hide": [64],
+        "toggle": [64]
+    }, [[2, "click", "handleClick"]], {
         "open": ["handleOpenChange"]
     }]);
 function defineCustomElement$1() {

package/dist/components/bcm-drawer.js.map

@@ -1 +1 @@
-{"file":"bcm-drawer.js","mappings":"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","names":["BcmDrawer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLElement;\n\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n  @Prop() size: DrawerSize = 'medium';\n  @Prop() position: DrawerPosition = 'right';\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n  @Prop() headerText?: string;\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  @Event() bcmOpen: EventEmitter<void>;\n  @Event() bcmClose: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      backdrop: 'fixed inset-0 bg-color-transparent z-40 transition-opacity duration-300',\n      wrapper: 'bcm-ui-element fixed bg-color-base text-color-default z-50 transform transition-transform duration-300 ease-in-out flex flex-col',\n      header: 'flex justify-between items-center bg-color-default text-color-default',\n      title: 'font-semibold m-0 text-size-6',\n      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',\n      content: 'overflow-y-auto flex-grow',\n    },\n    variants: {\n      open: {\n        true: {\n          backdrop: 'opacity-100 visible',\n        },\n        false: {\n          backdrop: 'opacity-0 invisible',\n        },\n      },\n      position: {\n        left: {\n          wrapper: 'top-0 left-0 bottom-0',\n        },\n        right: {\n          wrapper: 'top-0 right-0 bottom-0',\n        },\n        top: {\n          wrapper: 'top-0 left-0 right-0',\n        },\n        bottom: {\n          wrapper: 'bottom-0 left-0 right-0',\n        },\n      },\n      size: {\n        small: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        medium: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n        large: {\n          header: 'py-3 px-4',\n          content: 'p-4',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n    },\n    compoundVariants: [\n      {\n        open: true,\n        position: ['left', 'right'],\n        class: {\n          wrapper: 'translate-x-0',\n        },\n      },\n      {\n        open: true,\n        position: ['top', 'bottom'],\n        class: {\n          wrapper: 'translate-y-0',\n        },\n      },\n      {\n        open: false,\n        position: 'left',\n        class: {\n          wrapper: '-translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'right',\n        class: {\n          wrapper: 'translate-x-full',\n        },\n      },\n      {\n        open: false,\n        position: 'top',\n        class: {\n          wrapper: '-translate-y-full',\n        },\n      },\n      {\n        open: false,\n        position: 'bottom',\n        class: {\n          wrapper: 'translate-y-full',\n        },\n      },\n    ],\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      document.body.style.overflow = 'hidden';\n      this.bcmOpen.emit();\n    } else {\n      document.body.style.overflow = '';\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('keydown', { target: 'window' })\n  handleKeyDown(event: KeyboardEvent) {\n    if (event.key === 'Escape' && this.open) {\n      this.hide();\n    }\n  }\n\n  @Method()\n  async show(): Promise<void> {\n    const event = this.bcmBeforeOpen.emit();\n    if (!event.defaultPrevented) {\n      this.open = true;\n    }\n  }\n\n  @Method()\n  async hide(): Promise<void> {\n    const event = this.bcmBeforeClose.emit();\n    if (!event.defaultPrevented) {\n      this.open = false;\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private getWrapperStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    if (this.position === 'left' || this.position === 'right') {\n      switch (this.size) {\n        case 'small':\n          style.width = '320px';\n          break;\n        case 'medium':\n          style.width = '480px';\n          break;\n        case 'large':\n          style.width = '1064px';\n          break;\n      }\n    } else {\n      switch (this.size) {\n        case 'small':\n          style.height = '40vh';\n          break;\n        case 'medium':\n          style.height = '60vh';\n          break;\n        case 'large':\n          style.height = '90vh';\n          break;\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { backdrop, wrapper, header, title, closeButton, content } = this.drawerClass({\n      open: this.open,\n      position: this.position,\n      size: this.size,\n      noHeader: this.noHeader,\n    });\n\n    return (\n      <div part=\"base\">\n        <div part=\"backdrop\" class={backdrop()} onClick={() => this.hide()} />\n        <div\n          part=\"wrapper\"\n          class={wrapper()}\n          style={this.getWrapperStyle()}\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-hidden={!this.open ? 'true' : 'false'}\n          aria-label={this.headerText}\n        >\n          <div part=\"header\" class={header()}>\n            <h2 part=\"title\" class={title()}>\n              <slot name=\"header\">{this.headerText}</slot>\n            </h2>\n            <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close\">\n              <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n            </button>\n          </div>\n          <div part=\"content\" class={content()}>\n            <slot />\n          </div>\n          <div part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-drawer.js","mappings":"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","names":["BcmDrawer","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/drawer/drawer.css?tag=bcm-drawer&encapsulation=shadow","src/components/drawer/drawer.component.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n/* Backdrop fade animation */\n[part='dialog']::backdrop {\n  animation: backdrop-fade-in 200ms ease-out;\n}\n\n@keyframes backdrop-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.5;\n  }\n}\n\n/* Simple slide animations - 20px movement */\n[part='drawer'] {\n  transition: transform 200ms ease-out;\n}\n\n/* Left position animations */\n:host([position='left']) [part='drawer'] {\n  transform: translateX(-20px);\n}\n\n:host([position='left'][open]) [part='drawer'] {\n  transform: translateX(0);\n}\n\n/* Right position animations */\n:host([position='right']) [part='drawer'] {\n  transform: translateX(20px);\n}\n\n:host([position='right'][open]) [part='drawer'] {\n  transform: translateX(0);\n}\n\n/* Top position animations */\n:host([position='top']) [part='drawer'] {\n  transform: translateY(-20px);\n}\n\n:host([position='top'][open]) [part='drawer'] {\n  transform: translateY(0);\n}\n\n/* Bottom position animations */\n:host([position='bottom']) [part='drawer'] {\n  transform: translateY(20px);\n}\n\n:host([position='bottom'][open]) [part='drawer'] {\n  transform: translateY(0);\n}\n","import { Component, Prop, h, Element, Event, EventEmitter, Method, Watch, Listen, State } from '@stencil/core';\nimport { tv } from '@utils/tv';\nimport { DrawerPosition, DrawerSize } from './types';\n\n/**\n * @component BcmDrawer\n * @description A slide-in panel component built on the native HTML Dialog API.\n * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.\n *\n * @slot - Main content area of the drawer\n * @slot header - Custom header content (overrides headerText prop)\n * @slot helper - Custom helper text content (overrides helper-text prop)\n * @slot footer - Footer content for action buttons\n *\n * @part dialog - The native dialog element\n * @part container - The container wrapper for positioning\n * @part drawer - The main drawer panel\n * @part header - The header section\n * @part header-content - The content wrapper inside header\n * @part title - The title heading element\n * @part helper-text - The helper text paragraph\n * @part close-button - The close button in header\n * @part content - The main content area\n * @part footer - The footer section\n *\n * @example\n * ```html\n * <!-- Basic usage -->\n * <bcm-drawer open header-text=\"Menu\" position=\"left\">\n *   <nav>\n *     <a href=\"/home\">Home</a>\n *     <a href=\"/about\">About</a>\n *   </nav>\n * </bcm-drawer>\n *\n * <!-- Custom size and position -->\n * <bcm-drawer size=\"large\" position=\"right\">\n *   <div slot=\"header\">Settings</div>\n *   <form>...</form>\n *   <div slot=\"footer\">\n *     <button data-dismiss>Cancel</button>\n *     <button>Save</button>\n *   </div>\n * </bcm-drawer>\n *\n * <!-- Custom size with CSS units -->\n * <bcm-drawer size=\"600px\" position=\"bottom\">\n *   <p>Custom height drawer</p>\n * </bcm-drawer>\n *\n * <!-- Programmatic usage -->\n * <bcm-drawer id=\"myDrawer\">Content</bcm-drawer>\n * <script>\n *   document.getElementById('myDrawer').show();\n * </script>\n * ```\n */\n@Component({\n  tag: 'bcm-drawer',\n  styleUrl: 'drawer.css',\n  shadow: true,\n})\nexport class BcmDrawer {\n  @Element() host: HTMLBcmDrawerElement;\n\n  private dialogRef?: HTMLDialogElement;\n\n  /**\n   * Controls whether the drawer is open or closed\n   */\n  @Prop({ mutable: true, reflect: true }) open: boolean = false;\n\n  /**\n   * The size of the drawer. Can be a preset value or a custom CSS size\n   * - For left/right drawers:\n   *   - 'small': 320px\n   *   - 'medium': 480px\n   *   - 'large': 1064px\n   * - For top/bottom drawers:\n   *   - 'small': 40vh\n   *   - 'medium': 60vh\n   *   - 'large': 90vh\n   * - Custom values: Any valid CSS size (e.g., '600px', '50%', '30rem', '80vw')\n   */\n  @Prop() size: DrawerSize = 'medium';\n\n  /**\n   * The position where the drawer slides in from\n   * - 'left': Slides from the left edge\n   * - 'right': Slides from the right edge\n   * - 'top': Slides from the top edge\n   * - 'bottom': Slides from the bottom edge\n   */\n  @Prop({ reflect: true }) position: DrawerPosition = 'right';\n\n  /**\n   * Makes the drawer take full width (for left/right) or full height (for top/bottom)\n   */\n  @Prop({ attribute: 'full-width' }) fullWidth: boolean = false;\n\n  /**\n   * Makes the drawer take the full screen (100vw x 100vh)\n   */\n  @Prop({ attribute: 'full-screen' }) fullScreen: boolean = false;\n\n  /**\n   * Controls backdrop behavior\n   * - true: Shows backdrop, drawer can be closed by clicking outside\n   * - false: No backdrop\n   * - 'static': Shows backdrop but prevents closing by clicking outside (triggers shake animation)\n   */\n  @Prop() backdrop: boolean | 'static' = true;\n\n  /**\n   * Text to display in the drawer header\n   */\n  @Prop() headerText?: string;\n\n  /**\n   * Helper text to display below the header title\n   */\n  @Prop({ attribute: 'helper-text' }) helperText?: string;\n\n  /**\n   * Hides the header section completely\n   */\n  @Prop({ attribute: 'no-header' }) noHeader: boolean = false;\n\n  /**\n   * Hides the footer section completely\n   */\n  @Prop({ attribute: 'no-footer' }) noFooter: boolean = false;\n\n  /**\n   * Allows closing the drawer by clicking on the backdrop\n   */\n  @Prop({ attribute: 'close-on-backdrop' }) closeOnBackdrop: boolean = true;\n\n  /**\n   * Allows closing the drawer by pressing the Escape key\n   */\n  @Prop({ attribute: 'close-on-escape' }) closeOnEscape: boolean = true;\n\n  @State() shake: boolean = false;\n\n  /**\n   * Emitted after the drawer has opened\n   */\n  @Event() bcmOpen: EventEmitter<void>;\n\n  /**\n   * Emitted after the drawer has closed\n   */\n  @Event() bcmClose: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer opens. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeOpen: EventEmitter<void>;\n\n  /**\n   * Emitted before the drawer closes. Can be cancelled by calling event.preventDefault()\n   */\n  @Event({ cancelable: true }) bcmBeforeClose: EventEmitter<void>;\n\n  private drawerClass = tv({\n    slots: {\n      dialog:\n        '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',\n      container: 'fixed inset-0 flex overflow-hidden',\n      drawer: 'relative bg-color-base text-color-default shadow-2xl flex flex-col',\n      header: 'flex justify-between items-start bg-color-base text-color-default border-color-default border-solid border-0 py-3 px-4',\n      headerContent: 'flex-1 min-w-0 flex items-center gap-2',\n      title: 'font-semibold m-0 text-size-6 text-color-header',\n      helperText: 'text-size-5 text-color-placeholder m-0',\n      closeButton:\n        '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',\n      content: 'flex-grow overflow-y-auto p-4',\n      footer: 'flex items-center justify-end gap-2 py-3 px-4',\n    },\n    variants: {\n      position: {\n        left: {\n          container: 'justify-start',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        right: {\n          container: 'justify-end',\n          drawer: 'h-full',\n          header: 'border-b',\n        },\n        top: {\n          container: 'items-start',\n          drawer: 'w-full',\n          header: 'border-b',\n        },\n        bottom: {\n          container: 'items-end',\n          drawer: 'w-full',\n          header: 'border-t',\n        },\n      },\n      fullScreen: {\n        true: {\n          drawer: 'w-screen h-screen max-w-none max-h-none',\n          container: 'p-0',\n        },\n      },\n      shake: {\n        true: {\n          drawer: 'animate-shake',\n        },\n      },\n      noHeader: {\n        true: {\n          header: 'hidden',\n        },\n      },\n      noFooter: {\n        true: {\n          footer: 'hidden',\n        },\n      },\n    },\n  });\n\n  @Watch('open')\n  handleOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      const event = this.bcmBeforeOpen.emit();\n      if (event.defaultPrevented) {\n        this.open = false;\n        return;\n      }\n\n      if (this.dialogRef) {\n        if (!this.dialogRef.open) {\n          this.dialogRef.showModal();\n        }\n      }\n\n      this.bcmOpen.emit();\n    } else {\n      const event = this.bcmBeforeClose.emit();\n      if (event.defaultPrevented) {\n        this.open = true;\n        return;\n      }\n\n      if (this.dialogRef && this.dialogRef.open) {\n        this.dialogRef.close();\n      }\n      this.bcmClose.emit();\n    }\n  }\n\n  @Listen('click', { capture: true })\n  handleClick(event: MouseEvent) {\n    const path = event.composedPath() as HTMLElement[];\n    const dismissElement = path.find(el => el.hasAttribute?.('data-dismiss'));\n\n    if (dismissElement) {\n      this.hide();\n      event.preventDefault();\n      event.stopPropagation();\n    }\n  }\n\n\n  /**\n   * Programmatically opens the drawer\n   */\n  @Method()\n  async show(): Promise<void> {\n    this.open = true;\n  }\n\n  /**\n   * Programmatically closes the drawer\n   */\n  @Method()\n  async hide(): Promise<void> {\n    this.open = false;\n  }\n\n  /**\n   * Toggles the drawer open/closed state\n   */\n  @Method()\n  async toggle(): Promise<void> {\n    this.open = !this.open;\n  }\n\n  private shakeDrawer() {\n    this.shake = true;\n    setTimeout(() => {\n      this.shake = false;\n    }, 300);\n  }\n\n  private handleBackdropClick = (event: MouseEvent) => {\n    const target = event.target as HTMLElement;\n    // Check if click is on the container (backdrop area), not on drawer content\n    if (target.getAttribute('part') === 'container') {\n      if (this.backdrop === 'static') {\n        this.shakeDrawer();\n      } else if (this.closeOnBackdrop) {\n        this.hide();\n      }\n    }\n  };\n\n  private handleDialogCancel = (event: Event) => {\n    event.preventDefault();\n    if (this.backdrop === 'static') {\n      this.shakeDrawer();\n      // Force dialog to stay open for static backdrop\n      requestAnimationFrame(() => {\n        if (this.dialogRef && !this.dialogRef.open && this.open) {\n          this.dialogRef.showModal();\n        }\n      });\n    } else if (this.closeOnEscape) {\n      this.hide();\n    }\n  };\n\n  private handleDrawerClick = (e: MouseEvent) => {\n    e.stopPropagation();\n  };\n\n  componentDidLoad() {\n    if (this.open && this.dialogRef) {\n      this.dialogRef.showModal();\n    }\n  }\n\n  disconnectedCallback() {\n    if (this.dialogRef && this.open) {\n      this.dialogRef.close();\n    }\n  }\n\n  private getDrawerStyle() {\n    const style: { [key: string]: string } = {};\n\n    if (this.fullScreen) {\n      style.width = '100vw';\n      style.height = '100vh';\n      style.maxWidth = 'none';\n      style.maxHeight = 'none';\n      return style;\n    }\n\n    if (this.fullWidth) {\n      if (this.position === 'left' || this.position === 'right') {\n        style.width = '100vw';\n      } else {\n        style.height = '100vh';\n      }\n      return style;\n    }\n\n    // Check if size is a custom value (contains px, %, rem, etc.)\n    const isCustomSize = this.size && (this.size.includes('px') || this.size.includes('%') || this.size.includes('rem') || this.size.includes('em') || this.size.includes('vw') || this.size.includes('vh'));\n\n    if (this.position === 'left' || this.position === 'right') {\n      if (isCustomSize) {\n        style.width = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.width = '320px';\n            break;\n          case 'medium':\n            style.width = '480px';\n            break;\n          case 'large':\n            style.width = '1064px';\n            break;\n        }\n      }\n    } else {\n      if (isCustomSize) {\n        style.height = this.size;\n      } else {\n        switch (this.size) {\n          case 'small':\n            style.height = '40vh';\n            break;\n          case 'medium':\n            style.height = '60vh';\n            break;\n          case 'large':\n            style.height = '90vh';\n            break;\n        }\n      }\n    }\n\n    return style;\n  }\n\n  render() {\n    const { dialog, container, drawer, header, headerContent, title, helperText, closeButton, content, footer } = this.drawerClass({\n      position: this.position,\n      fullScreen: this.fullScreen,\n      shake: this.shake,\n      noHeader: this.noHeader,\n      noFooter: this.noFooter,\n    });\n\n    return (\n      <dialog\n        ref={el => (this.dialogRef = el)}\n        part=\"dialog\"\n        class={dialog()}\n        onClick={this.handleBackdropClick}\n        onCancel={this.handleDialogCancel}\n        aria-labelledby=\"drawer-title\"\n        aria-describedby={this.helperText ? 'drawer-helper' : undefined}\n        aria-modal=\"true\"\n      >\n        <div part=\"container\" class={container()}>\n          <div part=\"drawer\" class={drawer()} style={this.getDrawerStyle()} role=\"document\" onClick={this.handleDrawerClick}>\n            {!this.noHeader && (\n              <div part=\"header\" class={header()}>\n                <div part=\"header-content\" class={headerContent()}>\n                  <h2 id=\"drawer-title\" part=\"title\" class={title()}>\n                    <slot name=\"header\">{this.headerText}</slot>\n                  </h2>\n                  {this.helperText && (\n                    <p id=\"drawer-helper\" part=\"helper-text\" class={helperText()}>\n                      <slot name=\"helper\">{this.helperText}</slot>\n                    </p>\n                  )}\n                </div>\n                <button part=\"close-button\" class={closeButton()} onClick={() => this.hide()} aria-label=\"Close drawer\" type=\"button\">\n                  <bcm-icon name=\"fa-solid fa-xmark\"></bcm-icon>\n                </button>\n              </div>\n            )}\n\n            <div part=\"content\" class={content()}>\n              <slot />\n            </div>\n\n            {!this.noFooter && (\n              <div part=\"footer\" class={footer()}>\n                <slot name=\"footer\" />\n              </div>\n            )}\n          </div>\n        </div>\n      </dialog>\n    );\n  }\n}\n"],"version":3}

package/dist/components/bcm-dropdown-item.js

@@ -4,9 +4,11 @@ import { t as tv } from './p-CEcVC0yX.js';
 const dropdownItemCss = ".flex{display:flex}:host{display:inline-block;width:100%}::slotted([slot=left-content]){align-items:center;display:flex;flex-direction:row;gap:8px}::slotted([slot=right-content]){align-items:center;display:flex;flex-direction:row;gap:8px}.bcm-ui-element{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,sans-serif}.static{position:static}.w-full{width:100%}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.gap-2{gap:.5rem}.text-pretty{text-wrap:pretty}.bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]{background-color:var(--bcm-ui-color-background-base-active)}.bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]{background-color:var(--bcm-ui-color-background-palette-red-default)}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.shadow{--tw-shadow:var(--bcm-ui-box-shadow-default);--tw-shadow-colored:var(--bcm-ui-box-shadow-default);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-active\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-active)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-base-hover\\)\\]:hover{background-color:var(--bcm-ui-color-background-base-hover)}.hover\\:bg-\\[var\\(--bcm-ui-color-background-palette-red-default\\)\\]:hover{background-color:var(--bcm-ui-color-background-palette-red-default)}";
 
 const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends H {
-    constructor() {
+    constructor(registerHost) {
         super();
-        this.__registerHost();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
         this.__attachShadow();
         this.bcmDropDownItemChange = createEvent(this, "bcmDropDownItemChange", 1);
         this.selected = false;
@@ -46,17 +48,17 @@ const DropdownItem = /*@__PURE__*/ proxyCustomElement(class DropdownItem extends
     }
     render() {
         var _a;
-        return (h("div", { key: 'a7711d8f7d3b825e14ed5caf3546c7ddc839d099', "aria-checked": this.selected, class: this.dropdownItemClass({
+        return (h("div", { key: 'df59d3ea6c53de5a10d37b6acd8e81d9c516e6f5', "aria-checked": this.selected, class: this.dropdownItemClass({
                 selected: this.selected,
                 error: this.error,
-            }), onClick: () => this.handleClick() }, h("slot", { key: '1d262e43a2600450e76220121fc309e31e254940', name: "left-content" }, this.icon && h("bcm-icon", { key: 'cac088e6752681d3187f7d4896a9097589e6e2b9', "icon-name": this.icon })), h("div", { key: '90012594c1a377543673e3aaa4883cd97e4c6d8b', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '511aeda759e51451d57a4b5f80fc95080dc48239' }, this.text)), h("slot", { key: '9297f69765be0a666189cf6c4f73c6819de87d62', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
+            }), onClick: () => this.handleClick() }, h("slot", { key: '7ef8f52088bff39eb3dfecf7269b1d6b29185582', name: "left-content" }, this.icon && h("bcm-icon", { key: 'a302aafb745289c380edc120738c973fe7200c6d', "icon-name": this.icon })), h("div", { key: '7c5c8c27b982dbd314d5645603035f4dff0087d7', class: "flex flex-row text-pretty w-full" }, h("slot", { key: '873e7b62a2b20cc992425dcfd42c4edd1da6144b' }, this.text)), h("slot", { key: '199f13fb5dfa2d6b5bd1ed07652aa721eaf3c8a9', name: "right-content" }, (_a = this.rightIcons) === null || _a === void 0 ? void 0 : _a.map(icon => (h("bcm-icon", { "icon-name": icon }))))));
     }
     get host() { return this; }
     static get style() { return dropdownItemCss; }
 }, [257, "bcm-dropdown-item", {
         "text": [1],
         "icon": [1],
-        "rightIcons": [16, "right-icons"],
+        "rightIcons": [16],
         "selected": [516],
         "error": [516],
         "disabled": [516]

package/dist/components/bcm-dropdown-item.js.map

@@ -1 +1 @@
-{"file":"bcm-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,86CAA86C;;MCQz7C,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkB1C,QAAA,IAAiB,CAAA,iBAAA,GAAG,EAAE,CAC5B;AACE,YAAA,IAAI,EAAE,6GAA6G;AACnH,YAAA,QAAQ,EAAE;AACR,gBAAA,QAAQ,EAAE;AACR,oBAAA,IAAI,EAAE,uGAAuG;AAC7G,oBAAA,KAAK,EAAE,sDAAsD;AAC9D,iBAAA;AACD,gBAAA,KAAK,EAAE;AACL,oBAAA,IAAI,EAAE,uHAAuH;AAC7H,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACD,gBAAA,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE;AACR,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,QAAQ,EAAE,KAAK;AAChB,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAwBF;IA1DS,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;;IA+BJ,MAAM,GAAA;;QACJ,QACE,CACgB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,cAAA,EAAA,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,aAAA,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAI,CAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EACvB,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,GAAG,CAAC,IAAI,KACxB,CAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bcm-dropdown-item.js","mappings":";;;AAAA,MAAM,eAAe,GAAG,86CAA86C;;MCQz7C,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAU2B,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;AACtB,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAkB1C,QAAA,IAAiB,CAAA,iBAAA,GAAG,EAAE,CAC5B;AACE,YAAA,IAAI,EAAE,6GAA6G;AACnH,YAAA,QAAQ,EAAE;AACR,gBAAA,QAAQ,EAAE;AACR,oBAAA,IAAI,EAAE,uGAAuG;AAC7G,oBAAA,KAAK,EAAE,sDAAsD;AAC9D,iBAAA;AACD,gBAAA,KAAK,EAAE;AACL,oBAAA,IAAI,EAAE,uHAAuH;AAC7H,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACD,gBAAA,QAAQ,EAAE;oBACR,IAAI,EAAE,EAAE;AACR,oBAAA,KAAK,EAAE,EAAE;AACV,iBAAA;AACF,aAAA;AACD,YAAA,eAAe,EAAE;AACf,gBAAA,QAAQ,EAAE,KAAK;AACf,gBAAA,KAAK,EAAE,KAAK;AACZ,gBAAA,QAAQ,EAAE,KAAK;AAChB,aAAA;SACF,EACD;AACE,YAAA,OAAO,EAAE,KAAK;AACf,SAAA,CACF;AAwBF;IA1DS,WAAW,GAAA;AACjB,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;YAC9B,OAAO,EAAE,IAAI,CAAC,IAAI;YAClB,QAAQ,EAAE,IAAI,CAAC,QAAQ;AACxB,SAAA,CAAC;;IA+BJ,MAAM,GAAA;;QACJ,QACE,CACgB,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,cAAA,EAAA,IAAI,CAAC,QAAQ,EAC3B,KAAK,EAAE,IAAI,CAAC,iBAAiB,CAAC;gBAC5B,QAAQ,EAAE,IAAI,CAAC,QAAQ;gBACvB,KAAK,EAAE,IAAI,CAAC,KAAK;AAClB,aAAA,CAAC,EACF,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,EAAA,EAEjC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,cAAc,EAAA,EAAE,IAAI,CAAC,IAAI,IAAI,CAAqB,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,WAAA,EAAA,IAAI,CAAC,IAAI,GAAa,CAAQ,EAC3F,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kCAAkC,EAAA,EAC3C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACpB,EACN,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,eAAe,EACvB,EAAA,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,GAAG,CAAC,IAAI,KACxB,CAAA,CAAA,UAAA,EAAA,EAAA,WAAA,EAAqB,IAAI,EAAA,CAAa,CACvC,CAAC,CACG,CACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/dropdown-item/dropdown-item.css?tag=bcm-dropdown-item&encapsulation=shadow","src/components/dropdown-item/dropdown-item.component.tsx"],"sourcesContent":[":host {\n  display: inline-block;\n  width: 100%;\n}\n\n::slotted([slot='left-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n\n::slotted([slot='right-content']) {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n}\n","import { Component, ComponentInterface, h, Prop, Event, EventEmitter, Element } from '@stencil/core';\nimport { tv } from '@utils/tv';\n\n@Component({\n  tag: 'bcm-dropdown-item',\n  styleUrl: 'dropdown-item.css',\n  shadow: true,\n})\nexport class DropdownItem implements ComponentInterface {\n  @Element() host: HTMLElement;\n  @Prop() text: string;\n  @Prop() icon: string;\n  @Prop() rightIcons: string[];\n  @Prop({ reflect: true }) selected: boolean = false;\n  @Prop({ reflect: true }) error: boolean = false;\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  @Event({\n    composed: false,\n    bubbles: false,\n    cancelable: true,\n    eventName: 'bcmDropDownItemChange',\n  })\n  bcmDropDownItemChange: EventEmitter<any>;\n\n  private handleClick() {\n    this.selected = true;\n    this.bcmDropDownItemChange.emit({\n      element: this.host,\n      selected: this.selected,\n    });\n  }\n\n  private dropdownItemClass = tv(\n    {\n      base: 'dropdown-item bcm-ui-element bcm-ui-content-display flex flex-row gap-2 py-2 px-4 cursor-pointer text-color',\n      variants: {\n        selected: {\n          true: 'bg-[var(--bcm-ui-color-background-base-active)] hover:bg-[var(--bcm-ui-color-background-base-active)]',\n          false: 'hover:bg-[var(--bcm-ui-color-background-base-hover)]',\n        },\n        error: {\n          true: 'bg-[var(--bcm-ui-color-background-palette-red-default)] hover:bg-[var(--bcm-ui-color-background-palette-red-default)]',\n          false: '',\n        },\n        disabled: {\n          true: '', // should be discuss with ux team\n          false: '',\n        },\n      },\n      defaultVariants: {\n        selected: false,\n        error: false,\n        disabled: false,\n      },\n    },\n    {\n      twMerge: false,\n    },\n  );\n\n  render() {\n    return (\n      <div\n        aria-checked={this.selected}\n        class={this.dropdownItemClass({\n          selected: this.selected,\n          error: this.error,\n        })}\n        onClick={() => this.handleClick()}\n      >\n        <slot name=\"left-content\">{this.icon && <bcm-icon icon-name={this.icon}></bcm-icon>}</slot>\n        <div class=\"flex flex-row text-pretty w-full\">\n          <slot>{this.text}</slot>\n        </div>\n        <slot name=\"right-content\">\n          {this.rightIcons?.map(icon => (\n            <bcm-icon icon-name={icon}></bcm-icon>\n          ))}\n        </slot>\n      </div>\n    );\n  }\n}\n"],"version":3}