@nova-design-system/nova-react 3.31.1 → 3.31.2-beta.4

package/dist/cjs/{nv-iconbutton_2.entry-KrPZeqSB.js → nv-iconbutton_2.entry-DWKZigsd.js}

@@ -1,7 +1,8 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var accessibility_utilsC4Cy9iy8 = require('./accessibility.utils-C4Cy9iy8-CeSsswXF.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -105,7 +106,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region EVENTS
     handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
+        if (accessibility_utilsC4Cy9iy8.isToggleKey(event.key)) {
             event.preventDefault();
             this.el.click();
         }
@@ -128,7 +129,7 @@ const NvIconbutton = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'f206fab4c635b6d27b112cc68bebfc3e66593177', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsxChV9xqsO.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: '2ea73a9f618aeda177874d9d628e67e2ecaeec52', size: this.size }), !this.loading && index.h("nv-icon", { key: '8ebed9969c09dedbb7c900b520cb52f28f342adc', name: this.name, size: this.size }), index.h("slot", { key: 'b4d27f55210016a776cb215f2f8788fe4fd7c4a1' })));
+        return (index.h(index.Host, { key: 'e657e688f0e40a738a7a83b5130f4ec0a51339e7', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsxChV9xqsO.clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && index.h("nv-loader", { key: 'd33fa5969fec5936f0de4ef9580387d1ee03929d', size: this.size }), !this.loading && index.h("nv-icon", { key: 'ff1518a8f1f49acf65c2c971fd1b1be45e581cba', name: this.name, size: this.size }), index.h("slot", { key: '4c694ffe57e30b997026922ee077e1cce96cef6c' })));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }

package/dist/cjs/{nv-menu.entry-BQ4Va1Zd.js → nv-menu.entry-DDFZOYwe.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-menuitem.entry-Dp71XXc9.js → nv-menuitem.entry-Btgdr6Od.js}

@@ -1,6 +1,7 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
+var accessibility_utilsC4Cy9iy8 = require('./accessibility.utils-C4Cy9iy8-CeSsswXF.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -36,7 +37,7 @@ const NvMenuitem = class {
         this.handleMenuItemSelect(event);
     }
     handleKeyDown(event) {
-        if (event.key === 'Enter' || event.key === ' ') {
+        if (accessibility_utilsC4Cy9iy8.isToggleKey(event.key)) {
             const activeElement = document.activeElement;
             if (activeElement &&
                 activeElement.tagName === 'NV-MENUITEM' &&
@@ -50,7 +51,7 @@ const NvMenuitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '9ae0a9d4520789157d869a8832f622176f9df331', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: 'a0f76ff34d83238add0cebfb83a1c7f715d9fcb0', name: this.icon }), index.h("slot", { key: '8a5883175325444025efcbd12ecb57c95dfb2ac3' }), this.label && index.h("span", { key: 'da5452a4fdc521cf336a38575c9ab2e49d7b0179', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: 'de40a96181c57c6ea27669c15634a568c6e3ed05' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'ff65838b28f0be31356645cfbdd5b7eb95b47266', name: "chevron-right" })));
+        return (index.h(index.Host, { key: '0292e33304b74d540b2533570b1f314ca8ea100b', role: "menuitem", tabindex: this.disabled ? '-1' : '0' }, this.icon && index.h("nv-icon", { key: '1a94fdbbc5349fb4dd1c8985026197be91b7adff', name: this.icon }), index.h("slot", { key: '8994033b5371d1db6a55980c5b0a1e7455c573b7' }), this.label && index.h("span", { key: '9163ba9a67f050447ebed2a4743f6c8f3102e37b', "data-scope": "text" }, this.label), this.shortcut && !this.hasSubmenu && index.h("kbd", { key: '8adf1ba5789434c37bcbc53328b6b1dc9b82eeb5' }, this.shortcut), this.hasSubmenu && index.h("nv-icon", { key: 'b05b3c1245752d2bbd161db03b361a5e5406602a', name: "chevron-right" })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{nv-notification-bullet.entry-BXucWCVB.js → nv-notification-bullet.entry-Dqa7L5lv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-notification.entry-DyGNReGR.js → nv-notification.entry-C_AyXrky.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 var constantsGOKBmbgZ = require('./constants-gOKBmbgZ-CSoZ8z-G.js');
 var collapse_animationDZDm0vSK = require('./collapse.animation-DZDm0vSK-C2TOIhIK.js');
 var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');

package/dist/cjs/{nv-notificationcontainer.entry-C9kLTHtS.js → nv-notificationcontainer.entry-DCvtamdA.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-pagination-nav.entry-C24w5RZ-.js → nv-pagination-nav.entry-BEKSbRT5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/{nv-paginationtable.entry-C3RHvchP.js → nv-paginationtable.entry-XD08dNh6.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');

package/dist/cjs/nv-pill.entry-DXy2Ez6j.js

@@ -0,0 +1,288 @@
+'use strict';
+
+var index = require('./index-DN55EpKb.js');
+var accessibility_utilsC4Cy9iy8 = require('./accessibility.utils-C4Cy9iy8-CeSsswXF.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvPillCss = () => `.storybook-force-hover:not([disabled]):hover,.storybook-force-hover:not([disabled]){background:var(--color-interaction-container-neutral-background-hover);border-color:var(--color-interaction-container-neutral-border-hover);color:var(--color-interaction-container-neutral-text-hover)}.storybook-force-focus:not([disabled]):focus-visible:focus,.storybook-force-focus:not([disabled]):focus-visible:focus-within,.storybook-force-focus:not([disabled]):focus,.storybook-force-focus:not([disabled]):focus-within{outline:none}.storybook-force-focus:not([disabled]):focus-visible:focus-visible,.storybook-force-focus:not([disabled]):focus-visible:has(:focus-visible),.storybook-force-focus:not([disabled]):focus-visible,.storybook-force-focus:not([disabled]):has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-pill{display:inline-flex;align-items:center;justify-content:center;gap:var(--pill-gap-x);height:var(--pill-height);padding:var(--pill-padding-y) var(--pill-padding-x);border-radius:var(--pill-border-radius);border:var(--pill-stroke) solid var(--color-interaction-container-neutral-border);background:var(--color-interaction-container-neutral-background);color:var(--color-interaction-container-neutral-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-xs);line-height:var(--line-height-xs);font-weight:var(--font-weight-medium-emphasis);user-select:none;cursor:pointer;transition:background-color 150ms ease-out, border-color 150ms ease-out, color 150ms ease-out}nv-pill:focus,nv-pill:focus-within{outline:none}nv-pill:focus-visible,nv-pill:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-pill:not([disabled]:not([disabled=false])):hover{background:var(--color-interaction-container-neutral-background-hover);border-color:var(--color-interaction-container-neutral-border-hover);color:var(--color-interaction-container-neutral-text-hover)}nv-pill:not([disabled]:not([disabled=false])):active{background:var(--color-interaction-container-neutral-background-active);border-color:var(--color-interaction-container-neutral-border-active);color:var(--color-interaction-container-neutral-text-active)}nv-pill[selected]:not([selected=false]){background:var(--color-interaction-container-neutral-background-active);border-color:var(--color-interaction-container-neutral-border-active);color:var(--color-interaction-container-neutral-text-active)}nv-pill[selected]:not([selected=false]) .trailing-icon{color:var(--color-interaction-container-neutral-icon-active)}nv-pill[selected]:not([selected=false]):not([disabled]:not([disabled=false])):hover{background:var(--color-interaction-container-neutral-background-active);border-color:var(--color-interaction-container-neutral-border-active);color:var(--color-interaction-container-neutral-text-active)}nv-pill[disabled]:not([disabled=false]){opacity:0.5;cursor:not-allowed}nv-pill .leading-icon,nv-pill .trailing-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--color-interaction-container-neutral-icon)}nv-pill:not([leading-icon]):not(:has([slot=leading-icon])) .leading-icon,nv-pill[leading-icon=""]:not(:has([slot=leading-icon])) .leading-icon{display:none}nv-pill .label{white-space:nowrap}nv-pill nv-icon>svg{color:currentColor}`;
+
+const NvPill = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.toggled = index.createEvent(this, "toggled", 3);
+        this.hasWarnedMissingLabel = false;
+        /**
+         * Whether the pill is currently selected.
+         */
+        this.selected = false;
+        /**
+         * Prevents all interaction with the pill.
+         */
+        this.disabled = false;
+        /**
+         * ARIA role for accessibility contexts.
+         * Defaults to button and can be overridden by group wrappers.
+         */
+        this.pillAriaRole = 'button';
+        this.toggleSelected = () => {
+            if (!this.hasInteractiveLabel)
+                return;
+            const nextSelected = accessibility_utilsC4Cy9iy8.getRoleAwareNextSelectedState(this.normalizedRole, this.selected, this.disabled);
+            if (nextSelected === this.selected)
+                return;
+            this.selected = nextSelected;
+            if (this.isRadioInRadioGroup && this.selected) {
+                const parent = this.el.parentElement;
+                if (parent) {
+                    const radioPills = Array.from(parent.querySelectorAll('nv-pill[pill-aria-role="radio"]'));
+                    radioPills.forEach(pill => {
+                        if (pill !== this.el) {
+                            pill.selected = false;
+                            pill.removeAttribute('selected');
+                        }
+                        const nextTabIndex = pill === this.el ? 0 : -1;
+                        this.setPillTabIndex(pill, nextTabIndex);
+                        if (pill !== this.el) {
+                            index.forceUpdate(pill);
+                        }
+                    });
+                }
+                // Watchers can fire before reflected attributes settle; pin the selected
+                // radio for the batched sync to keep radiogroup tabindex deterministic.
+                this.queueRadioGroupTabIndexSync(this.el);
+            }
+            else {
+                this.syncRadioGroupTabIndexes(this.selected ? this.el : undefined);
+            }
+            this.toggled.emit({
+                selected: this.selected,
+                active: this.selected,
+                value: this.value,
+            });
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    get normalizedRole() {
+        return accessibility_utilsC4Cy9iy8.normalizeToggleAriaRole(String(this.pillAriaRole));
+    }
+    get resolvedLabel() {
+        return (this.label ?? '').trim();
+    }
+    get hasInteractiveLabel() {
+        return this.resolvedLabel.length > 0;
+    }
+    get resolvedTabIndex() {
+        if (this.disabled || !this.hasInteractiveLabel)
+            return -1;
+        if (this.normalizedRole !== 'radio')
+            return 0;
+        return NvPill.radioGroupTabIndexCache.get(this.el) ?? 0;
+    }
+    get isRadioInRadioGroup() {
+        return (this.normalizedRole === 'radio' &&
+            this.el.parentElement?.getAttribute('role') === 'radiogroup');
+    }
+    isInteractiveRadioPill(pill) {
+        const resolvedLabel = (pill.getAttribute('label') ?? pill.label ?? '').trim().length > 0;
+        return !pill.hasAttribute('disabled') && resolvedLabel;
+    }
+    setPillTabIndex(pill, value) {
+        pill.tabIndex = value;
+        NvPill.radioGroupTabIndexCache.set(pill, value);
+    }
+    syncRadioGroupTabIndexes(preferredSelectedRadio) {
+        if (!this.isRadioInRadioGroup)
+            return;
+        const parent = this.el.parentElement;
+        if (!parent)
+            return;
+        const radioPills = Array.from(parent.querySelectorAll('nv-pill[pill-aria-role="radio"]'));
+        const selectedRadio = preferredSelectedRadio &&
+            this.isInteractiveRadioPill(preferredSelectedRadio)
+            ? preferredSelectedRadio
+            : radioPills.find(pill => this.isInteractiveRadioPill(pill) &&
+                pill.hasAttribute('selected'));
+        const firstInteractiveRadio = radioPills.find(pill => this.isInteractiveRadioPill(pill));
+        radioPills.forEach(pill => {
+            if (!this.isInteractiveRadioPill(pill)) {
+                this.setPillTabIndex(pill, -1);
+                return;
+            }
+            if (selectedRadio) {
+                const nextTabIndex = pill === selectedRadio ? 0 : -1;
+                this.setPillTabIndex(pill, nextTabIndex);
+                return;
+            }
+            const nextTabIndex = pill === firstInteractiveRadio ? 0 : -1;
+            this.setPillTabIndex(pill, nextTabIndex);
+        });
+    }
+    queueRadioGroupTabIndexSync(preferredSelectedRadio) {
+        if (!this.isRadioInRadioGroup)
+            return;
+        const parent = this.el.parentElement;
+        if (!parent)
+            return;
+        const pending = NvPill.pendingRadioGroupSyncs.get(parent);
+        if (pending) {
+            if (preferredSelectedRadio &&
+                this.isInteractiveRadioPill(preferredSelectedRadio)) {
+                pending[1] = preferredSelectedRadio;
+            }
+            return;
+        }
+        const nextPending = [this];
+        if (preferredSelectedRadio &&
+            this.isInteractiveRadioPill(preferredSelectedRadio)) {
+            nextPending[1] = preferredSelectedRadio;
+        }
+        NvPill.pendingRadioGroupSyncs.set(parent, nextPending);
+        queueMicrotask(() => {
+            const latestPending = NvPill.pendingRadioGroupSyncs.get(parent);
+            NvPill.pendingRadioGroupSyncs.delete(parent);
+            if (!latestPending)
+                return;
+            const [runner, latestPreferredSelectedRadio] = latestPending;
+            if (!runner.el.isConnected)
+                return;
+            runner.syncRadioGroupTabIndexes(latestPreferredSelectedRadio);
+        });
+    }
+    handleRadioGroupArrowKey(event) {
+        if (!this.isRadioInRadioGroup)
+            return false;
+        const isNextKey = event.key === 'ArrowRight' ||
+            event.key === 'ArrowDown' ||
+            event.key === 'Right' ||
+            event.key === 'Down';
+        const isPreviousKey = event.key === 'ArrowLeft' ||
+            event.key === 'ArrowUp' ||
+            event.key === 'Left' ||
+            event.key === 'Up';
+        if (!isNextKey && !isPreviousKey) {
+            return false;
+        }
+        const parent = this.el.parentElement;
+        if (!parent) {
+            return false;
+        }
+        const radioPills = Array.from(parent.querySelectorAll('nv-pill[pill-aria-role="radio"]')).filter(pill => this.isInteractiveRadioPill(pill));
+        if (radioPills.length === 0) {
+            return false;
+        }
+        event.preventDefault();
+        const currentIndex = radioPills.indexOf(this.el);
+        if (currentIndex === -1) {
+            return true;
+        }
+        const delta = isNextKey ? 1 : -1;
+        const nextIndex = (currentIndex + delta + radioPills.length) % radioPills.length;
+        const nextRadio = radioPills[nextIndex];
+        if (nextRadio === this.el) {
+            return true;
+        }
+        const previousSelectedRadio = radioPills.find(pill => pill.selected);
+        radioPills.forEach(pill => {
+            const isTarget = pill === nextRadio;
+            if (pill.selected === isTarget)
+                return;
+            pill.selected = isTarget;
+            if (!isTarget) {
+                pill.removeAttribute('selected');
+            }
+            if (pill !== nextRadio) {
+                index.forceUpdate(pill);
+            }
+        });
+        this.queueRadioGroupTabIndexSync(nextRadio);
+        nextRadio.focus();
+        if (previousSelectedRadio !== nextRadio) {
+            nextRadio.dispatchEvent(new CustomEvent('toggled', {
+                bubbles: false,
+                detail: {
+                    selected: true,
+                    active: true,
+                    value: nextRadio.value,
+                },
+            }));
+        }
+        return true;
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LISTENERS
+    componentDidLoad() {
+        this.queueRadioGroupTabIndexSync();
+    }
+    handleTabIndexAffectingChanges() {
+        if (!this.isRadioInRadioGroup) {
+            NvPill.radioGroupTabIndexCache.delete(this.el);
+        }
+        this.queueRadioGroupTabIndexSync();
+    }
+    handleKeyDown(event) {
+        if (!this.hasInteractiveLabel)
+            return;
+        if (this.disabled)
+            return;
+        if (event.repeat)
+            return;
+        if (this.handleRadioGroupArrowKey(event)) {
+            return;
+        }
+        if (accessibility_utilsC4Cy9iy8.isToggleKey(event.key)) {
+            event.preventDefault();
+            this.el.click();
+        }
+    }
+    handleHostClickCapture(event) {
+        if (!this.hasInteractiveLabel) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            event.stopPropagation();
+            return;
+        }
+        if (!this.disabled)
+            return;
+        event.preventDefault();
+        event.stopImmediatePropagation();
+        event.stopPropagation();
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        if (index.Build.isDev &&
+            !this.hasInteractiveLabel &&
+            !this.hasWarnedMissingLabel) {
+            console.warn('[nv-pill] Missing required label prop. Unlabeled pills are rendered as non-interactive for accessibility.');
+            this.hasWarnedMissingLabel = true;
+        }
+        const ariaState = accessibility_utilsC4Cy9iy8.getAriaStateAttributes(this.normalizedRole, this.selected);
+        return (index.h(index.Host, { key: 'a117cead9ef6ad60f00fb19da3fa6d513a707092', role: this.hasInteractiveLabel ? this.normalizedRole : undefined, tabindex: this.resolvedTabIndex, "aria-pressed": this.hasInteractiveLabel ? ariaState.ariaPressed : undefined, "aria-checked": this.hasInteractiveLabel ? ariaState.ariaChecked : undefined, "aria-disabled": this.hasInteractiveLabel && this.disabled ? 'true' : undefined, "aria-label": this.hasInteractiveLabel ? this.resolvedLabel : undefined, "aria-hidden": this.hasInteractiveLabel ? undefined : 'true', onClick: this.hasInteractiveLabel ? this.toggleSelected : undefined }, index.h("span", { key: '1319aed0d2e9191624f41d8bc9c3e942ee2aa151', class: "leading-icon", "aria-hidden": "true" }, this.leadingIcon && (index.h("nv-icon", { key: '37b314abc0b385ba86d482312eb7e45b281f2705', name: this.leadingIcon, size: "xs" })), index.h("slot", { key: 'c61fb778c205c2dc7e87482c4650cb776ae46025', name: "leading-icon" })), index.h("span", { key: '4908da1bdada3803d029ca0757f9c064ae4d39ff', class: "label" }, this.resolvedLabel), this.selected && (index.h("span", { key: '3dcfab23e115665d403c1ba15ac6c74cc24e42ed', class: "trailing-icon", "aria-hidden": "true" }, index.h("nv-icon", { key: '2447fe8fc1b24acf95fa5b35bd167010173df92e', name: "check", size: "xs" })))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "selected": [{
+                "handleTabIndexAffectingChanges": 0
+            }],
+        "disabled": [{
+                "handleTabIndexAffectingChanges": 0
+            }],
+        "label": [{
+                "handleTabIndexAffectingChanges": 0
+            }],
+        "pillAriaRole": [{
+                "handleTabIndexAffectingChanges": 0
+            }]
+    }; }
+};
+NvPill.pendingRadioGroupSyncs = new WeakMap();
+NvPill.radioGroupTabIndexCache = new WeakMap();
+NvPill.style = nvPillCss();
+
+exports.nv_pill = NvPill;

package/dist/cjs/{nv-popover.entry-BlpxQ9j0.js → nv-popover.entry-Dkn58xz1.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.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');
@@ -1962,7 +1962,7 @@ const NvPopover = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'bf65e878d126fd511b574bf0262dde4f60e89750' }, index.h("slot", { key: '5482a6bc3d6eb3edfa6653623f6c3024c6d150be', name: "trigger" }), index.h("div", { key: '6cd445d44ad05def95647d2898dc19092716a8ee', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'b23f0f9709f733a44d239a05b99f965d5ba036fb', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: '423901f5afaf3418edc8870b4de7b113151c685d', name: "content" }))));
+        return (index.h(index.Host, { key: '1a604043f59c8aa04237b6d03838125079ac5c49' }, index.h("slot", { key: 'c22461b3d5050f7b502635221cbe17c03ef425a9', name: "trigger" }), index.h("div", { key: '58a438db8308be12d854afe3deda462d4ae528fb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (index.h("div", { key: 'af18bf4b8700484ca989a8d45da8295e8d11ea2e', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), index.h("slot", { key: 'f3308bfc01d5a4f954a1f0b822cf378cd874f9bd', name: "content" }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-row.entry-CDE3oX8X.js → nv-row.entry-C-Pu-4d5.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvRow = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'dd18c6bf2c540a0f9389d32c01ce1bf19417e15a' }, index.h("slot", { key: '2bae51fa253dd71ff2318af8538a64200b7dfef4' })));
+        return (index.h(index.Host, { key: 'f19fb4030becd15fb3cc8f6d3a7e3a04d8a172e4' }, index.h("slot", { key: 'e1f3ae7b01b0a66874ea6af627a503bed92e7f82' })));
     }
 };
 NvRow.style = nvRowCss();

package/dist/cjs/{nv-sidebar.entry-CvQNzq1H.js → nv-sidebar.entry-BCPSmV8X.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -324,9 +324,9 @@ const NvSidebar = class {
         const isCollapsed = this.type === 'collapsible' && !this.open;
         const showResizeHandle = this.resizable && !isCollapsed;
         const [ariaValueMin, ariaValueMax] = this.getBounds();
-        return (index.h(index.Host, { key: '6d43cb441e9477d4146d44af59365848dbbee875', role: "navigation", collapsed: isCollapsed ? true : undefined, resizing: this.resizing ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: 'f6c58fbbafdb759499dd5a52e45eebc9ed6e5f4a', class: "nv-sidebar-container" }, index.h("slot", { key: '9ebf341658bb5631858390e3c76e274de72b5448' })), this.type === 'collapsible' && (index.h("button", { key: '1fd482c9157d47a5852395eb99a65f044f3db76a', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: 'cd0a51cd731fc8c703256c3b781e0f20b14a3e2f', name: this.open
+        return (index.h(index.Host, { key: 'f584d8b2007d46a966b1d5ea00ccc20ffdb7a566', role: "navigation", collapsed: isCollapsed ? true : undefined, resizing: this.resizing ? true : undefined, "notification-intention": this.notificationIntention, "notification-emphasis": this.notificationEmphasis, "aria-expanded": this.type === 'collapsible' ? String(this.open) : undefined }, index.h("div", { key: 'b4264b03e34c809616d492519146d4be4c6e9199', class: "nv-sidebar-container" }, index.h("slot", { key: 'b272545553a32d154b1d994057957ad6ef5f0413' })), this.type === 'collapsible' && (index.h("button", { key: '0c3ee094010027fc2036974116087c64dc8cf6c5', class: "nv-sidebar-toggle", onClick: this.handleToggle, "aria-label": this.open ? 'Collapse sidebar' : 'Expand sidebar' }, index.h("nv-icon", { key: '3bfcf6301a5376ff9a144912af82e1b83ed3b617', name: this.open
                 ? 'layout-sidebar-left-collapse'
-                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (index.h("div", { key: '75fe0b6d98ad9558b9003c541f255f84a41dbf27', class: "nv-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", "aria-valuenow": this.getAriaValueNow(), "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, tabIndex: 0, onPointerDown: this.handleResizeStart, onPointerMove: this.handleResizeMove, onPointerUp: this.handleResizeEnd, onPointerCancel: this.handleResizeCancel, onKeyDown: this.handleResizeKeyDown }))));
+                : 'layout-sidebar-right-collapse', size: "sm" }))), showResizeHandle && (index.h("div", { key: '12a6e9a907edd25b2b1adf52c831141905f3369b', class: "nv-sidebar-resize-handle", role: "separator", "aria-orientation": "vertical", "aria-label": "Resize sidebar", "aria-valuenow": this.getAriaValueNow(), "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, tabIndex: 0, onPointerDown: this.handleResizeStart, onPointerMove: this.handleResizeMove, onPointerUp: this.handleResizeEnd, onPointerCancel: this.handleResizeCancel, onKeyDown: this.handleResizeKeyDown }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-sidebarcontent.entry-DIIupG0e.js → nv-sidebarcontent.entry-Dbk9Jp-R.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebarcontent = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '2460a0659ee45f37e92776ccf05a30a4bd58772f', role: "list" }, index.h("slot", { key: 'e7f41a9684461e8ee3fbc0388a6e1e80a33894ba' })));
+        return (index.h(index.Host, { key: '5e9ea9dabd866c1eeb822fb9ff0f240f9ed7baf6', role: "list" }, index.h("slot", { key: '9c196e39fccdce97a4abb97c78c4e4989a9d0a2f' })));
     }
 };
 NvSidebarcontent.style = nvSidebarcontentCss();

package/dist/cjs/{nv-sidebardivider.entry-CqdP5bFW.js → nv-sidebardivider.entry-BSbCqQ-I.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebardivider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return index.h(index.Host, { key: '479568a0cd52812e71cfc721ddd7e2af3da0762d', role: "separator", "aria-orientation": "horizontal" });
+        return index.h(index.Host, { key: 'c72803cbb9850b35168a96482d9c23019de96424', role: "separator", "aria-orientation": "horizontal" });
     }
 };
 NvSidebardivider.style = nvSidebardividerCss();

package/dist/cjs/{nv-sidebarfooter.entry-DmFTTam-.js → nv-sidebarfooter.entry-DrYkZsT7.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebarfooter = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e678899934cfdb9b0c5433d3a22b23e73728ab46' }, index.h("slot", { key: '39e4a8351deb008e9672a3e90c2f2c51196a2021' })));
+        return (index.h(index.Host, { key: '77a05cf3a036b84ac31632c96c988bdf9264909c' }, index.h("slot", { key: '9553a50d609f7f03fc5cca08833c9db2949371bf' })));
     }
 };
 NvSidebarfooter.style = nvSidebarfooterCss();

package/dist/cjs/{nv-sidebargroup.entry-BXhwQ7Gw.js → nv-sidebargroup.entry-XUiruLr8.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -15,7 +15,7 @@ const NvSidebargroup = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'aa466d5d04f8f349c5f40b2705ce3ca07dcc0733', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '4460638eaac697aaba09e634bebc895dfeac43c8', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '4bfb3047dd95cb445797068c6915860b372a0864' })));
+        return (index.h(index.Host, { key: '94ff9b0f5a9b4c99a52f1259e3d7b0c6227b14a3', role: "group", "aria-label": this.label }, this.label && index.h("div", { key: '9a83d5a98fdd1d73b84b7a217c70ef279e69fa4a', class: "nv-sidebargroup-label" }, this.label), index.h("slot", { key: '4e987ce6b98fadced75ccc814b9ca9be80db0c8f' })));
     }
 };
 NvSidebargroup.style = nvSidebargroupCss();

package/dist/cjs/{nv-sidebarheader.entry-BeofV5mi.js → nv-sidebarheader.entry-LY9keSTe.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -14,7 +14,7 @@ const NvSidebarheader = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '058b1681ff0e0a35d96b3f5b27444853211eb067' }, index.h("slot", { key: '7b2f91201fe6ae8325dcfd07fae8f71cc15ffea1' })));
+        return (index.h(index.Host, { key: '4a2c70f79c4702dfd0bbbb5ab193382ad27d5522' }, index.h("slot", { key: '3c8c9ab5bc2837ed011d630b17c111eb7d091433' })));
     }
 };
 NvSidebarheader.style = nvSidebarheaderCss();

package/dist/cjs/{nv-sidebarlogo.entry-DbKRctk4.js → nv-sidebarlogo.entry-CXTBFLAn.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -24,7 +24,7 @@ const NvSidebarlogo = class {
     render() {
         const logoSrc = this.logo || this.defaultLogo;
         const collapsedLogoSrc = this.collapsedLogo || this.defaultCollapsedLogo;
-        return (index.h(index.Host, { key: '1b61ccdfac0bf190f46b9750c0d64dd594982446' }, index.h("div", { key: '57e98866efe588eb18a6e9ec89a4bc1a43129598', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'b682703b4343aa2ab1db7f9d312e238acd2af008', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: '0c01b944f5dabbb3120c890651b40724edbdae29', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), index.h("slot", { key: '9f6cb193bc61463f827e8bb8a39aaac8c37d3049', name: "label" }), this.label && index.h("span", { key: '1610d7896bcdce509fd601f3dfb4b6a59fcebac8', class: "nv-sidebarlogo-title" }, this.label))));
+        return (index.h(index.Host, { key: 'ff93a7354c92b3fc7a9f35d89331537e0ed93209' }, index.h("div", { key: '7304b9c975b1499c4719da252d7c98826e81b559', class: "nv-sidebarlogo-container" }, index.h("img", { key: 'e1955ccfba4573bc834b0db681c1841daedef5c3', src: logoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-full" }), index.h("img", { key: 'b02a31dbb3a61509bae66043feab0987a5bc7517', src: collapsedLogoSrc, alt: this.label || 'Logo', class: "nv-sidebarlogo-collapsed" }), index.h("slot", { key: '9cf5c77752c1078ec4a2d75e186a626094f05d33', name: "label" }), this.label && index.h("span", { key: '0f738654eeea4dafe7ab171cd2c575245775fc6d', class: "nv-sidebarlogo-title" }, this.label))));
     }
 };
 NvSidebarlogo.style = nvSidebarlogoCss();

package/dist/cjs/{nv-sidebarnavitem.entry-DW0S4_CH.js → nv-sidebarnavitem.entry-D322CneD.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -276,7 +276,7 @@ const NvSidebarnavitem = class {
     render() {
         const showNotificationBullet = this.notificationCount !== undefined && this.notificationCount > 0;
         const notificationSize = this.isSidebarCollapsed ? 'reduced' : 'default';
-        return (index.h(index.Host, { key: '3fc0030b34570e6a62d5382ed1986d06978e7697', role: "listitem" }, index.h("div", { key: 'baf4236cf917c60945b1087b822ea62688fce7dd', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (index.h("div", { key: '43133ba47b9f79e13a1bff41e4bd6164167a324b', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '48a71113d4ee7e51a6888d24addd541adbb48bdd', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '0a89f49fa31f416b794280477c24c9db8133031d', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: '298e06f2a1649046e45ae7d50d233a43c592bda4', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: '8c12b2779f0a89b71ecf15f2a29e750eacadf940' })), index.h("div", { key: 'f2ba7eec185fe210f294568852474df4c5e9bc64', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '365e7ad5254d49ad453e0da7a6d8fda260f2f6c5', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: 'bf2453a2b92425b9fabbcf285d793da2f091aeb8', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'a2e411250b6d2e03c1e5cfc0feaf777be5d386e8', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '06ad06c721546fcefb86010c10faf213d6881601', class: "nv-sidebarnavitem-subitems", ref: el => {
+        return (index.h(index.Host, { key: 'b91fe5e893da97a5c0689676894e806fb7263a80', role: "listitem" }, index.h("div", { key: 'a8f8a3e65144a10884aa097edaaff2f49c17cf4a', class: "nv-sidebarnavitem-trigger", onClick: this.handleToggle, "aria-expanded": this.collapsible ? String(this.open) : undefined, "aria-current": this.active && !this.collapsible ? 'page' : undefined }, this.icon && (index.h("div", { key: '8c34b7e8b7fc41503aa1f0e7eea6270b5889e6da', class: "nv-sidebarnavitem-icon" }, index.h("nv-icon", { key: '73afc94a134d96da07322786025b5ac2334f53b4', name: this.icon, size: "md" }), showNotificationBullet && this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '93e5de4631e68dd5005778c56124a0ecc6338e81', count: this.notificationCount, size: notificationSize, contrastingBorder: true })))), index.h("div", { key: 'a3e2c46e1802d7ab16c3922ae56476b61bedf3c3', class: "nv-sidebarnavitem-content" }, index.h("slot", { key: 'f830c358b690bc90302dfa2c1053f39889412c8e' })), index.h("div", { key: 'dec2b6d2b86b8be336440a69049c206e30116bb3', class: "nv-sidebarnavitem-trailing" }, index.h("slot", { key: '4553629737f60012755f08f269466302524f9a21', name: "trailing" }), showNotificationBullet && !this.isSidebarCollapsed && (index.h("nv-notification-bullet", { key: '04e2408dccbee9b365e1e8b8efe77c674851d29e', count: this.notificationCount, size: notificationSize })), this.collapsible && (index.h("nv-icon", { key: 'b38dff75884b4696c146e8351cb91c5a33eda8c6', name: "chevron-down", size: "sm", class: "nv-sidebarnavitem-chevron" })))), this.collapsible && this.hasSubitems && (index.h("div", { key: '720f0050710f377a8cbb4258ebf95f8f3127dc36', class: "nv-sidebarnavitem-subitems", ref: el => {
                 // Only update ref and initialize if element changed or not yet initialized
                 if (el !== this.subitemsRef) {
                     this.subitemsRef = el;
@@ -291,7 +291,7 @@ const NvSidebarnavitem = class {
                         });
                     }
                 }
-            } }, index.h("slot", { key: '21ed17d8ab90541514ae0fa5e441d67f62200b6d', name: "subitems" })))));
+            } }, index.h("slot", { key: 'fe94b2867f472c3af6b71ce80da4a6bfac71dd39', name: "subitems" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/{nv-sidebarnavsubitem.entry-CfJXOLFL.js → nv-sidebarnavsubitem.entry-CUTyEkyb.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-CIduEXxx.js');
+var index = require('./index-DN55EpKb.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
@@ -27,7 +27,7 @@ const NvSidebarnavsubitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '4abfe038592a030c9f48e5f62d8fda0552b9eaa0', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: 'c6b5d4ad34ecfa7949c05e83acb5e594654f1e51', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: 'fc0478a26b8963ab9e647e8731c428525b45609e', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: '399e3b85453dd7f69e654080deb27abf833b31f6' })), index.h("div", { key: '98c5b35c9a275f371f5f0541de6720227a72e08c', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: '8d986d98f276372534beb7eb334cc09f90293042', name: "trailing" }))));
+        return (index.h(index.Host, { key: '8e9a0d7cf4959780fe7ab6d83430c4ec4506241b', role: "listitem", "aria-current": this.active ? 'page' : undefined }, index.h("div", { key: '46bf34f370de8886b792163a8adc1d671c3c726b', class: "nv-sidebarnavsubitem-indicator" }), index.h("div", { key: '70d5a923d8ad647639629e889a06ce0b85029b3e', class: "nv-sidebarnavsubitem-content" }, index.h("slot", { key: '64e1bc7e2e88607b8d4db1330fa281ea555551bc' })), index.h("div", { key: '55ca89e4b66d7d63d48bbbac83d882fb791621a8', class: "nv-sidebarnavsubitem-trailing" }, index.h("slot", { key: 'd3e35d06eac31658fa029f091e1696136383698f', name: "trailing" }))));
     }
 };
 NvSidebarnavsubitem.style = nvSidebarnavsubitemCss();