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

package/dist/cjs/nv-paginationtable.entry-BzEqQOBa.js

@@ -0,0 +1,231 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+/**
+ * Pagination table utility functions for nv-paginationtable component
+ *
+ * This module contains pure utility functions for label interpolation
+ * and pagination calculations.
+ */
+/**
+ * Interpolates a template string by replacing placeholders with values.
+ * Placeholders are defined using curly braces: {key}
+ *
+ * @param {string} template - The template string with placeholders
+ * @param {InterpolationValues} values - Object containing key-value pairs for replacement
+ * @param {string} [fallback] - Optional fallback template if template is undefined/null
+ * @returns {string} The interpolated string, or empty string if no template and no fallback
+ *
+ * @example
+ * interpolate('Page {pageIndex} of {pageCount}', { pageIndex: 1, pageCount: 14 })
+ * // Returns: 'Page 1 of 14'
+ */
+function interpolate(template, values, fallback) {
+    const effectiveTemplate = template ?? fallback ?? '';
+    if (!effectiveTemplate)
+        return '';
+    return effectiveTemplate.replace(/\{(\w+)\}/g, (match, key) => {
+        return key in values ? String(values[key]) : match;
+    });
+}
+/**
+ * Checks if navigation to the first/previous page is possible
+ * @param {number} pageIndex - Current page index (zero-based)
+ * @returns {boolean} True if at the first page
+ */
+function isFirstPage(pageIndex) {
+    return pageIndex === 0;
+}
+/**
+ * Checks if navigation to the last/next page is possible
+ * @param {number} pageIndex - Current page index (zero-based)
+ * @param {number} pageCount - Total number of pages
+ * @returns {boolean} True if at the last page
+ */
+function isLastPage(pageIndex, pageCount) {
+    return pageIndex >= pageCount - 1;
+}
+/**
+ * Default page size values
+ */
+const DEFAULT_PAGE_SIZES = [10, 25, 50, 100];
+/**
+ * Generates page size options with translated labels.
+ * @param {string} labelTemplate - Template string for the label (e.g., '{pageSize} per page')
+ * @param {number[]} sizes - Array of page size values
+ * @returns {PageSizeOption[]} Array of page size options with interpolated labels
+ *
+ * @example
+ * generatePageSizeOptions('{pageSize} per page', [10, 25, 50])
+ * // Returns: [{ label: '10 per page', value: '10' }, { label: '25 per page', value: '25' }, ...]
+ */
+function generatePageSizeOptions(labelTemplate, sizes = DEFAULT_PAGE_SIZES) {
+    return sizes.map(size => ({
+        label: interpolate(labelTemplate, { pageSize: size }),
+        value: String(size),
+    }));
+}
+
+const nvPaginationtableCss = () => `nv-paginationtable{display:flex;align-items:center;color:var(--color-content-medium-text);gap:var(--pagination-table-gap-x);user-select:none;font-size:var(--pagination-table-font-size);font-weight:400}nv-paginationtable nv-fieldselect .select-wrapper .select-container{border-color:transparent}nv-paginationtable nv-fieldselect .select-wrapper .select-container select{font-size:var(--pagination-table-font-size);font-weight:400;color:var(--color-content-medium-text)}`;
+
+const NvPaginationtable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.pageIndexChanged = index.createEvent(this, "pageIndexChanged", 3);
+        this.pageSizeChanged = index.createEvent(this, "pageSizeChanged", 3);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Indicates which page of table results is currently being shown, using a
+         * zero-based index.
+         */
+        this.pageIndex = 0;
+        /**
+         * Sets how many results appear at once before moving to the next page.
+         */
+        this.pageSize = 10;
+        /**
+         * Total number of pages available.
+         */
+        this.pageCount = 0;
+        /**
+         * Total number of rows in the dataset.
+         */
+        this.rowCount = 0;
+        /**
+         * Hides all arrow navigation controls when set to true.
+         * By default, all controls are visible.
+         */
+        this.hideControls = false;
+        /**
+         * Hides the previous/next arrow controls when set to true.
+         */
+        this.hidePrevNext = false;
+        /**
+         * Hides the first/last arrow controls when set to true.
+         */
+        this.hideFirstLast = false;
+        /**
+         * Label template for the page indicator.
+         * Supports placeholders: {pageIndex}, {pageCount}.
+         * Note: {pageIndex} is displayed as 1-based to users (internally 0-based).
+         * @example 'Page {pageIndex} of {pageCount}' → 'Page 1 of 14'
+         */
+        this.labelPage = 'Page {pageIndex} of {pageCount}';
+        /**
+         * Label template for the total row count display.
+         * Supports placeholder: {rowCount}.
+         * @example 'Total: {rowCount} rows' → 'Total: 254 rows'
+         */
+        this.labelTotal = 'Total: {rowCount} rows';
+        /**
+         * Label template for the page size dropdown options.
+         * Supports placeholder: {pageSize}.
+         * @example '{pageSize} per page' → '10 per page'
+         */
+        this.labelPageSizeOption = '{pageSize} per page';
+        /**
+         * Handles the page size change from the dropdown.
+         * @param {CustomEvent<string>} event - The value changed event from nv-fieldselect.
+         */
+        this.handlePageSizeChange = (event) => {
+            const newSize = Number(event.detail);
+            if (newSize > 0) {
+                this.pageSize = newSize;
+            }
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Navigates to the first page.
+     */
+    async firstPage() {
+        this.pageIndex = 0;
+    }
+    /**
+     * Navigates to the previous page.
+     */
+    async previousPage() {
+        if (this.pageIndex > 0) {
+            this.pageIndex = this.pageIndex - 1;
+        }
+    }
+    /**
+     * Navigates to the next page.
+     */
+    async nextPage() {
+        if (this.pageIndex < this.pageCount - 1) {
+            this.pageIndex = this.pageIndex + 1;
+        }
+    }
+    /**
+     * Navigates to the last page.
+     */
+    async lastPage() {
+        this.pageIndex = this.pageCount - 1;
+    }
+    /**
+     * Navigates to a specific page by index.
+     * @param {number} index The zero-based page index to navigate to.
+     */
+    async setPageIndex(index) {
+        if (index >= 0 && index < this.pageCount) {
+            this.pageIndex = index;
+        }
+    }
+    /**
+     * Changes the number of rows displayed per page.
+     * @param {number} size The new page size.
+     */
+    async setPageSize(size) {
+        if (size > 0) {
+            this.pageSize = size;
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to pageIndex and emits the pageIndexChanged event.
+     * @param {number} newValue The new page index value.
+     */
+    onPageIndexChange(newValue) {
+        this.pageIndexChanged.emit(newValue);
+    }
+    /**
+     * Watches for changes to pageSize and emits the pageSizeChanged event.
+     * @param {number} newValue The new page size value.
+     */
+    onPageSizeChange(newValue) {
+        this.pageSizeChanged.emit(newValue);
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        const atFirstPage = isFirstPage(this.pageIndex);
+        const atLastPage = isLastPage(this.pageIndex, this.pageCount);
+        // Use fallback values to handle undefined props (can happen when frameworks pass undefined explicitly)
+        const pageLabel = interpolate(this.labelPage, { pageIndex: this.pageIndex + 1, pageCount: this.pageCount }, 'Page {pageIndex} of {pageCount}');
+        const totalLabel = interpolate(this.labelTotal, { rowCount: this.rowCount }, 'Total: {rowCount} rows');
+        const pageSizeOptions = generatePageSizeOptions(this.labelPageSizeOption ?? '{pageSize} per page');
+        return (index.h(index.Host, { key: '1c032ac283f0b259804d05df2d82c496a4ba2590' }, !this.hideControls && (index.h("div", { key: '3d1bdf1d99583a1dfeef2c9b2f8d120862e5f771', "data-scope": "controls" }, !this.hideFirstLast && (index.h("nv-iconbutton", { key: '353464b98b5af27b9932f7ada5358a5fe3886ca5', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: '3196094e7ccff072e292c4e7ba7fe1d23d9a74f9', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: 'c9a82233745d41c812ba9d18ac133e54dd183435', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (index.h("nv-iconbutton", { key: '649b89169098230931ec30f205548104342e4d8c', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), index.h("span", { key: '3e1311af13227e797ad6914ab70274e554a2f8b2', "data-scope": "page-label" }, pageLabel), index.h("span", { key: '63d020bd24a353d47dc3097146b2afd9b31de612', "data-scope": "total" }, totalLabel), index.h("div", { key: '046597be91d6d83551557592aedb799e3d86da4c', "data-scope": "per-page" }, index.h("nv-fieldselect", { key: '8d661cb40826a34d323d07bb994b5019eb0127fc', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), index.h("slot", { key: '385e77f742cb4501d26706b08986825d817fd725' })));
+    }
+    static get watchers() { return {
+        "pageIndex": [{
+                "onPageIndexChange": 0
+            }],
+        "pageSize": [{
+                "onPageSizeChange": 0
+            }]
+    }; }
+};
+NvPaginationtable.style = nvPaginationtableCss();
+
+exports.nv_paginationtable = NvPaginationtable;

package/dist/cjs/{nv-popover.entry-mLdLSp6n.js → nv-popover.entry-D2oFn9vL.js}

@@ -1,9 +1,11 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
+var index = require('./index-DUlunl9a.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
-var grow_animationCvHGHBL4 = require('./grow.animation-CvHGHBL4-DDIEYBK-.js');
+var grow_animationD7ep_aVl = require('./grow.animation-D7ep_aVl-BuXEDSK-.js');
 require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var events_utilsB6GgGra_ = require('./events.utils-B6GgGra--01N__3wY.js');
+var dom_utilsCuXVGECR = require('./dom.utils-CuXVGECR-8VY5SfMZ.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -1379,12 +1381,13 @@ const computePosition = (reference, floating, options) => {
 };
 
 const appendToMap = (map, propName, value) => {
-    const items = map.get(propName);
-    if (!items) {
-        map.set(propName, [value]);
+    let refs = map.get(propName);
+    if (!refs) {
+        refs = [];
+        map.set(propName, refs);
     }
-    else if (!items.includes(value)) {
-        items.push(value);
+    if (!refs.some((ref) => ref.deref() === value)) {
+        refs.push(new WeakRef(value));
     }
 };
 const debounce = (fn, ms) => {
@@ -1412,33 +1415,54 @@ const debounce = (fn, ms) => {
 const isConnected = (maybeElement) => !('isConnected' in maybeElement) || maybeElement.isConnected;
 const cleanupElements = debounce((map) => {
     for (let key of map.keys()) {
-        map.set(key, map.get(key).filter(isConnected));
+        const refs = map.get(key).filter((ref) => {
+            const elm = ref.deref();
+            return elm && isConnected(elm);
+        });
+        map.set(key, refs);
     }
 }, 2_000);
+const core = index.StencilCore;
+const forceUpdate = core.forceUpdate;
+const getRenderingRef = core.getRenderingRef;
 const stencilSubscription = () => {
-    if (typeof index.getRenderingRef !== 'function') {
+    if (typeof getRenderingRef !== 'function' || typeof forceUpdate !== 'function') {
         // If we are not in a stencil project, we do nothing.
         // This function is not really exported by @stencil/core.
         return {};
     }
+    const ensureForceUpdate = forceUpdate;
+    const ensureGetRenderingRef = getRenderingRef;
     const elmsToUpdate = new Map();
     return {
         dispose: () => elmsToUpdate.clear(),
         get: (propName) => {
-            const elm = index.getRenderingRef();
+            const elm = ensureGetRenderingRef();
             if (elm) {
                 appendToMap(elmsToUpdate, propName, elm);
             }
         },
         set: (propName) => {
-            const elements = elmsToUpdate.get(propName);
-            if (elements) {
-                elmsToUpdate.set(propName, elements.filter(index.forceUpdate));
+            const refs = elmsToUpdate.get(propName);
+            if (refs) {
+                const nextRefs = refs.filter((ref) => {
+                    const elm = ref.deref();
+                    if (!elm)
+                        return false;
+                    return ensureForceUpdate(elm);
+                });
+                elmsToUpdate.set(propName, nextRefs);
             }
             cleanupElements(elmsToUpdate);
         },
         reset: () => {
-            elmsToUpdate.forEach((elms) => elms.forEach(index.forceUpdate));
+            elmsToUpdate.forEach((refs) => {
+                refs.forEach((ref) => {
+                    const elm = ref.deref();
+                    if (elm)
+                        ensureForceUpdate(elm);
+                });
+            });
             cleanupElements(elmsToUpdate);
         },
     };
@@ -1446,8 +1470,11 @@ const stencilSubscription = () => {
 
 const unwrap = (val) => (typeof val === 'function' ? val() : val);
 const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) => {
-    const unwrappedState = unwrap(defaultState);
-    let states = new Map(Object.entries(unwrappedState ?? {}));
+    const resolveDefaultState = () => (unwrap(defaultState) ?? {});
+    const initialState = resolveDefaultState();
+    let states = new Map(Object.entries(initialState));
+    const proxyAvailable = typeof Proxy !== 'undefined';
+    const plainState = proxyAvailable ? null : {};
     const handlers = {
         dispose: [],
         get: [],
@@ -1459,7 +1486,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
     const reset = () => {
         // When resetting the state, the default state may be a function - unwrap it to invoke it.
         // otherwise, the state won't be properly reset
-        states = new Map(Object.entries(unwrap(defaultState) ?? {}));
+        states = new Map(Object.entries(resolveDefaultState()));
+        if (!proxyAvailable) {
+            syncPlainStateKeys();
+        }
         handlers.reset.forEach((cb) => cb());
     };
     const dispose = () => {
@@ -1476,12 +1506,14 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
         const oldValue = states.get(propName);
         if (shouldUpdate(value, oldValue, propName)) {
             states.set(propName, value);
+            if (!proxyAvailable) {
+                ensurePlainProperty(propName);
+            }
             handlers.set.forEach((cb) => cb(propName, value, oldValue));
         }
     };
-    const state = (typeof Proxy === 'undefined'
-        ? {}
-        : new Proxy(unwrappedState, {
+    const state = (proxyAvailable
+        ? new Proxy(initialState, {
             get(_, propName) {
                 return get(propName);
             },
@@ -1501,7 +1533,11 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 set(propName, value);
                 return true;
             },
-        }));
+        })
+        : (() => {
+            syncPlainStateKeys();
+            return plainState;
+        })());
     const on = (eventName, callback) => {
         handlers[eventName].push(callback);
         return () => {
@@ -1514,7 +1550,10 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
                 cb(newValue);
             }
         };
-        const resetHandler = () => cb(unwrap(defaultState)[propName]);
+        const resetHandler = () => {
+            const snapshot = resolveDefaultState();
+            cb(snapshot[propName]);
+        };
         // Register the handlers
         const unSet = on('set', setHandler);
         const unReset = on('reset', resetHandler);
@@ -1557,6 +1596,38 @@ const createObservableMap = (defaultState, shouldUpdate = (a, b) => a !== b) =>
             changeListeners.delete(listener);
         }
     };
+    function ensurePlainProperty(key) {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        if (Object.prototype.hasOwnProperty.call(plainState, key)) {
+            return;
+        }
+        Object.defineProperty(plainState, key, {
+            configurable: true,
+            enumerable: true,
+            get() {
+                return get(key);
+            },
+            set(value) {
+                set(key, value);
+            },
+        });
+    }
+    function syncPlainStateKeys() {
+        if (proxyAvailable || !plainState) {
+            return;
+        }
+        const knownKeys = new Set(states.keys());
+        for (const key of Object.keys(plainState)) {
+            if (!knownKeys.has(key)) {
+                delete plainState[key];
+            }
+        }
+        for (const key of knownKeys) {
+            ensurePlainProperty(key);
+        }
+    }
     return {
         state,
         get,
@@ -1584,7 +1655,7 @@ const createStore = (defaultState, shouldUpdate) => {
     return map;
 };
 
-const nvPopoverCss = "nv-popover{display:inline-block;position:relative}nv-popover:has([fluid]:not([fluid=false])){display:block}nv-popover[strategy=fixed]{position:static}nv-popover>[data-scope=popover]{width:max-content;background-color:var(--components-popover-background);border-color:var(--components-popover-border);font-weight:var(--font-weight-medium-emphasis);border-width:1px;border-style:solid;border-radius:var(--popover-radius);padding:var(--popover-padding-y) var(--popover-padding-x);position:absolute;top:0;left:0;z-index:1;box-shadow:var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity)}nv-popover>[data-scope=popover][hidden]:not([hidden=false]){display:none}nv-popover>[data-scope=popover][data-strategy=fixed]{position:fixed;z-index:9999}nv-popover>[data-scope=popover]>[data-scope=arrow]{background-color:var(--components-popover-background);position:absolute;border-color:var(--components-popover-border);border-width:1px;border-style:solid;border-bottom-color:transparent;border-right-color:transparent;width:8px;height:8px;transform:rotate(45deg);border-radius:1px}nv-popover>[data-scope=popover]>[slot=content]{position:relative;z-index:1}nv-popover>slot-fb{display:none}";
+const nvPopoverCss = () => `nv-popover{display:inline-block;position:relative}nv-popover:has([fluid]:not([fluid=false])){display:block}nv-popover[strategy=fixed]{position:static}nv-popover>[data-scope=popover]{width:max-content;background-color:var(--components-popover-background);border-color:var(--components-popover-border);font-weight:var(--font-weight-medium-emphasis);border-width:1px;border-style:solid;border-radius:var(--popover-radius);padding:var(--popover-padding-y) var(--popover-padding-x);position:absolute;top:0;left:0;z-index:1;box-shadow:var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity)}nv-popover>[data-scope=popover][hidden]:not([hidden=false]){display:none}nv-popover>[data-scope=popover][data-strategy=fixed]{position:fixed;z-index:9999}nv-popover>[data-scope=popover]>[data-scope=arrow]{background-color:var(--components-popover-background);position:absolute;border-color:var(--components-popover-border);border-width:1px;border-style:solid;border-bottom-color:transparent;border-right-color:transparent;width:8px;height:8px;transform:rotate(45deg);border-radius:1px}nv-popover>[data-scope=popover]>[slot=content]{position:relative;z-index:1}nv-popover>slot-fb{display:none}`;
 
 const { state } = createStore({
     groups: new Map(),
@@ -1699,11 +1770,10 @@ const NvPopover = class {
          * @param {MouseEvent | TouchEvent} event - The event object.
          */
         this.handleClickOutside = (event) => {
-            var _a;
             // This popover should close when the user clicks outside of it.
             if (this.el.contains(event.target))
                 return;
-            if ((_a = this.triggerElement) === null || _a === void 0 ? void 0 : _a.contains(event.target))
+            if (this.triggerElement?.contains(event.target))
                 return;
             this.open = false;
         };
@@ -1743,14 +1813,14 @@ const NvPopover = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached) {
-            grow_animationCvHGHBL4.addEventListeners(this.closeEvents, document, this);
+            events_utilsB6GgGra_.addEventListeners(this.closeEvents, document, this);
             if (this.triggerMode === 'click') {
-                grow_animationCvHGHBL4.addEventListeners(this.clickEvents, this.triggerElement, this);
+                events_utilsB6GgGra_.addEventListeners(this.clickEvents, this.triggerElement, this);
                 // Add document click and touch listeners
-                grow_animationCvHGHBL4.addEventListeners(this.outsideClickEvents, document, this);
+                events_utilsB6GgGra_.addEventListeners(this.outsideClickEvents, document, this);
             }
             if (this.triggerMode === 'hover') {
-                grow_animationCvHGHBL4.addEventListeners(this.hoverEvents, this.triggerElement, this);
+                events_utilsB6GgGra_.addEventListeners(this.hoverEvents, this.triggerElement, this);
             }
             this.eventsAttached = true;
         }
@@ -1762,7 +1832,7 @@ const NvPopover = class {
     positionPopover() {
         if (!this.triggerElement)
             return;
-        computePosition(this.triggerElement, this.popoverElement, {
+        computePosition(dom_utilsCuXVGECR.asElement(this.triggerElement), this.popoverElement, {
             placement: this.placement,
             strategy: this.strategy,
             middleware: [
@@ -1825,7 +1895,7 @@ const NvPopover = class {
             state.groups.delete(this.groupName);
         if (this.groupName && open)
             state.groups.set(this.groupName, { openedBy: this.el });
-        const { growIn } = grow_animationCvHGHBL4.useGrow(this.popoverElement, {
+        const { growIn } = grow_animationD7ep_aVl.useGrow(this.popoverElement, {
             duration: isOtherMemberOpen ? 0 : 100,
             amount: 0.85,
         });
@@ -1852,17 +1922,16 @@ const NvPopover = class {
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
-    componentWillLoad() {
-        if (!this.triggerElement)
-            this.triggerElement = Array.from(this.el.children).find(child => child.getAttribute('slot') === 'trigger');
-    }
-    componentWillUpdate() {
+    componentWillRender() {
+        if (!this.triggerElement) {
+            this.triggerElement = this.el.querySelector('[slot="trigger"]');
+        }
         this.attachEventListeners();
     }
     componentDidLoad() {
         // Initial inline style setup
         if (!this.open) {
-            const { setGrowOut } = grow_animationCvHGHBL4.useGrow(this.popoverElement);
+            const { setGrowOut } = grow_animationD7ep_aVl.useGrow(this.popoverElement);
             setGrowOut();
         }
         else {
@@ -1871,17 +1940,16 @@ const NvPopover = class {
             this.popoverElement.removeAttribute('hidden');
         }
         this.positionPopover();
-        this.attachEventListeners();
     }
     disconnectedCallback() {
-        grow_animationCvHGHBL4.removeEventListeners(this.closeEvents, document, this);
+        events_utilsB6GgGra_.removeEventListeners(this.closeEvents, document, this);
         if (this.triggerMode === 'click') {
-            grow_animationCvHGHBL4.removeEventListeners(this.clickEvents, this.triggerElement, this);
+            events_utilsB6GgGra_.removeEventListeners(this.clickEvents, this.triggerElement, this);
             // Remove document listeners
-            grow_animationCvHGHBL4.removeEventListeners(this.outsideClickEvents, document, this);
+            events_utilsB6GgGra_.removeEventListeners(this.outsideClickEvents, document, this);
         }
         if (this.triggerMode === 'hover')
-            grow_animationCvHGHBL4.removeEventListeners(this.hoverEvents, this.triggerElement, this);
+            events_utilsB6GgGra_.removeEventListeners(this.hoverEvents, this.triggerElement, this);
         // Reset flag so events can be reattached if component is reconnected
         this.eventsAttached = false;
         // Clean up any pending timeouts
@@ -1894,14 +1962,18 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '8ef71227900185e903bd0003771074ba5d071aac' }, index.h("slot", { key: '84ccbb797f486d76ed650b50e5004bffc2521ddb', name: "trigger" }), index.h("div", { key: '66dc1bf520a2bf6f0a1c4e91b091b0b4941807c4', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'a1ab4831292b9ab60ebfd8dd478c3685944dbe79', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '2d9ee411891f956ff3ccd7b74d956e5b952e1af0', name: "content" }))));
+        return (index.h(index.Host, { key: 'd6fef7eff8bcf37038c615eb3a382c2213b8df57' }, index.h("slot", { key: '849d6563e00d899fe0d1740139e510f5a53a6160', name: "trigger" }), index.h("div", { key: '3d187af80792aa571039fa5966cc5a38ad65c447', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'cc06755e1ffe17280d847ec78f760fb87e491bea', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '015e92df5937b852b5e9fe4ef5bbf56a4a21e802', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleOpenChange"],
-        "strategy": ["handleStrategyChange"]
+        "open": [{
+                "handleOpenChange": 0
+            }],
+        "strategy": [{
+                "handleStrategyChange": 0
+            }]
     }; }
 };
-NvPopover.style = nvPopoverCss;
+NvPopover.style = nvPopoverCss();
 
 exports.nv_popover = NvPopover;

package/dist/cjs/nv-row.entry-hV1kxmrr.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvRowCss = () => `nv-row{display:flex;flex-wrap:wrap;margin-right:calc(var(--spacing-4) * -1);margin-left:calc(var(--spacing-4) * -1);row-gap:var(--spacing-4)}`;
+
+const NvRow = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'a0f1533d6bec697a7a1abed6444b7be7d4141000' }, index.h("slot", { key: '76b28afb465d755f85e7b297b13aaed00cd65a9e' })));
+    }
+};
+NvRow.style = nvRowCss();
+
+exports.nv_row = NvRow;

package/dist/cjs/{nv-sidebar.entry-inDVNJ4s.js → nv-sidebar.entry-BJrqJ8K7.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 nvSidebarCss = "nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}nv-sidebar .nv-sidebar-toggle nv-icon:hover{color:var(--color-interaction-container-neutral-icon-hover)}";
+const nvSidebarCss = () => `nv-sidebarnavitem a,nv-sidebarnavitem a:link,nv-sidebarnavitem a:visited,nv-sidebarnavitem a:hover,nv-sidebarnavitem a:active,nv-sidebarnavsubitem a,nv-sidebarnavsubitem a:link,nv-sidebarnavsubitem a:visited,nv-sidebarnavsubitem a:hover,nv-sidebarnavsubitem a:active{color:inherit !important;text-decoration:none !important}nv-sidebar{display:flex;flex-direction:column;position:relative;height:100vh;background-color:var(--components-sidebar-background);border-right:var(--sidebar-divider-size) solid var(--components-sidebar-border);transition:width 0.3s ease;width:var(--sidebar-width)}nv-sidebar[collapsed]{width:var(--sidebar-width-collapsed)}nv-sidebar[collapsed] [data-hide-on-collapsed]{display:none !important}nv-sidebar[collapsed] .nv-sidebar-container{padding:var(--sidebar-padding-y) var(--sidebar-padding-x-collapsed)}nv-sidebar .nv-sidebar-container{display:flex;flex-direction:column;flex:1;overflow:hidden;padding:var(--sidebar-padding-y) var(--sidebar-padding-x);gap:var(--sidebar-gap-y)}nv-sidebar .nv-sidebar-toggle{position:absolute;top:var(--sidebar-collapsible-button-position-top);right:calc(-1 * var(--sidebar-collapsible-button-position-right));display:flex;align-items:center;justify-content:center;padding:var(--sidebar-collapsible-button-padding);background-color:var(--components-sidebar-background);border:1px solid var(--color-content-low-border);border-radius:var(--radius-rounded-full);cursor:pointer;transition:transform 0.2s ease;z-index:10}nv-sidebar .nv-sidebar-toggle:hover{background-color:var(--color-interaction-container-neutral-background-hover)}nv-sidebar .nv-sidebar-toggle:focus,nv-sidebar .nv-sidebar-toggle:focus-within{outline:none}nv-sidebar .nv-sidebar-toggle:focus-visible,nv-sidebar .nv-sidebar-toggle:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-sidebar .nv-sidebar-toggle nv-icon{width:var(--sidebar-collapsible-button-icon-size);height:var(--sidebar-collapsible-button-icon-size);color:var(--color-interaction-container-neutral-icon)}nv-sidebar .nv-sidebar-toggle nv-icon:hover{color:var(--color-interaction-container-neutral-icon-hover)}`;
 
 const NvSidebar = class {
     constructor(hostRef) {
@@ -55,7 +55,7 @@ const NvSidebar = class {
             const activeSubitemHrefs = new Set();
             this.el.querySelectorAll('nv-sidebarnavsubitem').forEach(subItem => {
                 const link = subItem.querySelector('a');
-                const href = link === null || link === void 0 ? void 0 : link.getAttribute('href');
+                const href = link?.getAttribute('href');
                 if (href) {
                     const isActive = this.activePath === href;
                     subItem.active = isActive;
@@ -69,7 +69,7 @@ const NvSidebar = class {
             // 2. OR the navitem has no subitems and activePath starts with its href
             this.el.querySelectorAll('nv-sidebarnavitem').forEach(navItem => {
                 const link = navItem.querySelector(':scope > a, :scope > .nv-sidebarnavitem-trigger a, .nv-sidebarnavitem-content > a');
-                const href = link === null || link === void 0 ? void 0 : link.getAttribute('href');
+                const href = link?.getAttribute('href');
                 const hasSubitems = navItem.querySelector('nv-sidebarnavsubitem') !== null;
                 if (href) {
                     if (hasSubitems) {
@@ -162,16 +162,20 @@ const NvSidebar = class {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (index.h(index.Host, { key: '79f262f95af40b330d5640273f7a6059f672068b', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: '348023343f71ba232b82c21f968c0a8bbb170eca', class: "nv-sidebar-container" }, index.h("slot", { key: 'b634857cb88c12975de9641e154b669de8ce8726' })), this.type === 'collapsible' && (index.h("button", { key: '0b398d6738536aad4d4e96ad5ca1f04dd543ee1b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '44b5eb0c9b3239750956c7da09eb9a22e5d0939f', name: this.open
+        return (index.h(index.Host, { key: 'b186709db49756c2cbc7266ef9dfb1cdaf63c9bd', role: "navigation", collapsed: isCollapsed ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: '9b415f173b9097aceda8619b061d9e7533030e57', class: "nv-sidebar-container" }, index.h("slot", { key: 'e60dbe6ea59f72caab1d519bf0a84afe9a9f0829' })), this.type === 'collapsible' && (index.h("button", { key: 'cc63ad46951876de82efccef404366a04393bb4b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '7f44dbfe4e1b351c789ea558e735b9da00b03e19', name: this.open
                 ? 'layout-sidebar-left-collapse'
                 : 'layout-sidebar-right-collapse', size: "sm" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "activePath": ["onActivePathChanged"],
-        "open": ["onOpenChanged"]
+        "activePath": [{
+                "onActivePathChanged": 0
+            }],
+        "open": [{
+                "onOpenChanged": 0
+            }]
     }; }
 };
-NvSidebar.style = nvSidebarCss;
+NvSidebar.style = nvSidebarCss();
 
 exports.nv_sidebar = NvSidebar;