@nova-design-system/nova-react 3.23.0 → 3.25.0

package/dist/cjs/nv-drawer.entry-Dp4AfBiF.js

@@ -0,0 +1,445 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var index_esmD3eWMME9 = require('./index.esm-D3eWMME9-CG1TVKfu.js');
+var events_utilsB6GgGra_ = require('./events.utils-B6GgGra--01N__3wY.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var slide_animationCmH5d1of = require('./slide.animation-CmH5d1of-BZuw607U.js');
+var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvDrawerCss = () => `nv-drawer dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px);border:none}nv-drawer dialog[data-state=closed]{pointer-events:none}nv-drawer dialog[data-state=open]{pointer-events:auto}nv-drawer dialog.side-right .backdrop{justify-content:flex-end}nv-drawer dialog.side-right .content{box-shadow:-4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer dialog.side-left .backdrop{justify-content:flex-start}nv-drawer dialog.side-left .content{box-shadow:4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer .backdrop{display:flex;height:100%;width:100%;padding:0}nv-drawer .backdrop .content{background:var(--color-level-00-background);width:var(--drawer-width, min(90vw, 400px));height:100%;display:flex;flex-direction:column;align-items:flex-start;position:relative}nv-drawer .backdrop .content[data-side=left]{border-top-right-radius:var(--drawer-radius-top-right, 0);border-bottom-right-radius:var(--drawer-radius-bottom-right, 0)}nv-drawer .backdrop .content[data-side=right]{border-top-left-radius:var(--drawer-radius-top-left, 0);border-bottom-left-radius:var(--drawer-radius-bottom-left, 0)}nv-drawer .backdrop .content.size-sm{width:clamp(var(--drawer-size-sm-min-width), var(--drawer-size-sm-width), var(--drawer-size-sm-max-width))}nv-drawer .backdrop .content.size-md{width:clamp(var(--drawer-size-md-min-width), var(--drawer-size-md-width), var(--drawer-size-md-max-width))}nv-drawer .backdrop .content.size-lg{width:clamp(var(--drawer-size-lg-min-width), var(--drawer-size-lg-width), var(--drawer-size-lg-max-width))}nv-drawer .backdrop .content.size-full{width:var(--drawer-size-full-width)}nv-drawer .backdrop .content nv-button.close-button{position:absolute;top:var(--drawer-dismissible-position-top, var(--dialog-dismissible-position-top));right:var(--drawer-dismissible-position-right, var(--dialog-dismissible-position-right));z-index:1;display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:var(--drawer-gap-y, 10px)}nv-drawer .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-drawer .backdrop .content .content-body{box-sizing:border-box;padding:var(--drawer-padding-y, var(--dialog-body-padding-y)) var(--drawer-padding-x, var(--dialog-body-padding-x));scrollbar-gutter:stable both-edges;flex:1;overflow-y:auto;width:100%;border-bottom:1px solid var(--color-content-low-border);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text)}nv-drawer .backdrop .content slot[name=footer]::slotted(*),nv-drawer .backdrop .content nv-drawerfooter{padding-top:var(--spacing-4)}`;
+
+const NvDrawer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged", 3);
+        this.eventsAttached = false;
+        this.swipeStartX = null;
+        this.swipeStartY = null;
+        this.swipeStartTime = null;
+        this.isSwiping = false;
+        this.SWIPE_THRESHOLD = 50; // Minimum distance for a swipe (px)
+        this.SWIPE_EDGE_ZONE = 20; // Edge detection zone (px)
+        this.SWIPE_VELOCITY_THRESHOLD = 0.3; // Minimum velocity (px/ms)
+        this.triggerClickEvents = [
+            ['click', this.show],
+            [
+                'keydown',
+                (e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                        e.preventDefault();
+                        this.show();
+                    }
+                },
+            ],
+        ];
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Use this prop to toggle the visibility of the drawer. Set to true to show
+         * the drawer and false to hide it.
+         */
+        this.open = false;
+        /**
+         * If true, the drawer cannot be closed by the user.
+         */
+        this.undismissable = false;
+        /**
+         * If true, the drawer will be closed when the backdrop is clicked.
+         */
+        this.clickOutside = false;
+        /**
+         * If true, the drawer visibility is managed manually through methods or the
+         * open prop.
+         */
+        this.controlled = false;
+        /**
+         * Side from which the drawer appears.
+         */
+        this.side = 'right';
+        /**
+         * Size of the drawer. Defaults to 'md'.
+         * - 'sm': Small drawer (~320px)
+         * - 'md': Medium drawer (~400px)
+         * - 'lg': Large drawer (~600px)
+         * - 'full': Full width drawer (100vw on mobile, ~800px on desktop)
+         */
+        this.size = 'md';
+        /**
+         * Controls whether the drawer should automatically focus the first focusable
+         * element when opened. When disabled, prevents unwanted tooltip triggers on
+         * drawer open.
+         */
+        this.autofocus = false;
+        /**
+         * Enables swipe gesture to open/close the drawer on touch devices.
+         * - Swipe from the edge (left for left drawer, right for right drawer) to open
+         * - Swipe towards the edge from inside the drawer to close
+         */
+        this.swipeToOpen = false;
+        /**
+         * Checks for and sets up form ID if a form is present
+         */
+        this.checkForForm = () => {
+            if (!this.form) {
+                const formElement = this.el.querySelector('form');
+                if (formElement) {
+                    this.form = this.ensureFormId(formElement);
+                }
+            }
+        };
+        /**
+         * Handles the native drawer close event.
+         */
+        this.handleDrawerClose = () => {
+            if (this.open) {
+                this.close();
+            }
+        };
+        /**
+         * Handles the click event to close the drawer when clickOutside is true.
+         * @param {MouseEvent} event - The click event.
+         */
+        this.handleDrawerClick = (event) => {
+            if (!this.clickOutside || this.undismissable)
+                return;
+            if (this.checkForOpenPopovers())
+                return;
+            if (event.target === this.backdropElement) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+        };
+        this.checkForOpenPopovers = () => {
+            let hasOpenPopover = false;
+            this.el.querySelectorAll('nv-popover').forEach(popover => {
+                if (popover.hasAttribute('open')) {
+                    hasOpenPopover = true;
+                }
+            });
+            return hasOpenPopover;
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Call this method to show the drawer, making it visible on the screen.
+     */
+    async show() {
+        this.open = true;
+        this.preventScroll();
+        /** It is recommended to use the .show() or .showModal() method to render
+         * drawers, rather than the open attribute. If a <dialog> is opened using
+         * the open attribute, it is non-modal. */
+        const { setFadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement);
+        setFadeOut();
+        this.dialogElement.showModal();
+        // Wait for dialog to be visible
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        // Set initial position off-screen and animate
+        const slideDirection = this.side === 'right' ? 100 : -100;
+        const { setSlideX, slideX } = slide_animationCmH5d1of.useSlide(this.contentElement, {
+            duration: 300,
+        });
+        const { fadeIn } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
+            duration: 300,
+        });
+        // Clear any previous transform first
+        if (this.contentElement) {
+            this.contentElement.style.transform = '';
+        }
+        // Set initial position off-screen
+        setSlideX(slideDirection);
+        // Wait another frame to ensure position is set
+        await new Promise(resolve => requestAnimationFrame(resolve));
+        // Animate both slide and fade in parallel
+        const slideIn = slideX({ from: slideDirection, to: 0 });
+        await timeline_animationCgHCo_Ho.parallel(fadeIn, slideIn).start();
+    }
+    /**
+     * Call this method to hide the drawer, making it disappear from view.
+     */
+    async close() {
+        this.open = false;
+        this.allowScroll();
+        const slideDirection = this.side === 'right' ? 100 : -100;
+        const { slideX } = slide_animationCmH5d1of.useSlide(this.contentElement, {
+            duration: 300,
+        });
+        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
+            duration: 300,
+        });
+        // Animate both slide and fade out in parallel
+        const slideOut = slideX({ from: 0, to: slideDirection });
+        await timeline_animationCgHCo_Ho.parallel(slideOut, fadeOut).start();
+        // Reset transform after animation completes
+        if (this.contentElement) {
+            this.contentElement.style.transform = '';
+        }
+        this.dialogElement.close();
+    }
+    /**
+     * Sets the autofocus on the first focusable element in the drawer.
+     */
+    setAutofocus() {
+        const focusableElements = index_esmD3eWMME9.tabbable(this.dialogElement, {
+            displayCheck: 'none',
+        });
+        if (focusableElements.length > 0) {
+            // Convert to array and find element with smallest top and left position
+            let topLeftElement = focusableElements[0];
+            let topLeftRect = topLeftElement.getBoundingClientRect();
+            focusableElements.forEach(element => {
+                const rect = element.getBoundingClientRect();
+                if (rect.top < topLeftRect.top || rect.left < topLeftRect.left) {
+                    topLeftElement = element;
+                    topLeftRect = rect;
+                }
+            });
+            // Set autofocus attribute on the found element
+            topLeftElement.setAttribute('autofocus', 'true');
+        }
+    }
+    /**
+     * Attaches event listeners to the drawer.
+     */
+    attachEventListeners() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            events_utilsB6GgGra_.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = true;
+        }
+    }
+    /**
+     * Prevents the body from scrolling when the drawer is open.
+     * Compensates for scrollbar width to prevent layout shift.
+     */
+    preventScroll() {
+        // Calculate scrollbar width
+        const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+        // Apply overflow hidden and padding compensation
+        document.documentElement.style.overflow = 'hidden';
+        document.documentElement.style.paddingRight = `${scrollBarWidth}px`;
+    }
+    /**
+     * Allows the body to scroll when the drawer is closed.
+     * Removes the applied overflow and padding styles.
+     */
+    allowScroll() {
+        // Remove the applied styles
+        document.documentElement.style.removeProperty('overflow');
+        document.documentElement.style.removeProperty('padding-right');
+    }
+    ensureFormId(formElement) {
+        if (!formElement.id) {
+            formElement.id = `drawer-form-${v4BdYh22OP.v4()}`;
+        }
+        return formElement.id;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    async handleDrawerOpenChange(isOpen) {
+        if (isOpen) {
+            this.show();
+            this.openChanged.emit(isOpen);
+        }
+        else {
+            this.close();
+            this.openChanged.emit(isOpen);
+        }
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
+    /**
+     * Handles the keydown event to optionally prevent the native drawer from closing when the escape key is pressed.
+     * @param {KeyboardEvent} event - The keydown event.
+     */
+    handleKeyDown(event) {
+        if (event.key !== 'Escape')
+            return;
+        if (!this.open)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        const hasOpenPopover = this.checkForOpenPopovers();
+        if (!this.undismissable && !hasOpenPopover) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.close();
+        }
+    }
+    /**
+     * Handles pointer down events for swipe detection.
+     * @param {PointerEvent} event - The pointer down event.
+     */
+    handlePointerDown(event) {
+        if (!this.swipeToOpen || this.controlled)
+            return;
+        const x = event.clientX;
+        const y = event.clientY;
+        const screenWidth = window.innerWidth;
+        // Check if swipe starts from edge (for opening drawer)
+        if (!this.open) {
+            const isLeftEdge = this.side === 'left' && x <= this.SWIPE_EDGE_ZONE;
+            const isRightEdge = this.side === 'right' && x >= screenWidth - this.SWIPE_EDGE_ZONE;
+            if (isLeftEdge || isRightEdge) {
+                this.swipeStartX = x;
+                this.swipeStartY = y;
+                this.swipeStartTime = Date.now();
+                this.isSwiping = true;
+                event.preventDefault();
+            }
+        }
+        else {
+            // Check if swipe starts from inside the drawer (for closing)
+            if (this.contentElement && this.dialogElement.hasAttribute('open')) {
+                const drawerRect = this.contentElement.getBoundingClientRect();
+                if (x >= drawerRect.left &&
+                    x <= drawerRect.right &&
+                    y >= drawerRect.top &&
+                    y <= drawerRect.bottom) {
+                    this.swipeStartX = x;
+                    this.swipeStartY = y;
+                    this.swipeStartTime = Date.now();
+                    this.isSwiping = true;
+                }
+            }
+        }
+    }
+    /**
+     * Handles pointer move events during swipe.
+     * @param {PointerEvent} event - The pointer move event.
+     */
+    handlePointerMove(event) {
+        if (!this.isSwiping || !this.swipeStartX || !this.swipeStartY)
+            return;
+        // Prevent scrolling during swipe
+        event.preventDefault();
+    }
+    /**
+     * Handles pointer up events to complete swipe gesture.
+     * @param {PointerEvent} event - The pointer up event.
+     */
+    handlePointerUp(event) {
+        if (!this.isSwiping ||
+            !this.swipeStartX ||
+            !this.swipeStartY ||
+            !this.swipeStartTime) {
+            this.resetSwipe();
+            return;
+        }
+        const x = event.clientX;
+        const y = event.clientY;
+        const deltaX = x - this.swipeStartX;
+        const deltaY = y - this.swipeStartY;
+        const deltaTime = Date.now() - this.swipeStartTime;
+        const distance = Math.abs(deltaX);
+        const velocity = distance / deltaTime;
+        // Only consider horizontal swipes (vertical movement should be less than horizontal)
+        if (Math.abs(deltaY) > Math.abs(deltaX)) {
+            this.resetSwipe();
+            return;
+        }
+        // Check if swipe meets threshold requirements
+        if (distance >= this.SWIPE_THRESHOLD ||
+            velocity >= this.SWIPE_VELOCITY_THRESHOLD) {
+            if (!this.open) {
+                // Opening swipe: from left edge going right, or from right edge going left
+                const isOpeningSwipe = (this.side === 'left' && deltaX > 0) ||
+                    (this.side === 'right' && deltaX < 0);
+                if (isOpeningSwipe && !this.undismissable) {
+                    this.show();
+                }
+            }
+            else {
+                // Closing swipe: towards the edge
+                const isClosingSwipe = (this.side === 'left' && deltaX < 0) ||
+                    (this.side === 'right' && deltaX > 0);
+                if (isClosingSwipe && !this.undismissable) {
+                    this.close();
+                }
+            }
+        }
+        this.resetSwipe();
+    }
+    /**
+     * Resets swipe tracking state.
+     */
+    resetSwipe() {
+        this.swipeStartX = null;
+        this.swipeStartY = null;
+        this.swipeStartTime = null;
+        this.isSwiping = false;
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    /**
+     * Lifecycle method that runs before the component loads.
+     * Looks for passed header, and footer elements, either by their slot
+     * attribute or by their tag name (for dialog header/footer)
+     */
+    componentWillLoad() {
+        if (!this.headerElement)
+            this.headerElement =
+                this.el.querySelector('[slot="header"]') ??
+                    this.el.querySelector('nv-drawerheader');
+        if (!this.footerElement)
+            this.footerElement =
+                this.el.querySelector('[slot="footer"]') ??
+                    this.el.querySelector('nv-drawerfooter');
+        // Initial form check
+        this.checkForForm();
+    }
+    componentDidRender() {
+        this.triggerElement = this.el.querySelector('[slot="trigger"]');
+        this.attachEventListeners();
+    }
+    componentDidLoad() {
+        if (this.open) {
+            this.show();
+        }
+        // Only set autofocus if the prop is true and no element already has autofocus
+        if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {
+            this.setAutofocus();
+        }
+        this.attachEventListeners();
+        // Additional form check in case form was added after initial load
+        this.checkForForm();
+        // this.setupContentBodyListeners();
+    }
+    disconnectedCallback() {
+        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
+            events_utilsB6GgGra_.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            this.eventsAttached = false;
+        }
+        this.allowScroll();
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const hasForm = this.form || this.el.querySelector('form');
+        const state = this.open ? 'open' : 'closed';
+        return (index.h(index.Host, { key: '24fef2e07989d6b9648d8c4c7374680650ac09e8' }, index.h("slot", { key: 'c8d25517097b715cf42ad3a60ea84c7efb052c6c', name: "trigger" }), index.h("dialog", { key: 'b9b94f73fa04bb421b70a1af4c3c40171af94008', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsxChV9xqsO.clsx({ [`side-${this.side}`]: true }), "data-state": state }, index.h("div", { key: '4867741abdaa5608992dd812311a43ce3af0c94e', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '476ac6bb40bb342ffb305faca2e67a8bef43f14e', class: clsxChV9xqsO.clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (index.h("nv-button", { key: '90d1a2c776d486ee98d4b847ee1d43616c15d86c', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, index.h("nv-icon", { key: '5c54095bae68cc0780a95fd541a8e607f430ebb9', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-drawerheader", { id: "drawer-header" })), index.h("div", { key: 'fcf2ccf83679fa5a702ce02206144a3a11ab53bf', class: "content-body", id: "drawer-content" }, index.h("slot", { key: 'b70b2edfb51da8a16f996c90d04391657718a12a' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? constantsBReL3Lsa.ButtonType.Submit : constantsBReL3Lsa.ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "open": [{
+                "handleDrawerOpenChange": 0
+            }]
+    }; }
+};
+NvDrawer.style = nvDrawerCss();
+
+exports.nv_drawer = NvDrawer;

package/dist/cjs/nv-drawerfooter_2.entry-DpWSsq6d.js

@@ -0,0 +1,128 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvDrawerfooterCss = () => `nv-drawerfooter{display:flex;padding:var(--drawer-padding-y, var(--dialog-footer-padding-top)) var(--drawer-padding-x, var(--dialog-footer-padding-x)) var(--drawer-padding-y, var(--dialog-footer-padding-bottom)) var(--drawer-padding-x, var(--dialog-footer-padding-x));justify-content:flex-end;align-items:flex-end;gap:var(--drawer-gap-y, var(--dialog-footer-gap-y));align-self:stretch}`;
+
+const NvDrawerfooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.drawerCanceled = index.createEvent(this, "drawerCanceled", 3);
+        this.drawerPrimaryClicked = index.createEvent(this, "drawerPrimaryClicked", 3);
+        if (hostRef.$hostElement$["s-ei"]) {
+            this.internals = hostRef.$hostElement$["s-ei"];
+        }
+        else {
+            this.internals = hostRef.$hostElement$.attachInternals();
+            hostRef.$hostElement$["s-ei"] = this.internals;
+        }
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Disables the primary button, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Controls the visibility of the cancel button. When true, the cancel button is
+         * hidden.
+         */
+        this.undismissable = false;
+        /**
+         * Sets the leading icon for the primary button.
+         */
+        this.leadingIcon = null;
+        /**
+         * Sets the trailing icon for the primary button.
+         */
+        this.trailingIcon = null;
+        /**
+         * Sets the danger state for the primary button.
+         */
+        this.danger = false;
+        /**
+         * Sets the label for the cancel button.
+         */
+        this.cancelLabel = 'Cancel';
+        /**
+         * Sets the label for the primary button.
+         */
+        this.primaryLabel = 'Primary';
+        /**
+         * A form inside the drawer can be submitted through the drawer footer by
+         * giving the form an id and passing that id to the form attribute.
+         */
+        this.form = null;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the primary action when the primary button is clicked.
+         * @param {Event} event - The click event.
+         */
+        this.handlePrimary = (event) => {
+            event.stopPropagation();
+            this.drawerPrimaryClicked.emit();
+        };
+        /**
+         * Handles the cancel action when the cancel button is clicked. This will close the drawer.
+         * @param {Event} event - The click event.
+         */
+        this.handleCancel = (event) => {
+            event.stopPropagation();
+            this.drawerCanceled.emit();
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentDidRender() {
+        // Set the default button type based on the form property
+        if (!this.primaryButtonType) {
+            this.primaryButtonRef.type = this.form
+                ? constantsBReL3Lsa.ButtonType.Submit
+                : constantsBReL3Lsa.ButtonType.Button;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '1a15bd9a6bac74ceb64d57ef7830e4ff8d081770' }, index.h("slot", { key: '72f762cc6d64cc286252da929111b0e86013194f' }, index.h(index.Fragment, { key: '21d8100769c0f84dd5fee916bad8021190f08703' }, !this.undismissable && (index.h("nv-button", { key: '3c5e445643fa1b01fef28fc53f60ffb0d2f6f94c', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { key: 'd93583226649f6ac4928c9359d5f0654e0bb6714', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { key: '4d292e8a54df0b1dbdac0ace38dac7f24224ebe2', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { key: '412d46f4ef9ef573234b70a1456a91dda1569936', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+NvDrawerfooter.style = nvDrawerfooterCss();
+
+const nvDrawerheaderCss = () => `nv-drawerheader{padding:var(--drawer-padding-y, var(--dialog-header-padding-top)) var(--drawer-padding-x, var(--dialog-header-padding-x)) var(--drawer-padding-y, var(--dialog-header-padding-bottom)) var(--drawer-padding-x, var(--dialog-header-padding-x));justify-content:space-between;align-items:flex-start;align-self:stretch}nv-drawerheader:has(>div:not(.heading):not(.subheading)){padding:0}nv-drawerheader>div[style*=gradient]{background-attachment:local}nv-drawerheader .heading{color:var(--color-content-high-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);padding-right:var(--drawer-header-padding-right, var(--spacing-7));line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-drawerheader .subheading{color:var(--color-content-low-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm);}`;
+
+const NvDrawerheader = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the heading text for the drawer.
+         */
+        this.heading = 'Drawer Title';
+        /**
+         * Sets the subheading text for the drawer.
+         */
+        this.subheading = null;
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '1c9cd7b1157e63563f07b5b4b58a694b3ee4094d' }, index.h("slot", { key: '97c4b5cd72c240ff25d7f8aa7801a1d68c5ea073' }, index.h(index.Fragment, { key: '75896e1efe1ebe98c3275214d6aaea253afefce0' }, index.h("div", { key: '5bf874923f7cdff2cadcb8d9a352812ee532132d', class: "heading" }, this.heading), index.h("div", { key: '7ca0080c00eaa1bc68df9efe7aeb6ff57da13730', class: "subheading" }, this.subheading)))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvDrawerheader.style = nvDrawerheaderCss();
+
+exports.nv_drawerfooter = NvDrawerfooter;
+exports.nv_drawerheader = NvDrawerheader;