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

package/dist/cjs/{nv-dialog.entry-O47Eol_7.js → index.esm-D3eWMME9-CG1TVKfu.js}

@@ -1,17 +1,5 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
-var grow_animationCvHGHBL4 = require('./grow.animation-CvHGHBL4-DDIEYBK-.js');
-var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
-require('./style-value-types.es-xlgmw4x8-B1vLqX9m.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');
-
 /*!
 * tabbable 6.2.0
 * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
@@ -546,287 +534,4 @@ var tabbable = function tabbable(container, options) {
   return sortByOrder(candidates);
 };
 
-const nvDialogCss = "nv-dialog 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)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;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);width:100%}";
-
-const NvDialog = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged", 3);
-        this.eventsAttached = false;
-        this.triggerClickEvents = [
-            ['click', this.show],
-            [
-                'keydown',
-                (e) => {
-                    if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        this.show();
-                    }
-                },
-            ],
-        ];
-        /**
-         * Use this prop to toggle the visibility of the dialog. Set to true to show
-         * the dialog and false to hide it.
-         */
-        this.open = false;
-        /**
-         * If true, the dialog cannot be closed by the user.
-         */
-        this.undismissable = false;
-        /**
-         * If true, the dialog will be closed when the backdrop is clicked.
-         */
-        this.clickOutside = false;
-        /**
-         * If true, the dialog visibility is managed manually through methods or the
-         * open prop.
-         */
-        this.controlled = false;
-        /**
-         * If true, the dialog takes full width styling.
-         */
-        this.full = false;
-        /**
-         * Controls whether the dialog should automatically focus the first focusable
-         * element when opened. When disabled, prevents unwanted tooltip triggers on
-         * dialog open.
-         */
-        this.autofocus = 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 dialog close event.
-         */
-        this.handleDialogClose = () => {
-            if (this.open) {
-                this.close();
-            }
-        };
-        /**
-         * Handles the click event to close the dialog when clickOutside is true.
-         * @param {MouseEvent} event - The click event.
-         */
-        this.handleDialogClick = (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 dialog, 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
-         * dialogs, 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();
-        const { setGrowIn, growIn } = grow_animationCvHGHBL4.useGrow(this.contentElement, {
-            duration: 100,
-            amount: 0.9,
-        });
-        const { fadeIn } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
-            duration: 100,
-        });
-        setGrowIn();
-        await timeline_animationCgHCo_Ho.parallel(fadeIn, growIn).start();
-    }
-    /**
-     * Call this method to hide the dialog, making it disappear from view.
-     */
-    async close() {
-        this.open = false;
-        this.allowScroll();
-        const { growOut } = grow_animationCvHGHBL4.useGrow(this.contentElement, {
-            duration: 150,
-            amount: 0.85,
-        });
-        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
-            duration: 150,
-        });
-        await timeline_animationCgHCo_Ho.parallel(growOut, fadeOut).start();
-        this.dialogElement.close();
-    }
-    /**
-     * Sets the autofocus on the first focusable element in the dialog.
-     */
-    setAutofocus() {
-        const focusableElements = 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 dialog.
-     */
-    attachEventListeners() {
-        if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            grow_animationCvHGHBL4.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
-            this.eventsAttached = true;
-        }
-    }
-    /**
-     * Prevents the body from scrolling when the dialog 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 dialog 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 = `dialog-form-${v4BdYh22OP.v4()}`;
-        }
-        return formElement.id;
-    }
-    //#endregion EVENTS
-    /****************************************************************************/
-    //#region WATCHERS
-    async handleDialogOpenChange(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 dialog 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();
-        }
-    }
-    //#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 dialog 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-dialogheader');
-        });
-        this.footerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'footer' ||
-                child.tagName.toLowerCase() === 'nv-dialogfooter');
-        });
-        // 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) {
-            grow_animationCvHGHBL4.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
-            this.eventsAttached = false;
-        }
-        this.allowScroll();
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
-    //#region RENDER
-    render() {
-        const hasForm = this.form || this.el.querySelector('form');
-        return (index.h(index.Host, { key: 'e1837ebe65fcf0e56880438b59a5e8c4b5873926' }, index.h("slot", { key: '543e69780f3dad15a91b4bcb1f4199153bbce1b3', name: "trigger" }), index.h("dialog", { key: 'ef1600f73c8d25744b3b69356e1c4a98e605be1e', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsxChV9xqsO.clsx({ full: this.full }) }, index.h("div", { key: '894e91291a5ee2a1c26a658e1ca7aaf237d71069', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '78700c26d1ec553d67a8e62f3f3628fab8deb49a', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: 'd042c828bc6886091128425ea3e5c73035a0cea1', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '035273dd23255883a7a5feb354d230242683e00e', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: 'd86417aae675f8611312495d31ca8d0b58c2caaf', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'cb48b94b846097d04ffd98c6689cd4116e8cd9f9' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constantsBReL3Lsa.ButtonType.Submit : constantsBReL3Lsa.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
-    }
-    get el() { return index.getElement(this); }
-    static get watchers() { return {
-        "open": ["handleDialogOpenChange"]
-    }; }
-};
-NvDialog.style = nvDialogCss;
-
-exports.nv_dialog = NvDialog;
+exports.tabbable = tabbable;

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -71,6 +71,9 @@ exports.NvDatatable = index.NvDatatable;
 exports.NvDialog = index.NvDialog;
 exports.NvDialogfooter = index.NvDialogfooter;
 exports.NvDialogheader = index.NvDialogheader;
+exports.NvDrawer = index.NvDrawer;
+exports.NvDrawerfooter = index.NvDrawerfooter;
+exports.NvDrawerheader = index.NvDrawerheader;
 exports.NvFieldcheckbox = index.NvFieldcheckbox;
 exports.NvFielddate = index.NvFielddate;
 exports.NvFielddaterange = index.NvFielddaterange;
@@ -94,6 +97,7 @@ exports.NvMenuitem = index.NvMenuitem;
 exports.NvNotification = index.NvNotification;
 exports.NvNotificationBullet = index.NvNotificationBullet;
 exports.NvNotificationcontainer = index.NvNotificationcontainer;
+exports.NvPaginationtable = index.NvPaginationtable;
 exports.NvPopover = index.NvPopover;
 exports.NvRow = index.NvRow;
 exports.NvSidebar = index.NvSidebar;

package/dist/cjs/{nv-accordion-item.entry-B_l0-ux0.js → nv-accordion-item.entry-CqnjIt4R.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
 require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child .nv-accordion-item__content{border-radius:0 0 calc(var(--radius-rounded-lg) - var(--spacing-px)) calc(var(--radius-rounded-lg) - var(--spacing-px))}";
+const nvAccordionItemCss = () => `nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child .nv-accordion-item__content{border-radius:0 0 calc(var(--radius-rounded-lg) - var(--spacing-px)) calc(var(--radius-rounded-lg) - var(--spacing-px))}`;
 
 const NvAccordionItem = class {
     constructor(hostRef) {
@@ -26,7 +26,6 @@ const NvAccordionItem = class {
          * Parent expansion mode (accordion or multi)
          */
         this.mode = 'accordion';
-        /* eslint-enable nova/event-bubbling */
         //#endregion EVENTS
         /****************************************************************************/
         //#region STATE
@@ -197,18 +196,20 @@ const NvAccordionItem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2e0becd0e89aabb8e0b652a48102a64c1eb97203', class: {
+        return (index.h(index.Host, { key: '0105972617975546456bc611209e7aa3e233833e', class: {
                 'nv-accordion-item': true,
                 'is-open': this.currentOpenState,
                 'is-disabled': this.disabled,
                 'is-animating': this.isAnimating,
-            }, role: "listitem", "aria-expanded": this.currentOpenState ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'f267eed06e3bc21f50f435cd7cd17b2fe35e17ac', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, index.h("slot", { key: '9abeaede22eaad412e4a127f6fc301547a9ace8d', name: "header" }, index.h("div", { key: '3ab6c2c3869293545663260b2516dec66d90cf7b', class: "nv-accordion-item__header-content" }, this.itemTitle && (index.h("span", { key: '298cc19aa800d5a1d787571c8195a038df767dd8', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (index.h("span", { key: 'f3428043b7020d065a4e4845eea84ab7b24810eb', class: "nv-accordion-item__subtitle" }, this.subtitle)))), index.h("nv-iconbutton", { key: '17956b3a0530a5d32086fb0ff08d41b6c82c53e0', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-controls": "content", "aria-label": this.currentOpenState ? 'Close the section' : 'Open the section' })), index.h("div", { key: '9a417daa4d79b380c949737732ce7a8ecb84e2fc', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, index.h("div", { key: '6dcdfcc391faa485b38f23cc2146af950fc6e367', class: "nv-accordion-item__content-inner" }, index.h("slot", { key: '2440c14ca77420204c556e7cfb3094205d192bb7', name: "content" })))));
+            }, role: "listitem", "aria-expanded": this.currentOpenState ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: 'c7475f319d5bf737fc0db2c3a127db409614440f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, index.h("slot", { key: '3bc7770b94ae5ac43bbe60bf95f54048e1b4627a', name: "header" }, index.h("div", { key: '4258d3bfba027886cc827e399c51776197312063', class: "nv-accordion-item__header-content" }, this.itemTitle && (index.h("span", { key: 'a14d303daef12c4db52c0944eba36f9aa6aeca37', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (index.h("span", { key: '814dc4ae5baa839b010dcd1e229d66e2a5f7af23', class: "nv-accordion-item__subtitle" }, this.subtitle)))), index.h("nv-iconbutton", { key: 'aeec0b17000461b24ed02cfc88f220a21dde38b5', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-controls": "content", "aria-label": this.currentOpenState ? 'Close the section' : 'Open the section' })), index.h("div", { key: 'fcc3b286b3a49a294f50a12516ffe345c666c1ac', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, index.h("div", { key: 'd31933c4e3111025fcfce99f5c57e7c6d0d15fd8', class: "nv-accordion-item__content-inner" }, index.h("slot", { key: '34252e6dded7011301840d3b1b7b9af0166c9f5c', name: "content" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["onOpenChanged"]
+        "open": [{
+                "onOpenChanged": 0
+            }]
     }; }
 };
-NvAccordionItem.style = nvAccordionItemCss;
+NvAccordionItem.style = nvAccordionItemCss();
 
 exports.nv_accordion_item = NvAccordionItem;

package/dist/cjs/{nv-accordion.entry-BX8_YuZF.js → nv-accordion.entry-Dx7FmGg_.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvAccordionCss = "nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}";
+const nvAccordionCss = () => `nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}`;
 
 const NvAccordion = class {
     constructor(hostRef) {
@@ -100,7 +100,6 @@ const NvAccordion = class {
             index.forceUpdate(item);
         });
     }
-    /* eslint-disable nova/native-event-listener */
     /**
      * Listens to itemToggle events from nv-accordion-item elements
      * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
@@ -120,7 +119,6 @@ const NvAccordion = class {
             console.warn('[onItemToggle] Target item not found in items list');
         }
     }
-    /* eslint-enable nova/native-event-listener */
     //#endregion METHODS
     /****************************************************************************/
     //#region WATCHERS
@@ -143,10 +141,9 @@ const NvAccordion = class {
         }
     }
     async componentDidLoad() {
-        var _a;
         const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
         // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set
-        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) &&
+        if (!this.data?.length &&
             (!this.openIndexes || this.openIndexes.length === 0)) {
             const childOpenIndexes = items
                 .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))
@@ -165,18 +162,18 @@ const NvAccordion = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a;
-        return (index.h(index.Host, { key: 'b498df032480f7b961883ad963ea1c7729e964cb', role: "list", class: "nv-accordion" }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) ? (this.data.map((item, i) => {
-            var _a;
-            return (index.h("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (index.h("div", { slot: "header" }, index.h("div", { class: "nv-accordion-item__header-content" }, index.h("span", { class: "nv-accordion-item__title" }, item.title), index.h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, index.h("div", { slot: "content" }, item.content), item.footer && index.h("div", { slot: "footer" }, item.footer)));
-        })) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: '20a8663e2ff17d685423567ee2ff29b96d4ddef2', role: "list", class: "nv-accordion" }, this.data?.length ? (this.data.map((item, i) => (index.h("nv-accordion-item", { key: item.id ?? i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (index.h("div", { slot: "header" }, index.h("div", { class: "nv-accordion-item__header-content" }, index.h("span", { class: "nv-accordion-item__title" }, item.title), index.h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, index.h("div", { slot: "content" }, item.content), item.footer && index.h("div", { slot: "footer" }, item.footer))))) : (index.h("slot", null))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "openIndexes": ["onOpenIndexesChange"],
-        "mode": ["onModeChange"]
+        "openIndexes": [{
+                "onOpenIndexesChange": 0
+            }],
+        "mode": [{
+                "onModeChange": 0
+            }]
     }; }
 };
-NvAccordion.style = nvAccordionCss;
+NvAccordion.style = nvAccordionCss();
 
 exports.nv_accordion = NvAccordion;

package/dist/cjs/{nv-alert.entry-DCWYR0OK.js → nv-alert.entry-BL3Pdcxd.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
@@ -11,7 +11,7 @@ require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const nvAlertCss = () => `nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}`;
 
 const NvAlert = class {
     constructor(hostRef) {
@@ -163,14 +163,15 @@ const NvAlert = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        var _a;
-        return (index.h(index.Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsxChV9xqsO.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && index.h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && index.h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), index.h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (index.h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
+        return (index.h(index.Host, { key: '2c89126ecbdca5e8df9c0541a4e312d2dc8a9fb3', role: "alert", class: clsxChV9xqsO.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '3aa514682ac670d81c7c88fa8b9b6f02e2761c45', name: this.icon ?? this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '5049bdb9d17b9ef07e15554631cc8fbd557e4b22', class: "content" }, this.heading && index.h("p", { key: '3faaa7e738f484f2f7dc543866eadaa861c0709b', class: "heading" }, this.heading), this.message && index.h("p", { key: 'abd16d9cb5bc2f28e63c534e8f9f2169e511df2f', class: "message" }, this.message), index.h("slot", { key: '0b14b616a7e6665f903f0aa6c32f706b0aa8bd27' })), this.dismissible && (index.h("button", { key: '5d35998aac73ea82ef06e1d083597a7677c0cd70', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: '3088178c1152525a400d116ac07ce372dadd420b', name: "x", size: "sm" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "hidden": ["handleHiddenChange"]
+        "hidden": [{
+                "handleHiddenChange": 0
+            }]
     }; }
 };
-NvAlert.style = nvAlertCss;
+NvAlert.style = nvAlertCss();
 
 exports.nv_alert = NvAlert;

package/dist/cjs/nv-avatar.entry-2dFR4I9_.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvAvatarCss = () => `nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}`;
+
+const NvAvatar = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Define the size of the avatar. You can use t-shirt sizes.
+         */
+        this.size = 'md';
+        /**
+         * You can apply different colors on the Avatar.
+         * Use a string number between 1 and 10.
+         */
+        this.color = '1';
+    }
+    componentWillRender() {
+        if (this.xsmall) {
+            this.size = constantsBReL3Lsa.SemanticSizes.ExtraSmall;
+        }
+        if (this.small) {
+            this.size = constantsBReL3Lsa.SemanticSizes.Small;
+        }
+        if (this.medium) {
+            this.size = constantsBReL3Lsa.SemanticSizes.Medium;
+        }
+        if (this.large) {
+            this.size = constantsBReL3Lsa.SemanticSizes.Large;
+        }
+        if (this.xlarge) {
+            this.size = constantsBReL3Lsa.SemanticSizes.ExtraLarge;
+        }
+        if (this.text) {
+            this.initials = this.text;
+        }
+        if (this.url) {
+            this.src = this.url;
+        }
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Makes sure the initials are trimmed to 2 letters.
+     * @param {string} initials - The initials to be trimmed.
+     * @returns {string} The trimmed initials.
+     */
+    trimInitials(initials) {
+        return initials.trim().substring(0, 2);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: '127d470eb9121f611f9e18f029ab9ef15a4a49df', class: clsxChV9xqsO.clsx(`avatar-${this.size}`, `avatar-color-${this.color}`), "aria-label": this.alt }, this.src ? (index.h("img", { src: this.src, alt: this.alt })) : this.initials ? (this.trimInitials(this.initials)) : (index.h("slot", { name: "icon" }, index.h("nv-icon", { name: "user" })))));
+    }
+};
+NvAvatar.style = nvAvatarCss();
+
+exports.nv_avatar = NvAvatar;