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

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

@@ -0,0 +1,231 @@
+'use strict';
+
+var index = require('./index-BeFrXZol.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: '1ca51049fc16cc949fe38c80ceabc7a72f189279' }, !this.hideControls && (index.h("div", { key: '6962c8ee324aa42f5eb5defceb48cbb6b5a6ed0a', "data-scope": "controls" }, !this.hideFirstLast && (index.h("nv-iconbutton", { key: 'faa193b020c69f274fd7024a9fbc736661500152', name: "chevrons-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.firstPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: 'dfa8731f6389768a659207bac3752b9ac674c9e8', name: "chevron-left", emphasis: "lower", size: "sm", disabled: atFirstPage, onClick: () => this.previousPage() })), !this.hidePrevNext && (index.h("nv-iconbutton", { key: 'a546e95f9921f4b6b0848ce1eaee929ac223949a', name: "chevron-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.nextPage() })), !this.hideFirstLast && (index.h("nv-iconbutton", { key: 'f59fac8c7ee04c37779089aa8de8980d5ca51d04', name: "chevrons-right", emphasis: "lower", size: "sm", disabled: atLastPage, onClick: () => this.lastPage() })))), index.h("span", { key: '32079d8ea98a2918eee76c0176515eba13ac24a0', "data-scope": "page-label" }, pageLabel), index.h("span", { key: '21c38d9e335ce7c9d952f5ef8201d51f1d486b76', "data-scope": "total" }, totalLabel), index.h("div", { key: 'e981f5e869c08bdd52639b35ac6bec3deec8577c', "data-scope": "per-page" }, index.h("nv-fieldselect", { key: 'ac22a50b68b7a75f0560d19641c159a5d771bceb', value: String(this.pageSize), onValueChanged: this.handlePageSizeChange, options: pageSizeOptions })), index.h("slot", { key: '784a6edbfbf83b76ef7e49e881591ba16e9da064' })));
+    }
+    static get watchers() { return {
+        "pageIndex": [{
+                "onPageIndexChange": 0
+            }],
+        "pageSize": [{
+                "onPageSizeChange": 0
+            }]
+    }; }
+};
+NvPaginationtable.style = nvPaginationtableCss();
+
+exports.nv_paginationtable = NvPaginationtable;

package/dist/cjs/{nv-popover.entry-B0c-2rO4.js → nv-popover.entry-DSyKCLtF.js}

@@ -1,10 +1,11 @@
 'use strict';
 
-var index = require('./index-kU2nW5aN.js');
+var index = require('./index-BeFrXZol.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.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');
@@ -1380,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) => {
@@ -1413,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);
         },
     };
@@ -1447,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: [],
@@ -1460,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 = () => {
@@ -1477,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);
             },
@@ -1502,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 () => {
@@ -1515,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);
@@ -1558,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,
@@ -1585,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(),
@@ -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: [
@@ -1852,11 +1922,10 @@ 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() {
@@ -1871,7 +1940,6 @@ const NvPopover = class {
             this.popoverElement.removeAttribute('hidden');
         }
         this.positionPopover();
-        this.attachEventListeners();
     }
     disconnectedCallback() {
         events_utilsB6GgGra_.removeEventListeners(this.closeEvents, document, this);
@@ -1894,14 +1962,18 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '3505c77a628a1c612d937703777b72459a71e256' }, index.h("slot", { key: '36596c5ca1b182ed5d9f723b81398cf54923bd83', name: "trigger" }), index.h("div", { key: 'efc6da5c69cefad2611f0b9fa96d072ddc48d07a', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: '9439cf1c7fdadfd9538c4ed186d4c54300d00e95', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '868cd1ce1ac648f4446aa6d4f86069551c208d1f', name: "content" }))));
+        return (index.h(index.Host, { key: '8d6cfba040e2e29705a6e9fd3c1044c9e0b668b1' }, index.h("slot", { key: '1ea59e4037bf56ced06ad652c9c55bbc56556fd5', name: "trigger" }), index.h("div", { key: '7023f506e410e44a85c4683ebccfe10fdaf45c10', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'b336819de26b0ae8899dbd378272a6a5a30517d6', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'fd9aad00f57cb5bab850983f2b28ea80b4cdd7fb', 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-D21zN2Vr.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-BeFrXZol.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: '507041a8331236632f2dc12e94ca7c87465e8312' }, index.h("slot", { key: '3bef8f23cdc72e42467dc0407b9d2693f15638d7' })));
+    }
+};
+NvRow.style = nvRowCss();
+
+exports.nv_row = NvRow;

package/dist/cjs/{nv-sidebar.entry-CiN813gQ.js → nv-sidebar.entry-DpKgnjsJ.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-kU2nW5aN.js');
+var index = require('./index-BeFrXZol.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) {
@@ -162,16 +162,20 @@ const NvSidebar = class {
     //#region RENDER
     render() {
         const isCollapsed = this.type === 'collapsible' && !this.open;
-        return (index.h(index.Host, { key: 'ac14d7b4027c06d1aa19b1b6c7de3f0d2e231b1a', 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: 'e567303c87a2308747290fae95d7ade9971cd67a', class: "nv-sidebar-container" }, index.h("slot", { key: '0b2e0e1b1721aae3c0f910500bde3c2db92f879b' })), this.type === 'collapsible' && (index.h("button", { key: '493204449f3bb9aedd5a34cb238242aadd61324b', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '0e389c1c6c92f02f7c1e39fc07ef17a469b1e0f2', name: this.open
+        return (index.h(index.Host, { key: 'a22074a54f9d51c5a60dd698573a95862e9df0a8', 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: 'f19453d0dbbad812f27f188ef198b895d37e8ad2', class: "nv-sidebar-container" }, index.h("slot", { key: '7194ae2a2a655716f3f1db89d9c38dc4b0ab9df0' })), this.type === 'collapsible' && (index.h("button", { key: '4f7a1805932f6e1783fbcf63dc54d3260464eab0', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '76d84d1c07d3f841808950c6805aa7bcaa63cf85', 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;

package/dist/cjs/nv-sidebarcontent.entry-BWFDcui8.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var index = require('./index-BeFrXZol.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvSidebarcontentCss = () => `nv-sidebarcontent{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}`;
+
+const NvSidebarcontent = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        return (index.h(index.Host, { key: 'e88e1557fbfa8ec74391dc11b6073eecb4d97685', role: "list" }, index.h("slot", { key: 'ccaf985cc498a5729600316135d750190a514582' })));
+    }
+};
+NvSidebarcontent.style = nvSidebarcontentCss();
+
+exports.nv_sidebarcontent = NvSidebarcontent;

package/dist/cjs/{nv-sidebardivider.entry-B4EMyca5.js → nv-sidebardivider.entry-BSzLq-h3.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-kU2nW5aN.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvSidebardividerCss = "nv-sidebardivider{display:block;height:var(--sidebar-divider-size);background-color:var(--components-sidebar-divider)}";
+const nvSidebardividerCss = () => `nv-sidebardivider{display:block;height:var(--sidebar-divider-size);background-color:var(--components-sidebar-divider)}`;
 
 const NvSidebardivider = class {
     constructor(hostRef) {
@@ -14,9 +14,9 @@ const NvSidebardivider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return index.h(index.Host, { key: '157045ee7209aa55574c54c2392f1e53d6cdba1e', role: "separator", "aria-orientation": "horizontal" });
+        return index.h(index.Host, { key: 'e2288aab359dff9087f7758e53a476e4715b0742', role: "separator", "aria-orientation": "horizontal" });
     }
 };
-NvSidebardivider.style = nvSidebardividerCss;
+NvSidebardivider.style = nvSidebardividerCss();
 
 exports.nv_sidebardivider = NvSidebardivider;

package/dist/cjs/{nv-sidebarfooter.entry-CHi4qOFe.js → nv-sidebarfooter.entry-C3DLHPSQ.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-kU2nW5aN.js');
+var index = require('./index-BeFrXZol.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvSidebarfooterCss = "nv-sidebarfooter{display:block;margin-top:auto}";
+const nvSidebarfooterCss = () => `nv-sidebarfooter{display:block;margin-top:auto}`;
 
 const NvSidebarfooter = class {
     constructor(hostRef) {
@@ -14,9 +14,9 @@ const NvSidebarfooter = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'be19b80fc56a296999532d986d477dcbd817a9f2' }, index.h("slot", { key: '55b3e91dab40b923d67eb140be42fd2483951254' })));
+        return (index.h(index.Host, { key: 'ac36a47c2f96070779b7b05134303604e3ef7676' }, index.h("slot", { key: '295d26a47fa386deade3799a02686afe6ef42ce0' })));
     }
 };
-NvSidebarfooter.style = nvSidebarfooterCss;
+NvSidebarfooter.style = nvSidebarfooterCss();
 
 exports.nv_sidebarfooter = NvSidebarfooter;