bromcom-ui-next 0.1.28 → 0.1.30

package/dist/collection/components/drawer/drawer.component.js

@@ -1,56 +1,162 @@
 import { h } from "@stencil/core";
 import { tv } from "../../utils/tv";
+/**
+ * @component BcmDrawer
+ * @description A slide-in panel component built on the native HTML Dialog API.
+ * Ideal for navigation menus, forms, and contextual information that slides in from any edge of the screen.
+ *
+ * @slot - Main content area of the drawer
+ * @slot header - Custom header content (overrides headerText prop)
+ * @slot helper - Custom helper text content (overrides helper-text prop)
+ * @slot footer - Footer content for action buttons
+ *
+ * @part dialog - The native dialog element
+ * @part container - The container wrapper for positioning
+ * @part drawer - The main drawer panel
+ * @part header - The header section
+ * @part header-content - The content wrapper inside header
+ * @part title - The title heading element
+ * @part helper-text - The helper text paragraph
+ * @part close-button - The close button in header
+ * @part content - The main content area
+ * @part footer - The footer section
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <bcm-drawer open header-text="Menu" position="left">
+ *   <nav>
+ *     <a href="/home">Home</a>
+ *     <a href="/about">About</a>
+ *   </nav>
+ * </bcm-drawer>
+ *
+ * <!-- Custom size and position -->
+ * <bcm-drawer size="large" position="right">
+ *   <div slot="header">Settings</div>
+ *   <form>...</form>
+ *   <div slot="footer">
+ *     <button data-dismiss>Cancel</button>
+ *     <button>Save</button>
+ *   </div>
+ * </bcm-drawer>
+ *
+ * <!-- Custom size with CSS units -->
+ * <bcm-drawer size="600px" position="bottom">
+ *   <p>Custom height drawer</p>
+ * </bcm-drawer>
+ *
+ * <!-- Programmatic usage -->
+ * <bcm-drawer id="myDrawer">Content</bcm-drawer>
+ * <script>
+ *   document.getElementById('myDrawer').show();
+ * </script>
+ * ```
+ */
 export class BcmDrawer {
     constructor() {
+        /**
+         * 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: {
@@ -58,85 +164,122 @@ export class BcmDrawer {
                         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';
@@ -146,42 +289,55 @@ export class BcmDrawer {
             }
             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" })))))));
     }
     static get is() { return "bcm-drawer"; }
     static get encapsulation() { return "shadow"; }
@@ -199,7 +355,6 @@ export class BcmDrawer {
         return {
             "open": {
                 "type": "boolean",
-                "attribute": "open",
                 "mutable": true,
                 "complexType": {
                     "original": "boolean",
@@ -210,20 +365,20 @@ export class BcmDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Controls whether the drawer is open or closed"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": true,
+                "attribute": "open",
                 "defaultValue": "false"
             },
             "size": {
                 "type": "string",
-                "attribute": "size",
                 "mutable": false,
                 "complexType": {
                     "original": "DrawerSize",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "resolved": "string",
                     "references": {
                         "DrawerSize": {
                             "location": "import",
@@ -236,16 +391,16 @@ export class BcmDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "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')"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "size",
                 "defaultValue": "'medium'"
             },
             "position": {
                 "type": "string",
-                "attribute": "position",
                 "mutable": false,
                 "complexType": {
                     "original": "DrawerPosition",
@@ -262,16 +417,36 @@ export class BcmDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "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"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false,
+                "reflect": true,
+                "attribute": "position",
                 "defaultValue": "'right'"
             },
             "fullWidth": {
                 "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the drawer take full width (for left/right) or full height (for top/bottom)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "fullScreen": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -282,16 +457,36 @@ export class BcmDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Makes the drawer take the full screen (100vw x 100vh)"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "full-screen",
                 "defaultValue": "false"
             },
+            "backdrop": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | 'static'",
+                    "resolved": "\"static\" | boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "backdrop",
+                "defaultValue": "true"
+            },
             "headerText": {
                 "type": "string",
-                "attribute": "header-text",
                 "mutable": false,
                 "complexType": {
                     "original": "string",
@@ -302,15 +497,54 @@ export class BcmDrawer {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Text to display in the drawer header"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "header-text"
+            },
+            "helperText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Helper text to display below the header title"
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "attribute": "helper-text"
             },
             "noHeader": {
                 "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Hides the header section completely"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
                 "attribute": "no-header",
+                "defaultValue": "false"
+            },
+            "noFooter": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
@@ -321,15 +555,61 @@ export class BcmDrawer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Hides the footer section completely"
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
+                "attribute": "no-footer",
                 "defaultValue": "false"
+            },
+            "closeOnBackdrop": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows closing the drawer by clicking on the backdrop"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-backdrop",
+                "defaultValue": "true"
+            },
+            "closeOnEscape": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows closing the drawer by pressing the Escape key"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "close-on-escape",
+                "defaultValue": "true"
             }
         };
     }
+    static get states() {
+        return {
+            "shake": {}
+        };
+    }
     static get events() {
         return [{
                 "method": "bcmOpen",
@@ -339,7 +619,7 @@ export class BcmDrawer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted after the drawer has opened"
                 },
                 "complexType": {
                     "original": "void",
@@ -354,7 +634,7 @@ export class BcmDrawer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted after the drawer has closed"
                 },
                 "complexType": {
                     "original": "void",
@@ -369,7 +649,7 @@ export class BcmDrawer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted before the drawer opens. Can be cancelled by calling event.preventDefault()"
                 },
                 "complexType": {
                     "original": "void",
@@ -384,7 +664,7 @@ export class BcmDrawer {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": ""
+                    "text": "Emitted before the drawer closes. Can be cancelled by calling event.preventDefault()"
                 },
                 "complexType": {
                     "original": "void",
@@ -408,7 +688,7 @@ export class BcmDrawer {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Programmatically opens the drawer",
                     "tags": []
                 }
             },
@@ -425,7 +705,24 @@ export class BcmDrawer {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "",
+                    "text": "Programmatically closes the drawer",
+                    "tags": []
+                }
+            },
+            "toggle": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Toggles the drawer open/closed state",
                     "tags": []
                 }
             }
@@ -440,10 +737,10 @@ export class BcmDrawer {
     }
     static get listeners() {
         return [{
-                "name": "keydown",
-                "method": "handleKeyDown",
-                "target": "window",
-                "capture": false,
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": true,
                 "passive": false
             }];
     }