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

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

@@ -0,0 +1,445 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.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.
+     * Initializes the trigger, header, and footer elements by finding them in the component's children.
+     * Elements are found either by their slot attribute or by their tag name (for drawer header/footer)
+     */
+    componentWillLoad() {
+        this.triggerElement = Array.from(this.el.children).find(child => {
+            return child.getAttribute('slot') === 'trigger';
+        });
+        this.headerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'header' ||
+                child.tagName.toLowerCase() === 'nv-drawerheader');
+        });
+        this.footerElement = Array.from(this.el.children).find(child => {
+            return (child.getAttribute('slot') === 'footer' ||
+                child.tagName.toLowerCase() === 'nv-drawerfooter');
+        });
+        // Initial form check
+        this.checkForForm();
+    }
+    componentWillUpdate() {
+        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: 'de12ca46afd89b287fc3f2b28e3f6ca79d328338' }, index.h("slot", { key: 'e7568c48a2a676d0f063831c769c1b4dfaee0925', name: "trigger" }), index.h("dialog", { key: '513b404bba6aa0b1d3831d17ef58e1c63fb6f757', 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: '0b9c6fec78844a1e64b33a7bbab62ee44ac0d7bd', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: 'c74cb4b717f232b4622bd9391027c7b048e786e9', 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: 'f9c03557a3ef3bb1d34e2b764d70a57cfd52dea3', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, index.h("nv-icon", { key: '5c0ea22963bad0bb84eb58e9ad26ebfca6b11b94', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-drawerheader", { id: "drawer-header" })), index.h("div", { key: '813c7b985c6f75faa1fffc56e198957194bda87e', class: "content-body", id: "drawer-content" }, index.h("slot", { key: 'e70eefb8a94ae5e7eff32d5eb0446fba5c56065a' })), 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"]
+    }; }
+};
+NvDrawer.style = nvDrawerCss;
+
+exports.nv_drawer = NvDrawer;

package/dist/cjs/nv-drawerfooter_2.entry-C-reYJXG.js

@@ -0,0 +1,146 @@
+'use strict';
+
+var index = require('./index-kU2nW5aN.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;
+        }
+        this.hasSlot = false;
+        /****************************************************************************/
+        //#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
+    componentWillLoad() {
+        // Check if there are any child elements that don't have a slot attribute
+        this.hasSlot = Array.from(this.el.childNodes).some(node => {
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                !node.hasAttribute('slot'));
+        });
+    }
+    componentDidLoad() {
+        // Set the default button type based on the form property
+        this.primaryButtonType =
+            this.primaryButtonType || this.form
+                ? constantsBReL3Lsa.ButtonType.Submit
+                : constantsBReL3Lsa.ButtonType.Button;
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '75b11ed4b84aa602f76895c473595423d38cc21d' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { 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", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
+    }
+    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);
+        this.hasSlot = false;
+        /****************************************************************************/
+        //#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 LIFECYCLE
+    componentWillLoad() {
+        // Check if there are any child elements that don't have a slot attribute
+        this.hasSlot = Array.from(this.el.childNodes).some(node => {
+            return (node.nodeType === Node.ELEMENT_NODE &&
+                !node.hasAttribute('slot'));
+        });
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'c61401c90c57982a645f703ae1e0bab4e7fcd3ff' }, !this.hasSlot ? (index.h(index.Fragment, null, index.h("div", { class: "heading" }, this.heading), index.h("div", { class: "subheading" }, this.subheading))) : (index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
+};
+NvDrawerheader.style = nvDrawerheaderCss;
+
+exports.nv_drawerfooter = NvDrawerfooter;
+exports.nv_drawerheader = NvDrawerheader;

package/dist/cjs/{nv-fieldcheckbox.entry-Bx6ArV_b.js → nv-fieldcheckbox.entry-bk7UNQny.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-kU2nW5aN.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
@@ -156,15 +156,15 @@ const NvFieldcheckbox = class {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (index.h(index.Host, { key: 'f3048e237f3e1b4007ed4b3a885aa3743d97f944', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '294e57442ee4d4529ecd68e515f508c753b2710f', class: "input-container" }, index.h("input", Object.assign({ key: '9c0f7ded57a973da45f12768e5a6e0dcb62ce259', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !useNativeRequired, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { indeterminate: this.indeterminate, ref: el => {
+        return (index.h(index.Host, { key: 'a652f9f7dcf00323548c79c9ca1f5fe1ef403279', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '84057811ecdd93b46e4f33868e8c8cc0ea340125', class: "input-container" }, index.h("input", { key: 'da53b190076395852c2f08be8da16c3a9c53fbaa', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !useNativeRequired, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), indeterminate: this.indeterminate, ref: el => {
                 if (el) {
                     el.indeterminate = this.indeterminate;
                 }
-            } })), index.h("span", { key: '223c55fdf2a6f903983cc3d3864e1e39d4e7ec04', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '336e037d31cb2b52745977a54ca997af5e45304b', name: "checked-icon" }, index.h("svg", { key: '08e6e90c23787f057c3bf0aa6cfbc9a45b5122b9', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'b14e12fec6247aa3aa8da36bcaa0dab6edabaa96', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'b5c30541e74b920ec41a1fe5c35805cea134d336', name: "indeterminate-icon" }, index.h("svg", { key: '54bcb60835d919f4a7b4897fc567c9adab4e05c1', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '62ade78b9f33727aba129e6e4d5c219d4bbd03f1', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: 'cb6cc3dbcf226dcf5ddb1fa871d43ca19726a3a8' }), index.h("div", { key: '44634c846b5d09d71b6c27a8c9934acf12261105', class: "text-container" }, index.h("slot", { key: '2aa6f2e956088f5856f56888def6f728c815293c', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e417e4cb783a1076b35f5566f2f25ab06063d8d5', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '61eaf3fd5ca61d0cba524786c288d6b3836bb947', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '43fdb9fb7a6af7c1d2bac659c3195e1b1988d083', class: "description" }, index.h("slot", { key: '7e332245bbefe3686fc71560010ab237217bb8f8', name: "description" }, this.description)))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'a2dc29465f01262b147345fa8897dbcca7b77458', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e696d1fe9d833fec7b779bf0b5191dd0eab2908e', name: "error-description" }, this.errorDescription))))));
+            } }), index.h("span", { key: 'c1263f5094377623504381d52b78769033d13a63', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '49f9639d08ade9a197e283d3677d294ae01369e9', name: "checked-icon" }, index.h("svg", { key: '9ad3cefe29f5e12d26912679d290441e6f9765d0', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'b3cf7a393ee5b797310ad338afb5abd3bfd9cfaa', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'e4a615810324cdc3a14d11dcdaf2e06c9ea8538e', name: "indeterminate-icon" }, index.h("svg", { key: '50230f9244694641bbb38411a886e563dc5952f5', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '8cfb893ef82d5d91c270bc5c029d320a8ca7f276', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: '328cef43f740ad18f2666805ba9e755687aa987c' }), index.h("div", { key: 'b380cefbf5c97d62d77b9940ef2e241c22764302', class: "text-container" }, index.h("slot", { key: 'd3f7fb813ada2cfef74e6068eb5a1304bc28396a', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'cf7d3f46915b2d149c6dc4c7cce3b3741c3e952f', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '9c57662513ef680545bcdf8d93c7e92ce4259054', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '352e1a7f2a09867e36d91f16102ea8be158d0ad7', class: "description" }, index.h("slot", { key: '79e8d147440e4563ca8e966b4f553307c7b5ec1a', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'a8cb608dd9f36efedbfb6f82042c61a487ad227f', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '3720f914db04c45cb2e5323a129dd05c9ce3fdfb', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }