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

package/dist/collection/components/nv-accordion/nv-accordion.docs.js

@@ -234,4 +234,3 @@ const NvAccordionDocs = {
     ],
 };
 export default NvAccordionDocs;
-//# sourceMappingURL=nv-accordion.docs.js.map

package/dist/collection/components/nv-accordion/nv-accordion.js

@@ -93,7 +93,6 @@ export class NvAccordion {
             forceUpdate(item);
         });
     }
-    /* eslint-disable nova/native-event-listener */
     /**
      * Listens to itemToggle events from nv-accordion-item elements
      * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
@@ -113,7 +112,6 @@ export class NvAccordion {
             console.warn('[onItemToggle] Target item not found in items list');
         }
     }
-    /* eslint-enable nova/native-event-listener */
     //#endregion METHODS
     /****************************************************************************/
     //#region WATCHERS
@@ -157,7 +155,7 @@ export class NvAccordion {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b498df032480f7b961883ad963ea1c7729e964cb', role: "list", class: "nv-accordion" }, this.data?.length ? (this.data.map((item, i) => (h("nv-accordion-item", { key: item.id ?? i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (h("div", { slot: "header" }, h("div", { class: "nv-accordion-item__header-content" }, h("span", { class: "nv-accordion-item__title" }, item.title), h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, h("div", { slot: "content" }, item.content), item.footer && h("div", { slot: "footer" }, item.footer))))) : (h("slot", null))));
+        return (h(Host, { key: '20a8663e2ff17d685423567ee2ff29b96d4ddef2', role: "list", class: "nv-accordion" }, this.data?.length ? (this.data.map((item, i) => (h("nv-accordion-item", { key: item.id ?? i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (h("div", { slot: "header" }, h("div", { class: "nv-accordion-item__header-content" }, h("span", { class: "nv-accordion-item__title" }, item.title), h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, h("div", { slot: "content" }, item.content), item.footer && h("div", { slot: "footer" }, item.footer))))) : (h("slot", null))));
     }
     static get is() { return "nv-accordion"; }
     static get originalStyleUrls() {
@@ -328,4 +326,3 @@ export class NvAccordion {
             }];
     }
 }
-//# sourceMappingURL=nv-accordion.js.map

package/dist/collection/components/nv-accordion-item/nv-accordion-item.docs.js

@@ -3,4 +3,3 @@ const NvAccordionItemDocs = {
     skip: true,
 };
 export default NvAccordionItemDocs;
-//# sourceMappingURL=nv-accordion-item.docs.js.map

package/dist/collection/components/nv-accordion-item/nv-accordion-item.js

@@ -21,7 +21,6 @@ export class NvAccordionItem {
          * Parent expansion mode (accordion or multi)
          */
         this.mode = 'accordion';
-        /* eslint-enable nova/event-bubbling */
         //#endregion EVENTS
         /****************************************************************************/
         //#region STATE
@@ -192,12 +191,12 @@ export class NvAccordionItem {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2e0becd0e89aabb8e0b652a48102a64c1eb97203', class: {
+        return (h(Host, { key: '0105972617975546456bc611209e7aa3e233833e', class: {
                 'nv-accordion-item': true,
                 'is-open': this.currentOpenState,
                 'is-disabled': this.disabled,
                 'is-animating': this.isAnimating,
-            }, role: "listitem", "aria-expanded": this.currentOpenState ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'f267eed06e3bc21f50f435cd7cd17b2fe35e17ac', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, h("slot", { key: '9abeaede22eaad412e4a127f6fc301547a9ace8d', name: "header" }, h("div", { key: '3ab6c2c3869293545663260b2516dec66d90cf7b', class: "nv-accordion-item__header-content" }, this.itemTitle && (h("span", { key: '298cc19aa800d5a1d787571c8195a038df767dd8', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (h("span", { key: 'f3428043b7020d065a4e4845eea84ab7b24810eb', class: "nv-accordion-item__subtitle" }, this.subtitle)))), h("nv-iconbutton", { key: '17956b3a0530a5d32086fb0ff08d41b6c82c53e0', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-controls": "content", "aria-label": this.currentOpenState ? 'Close the section' : 'Open the section' })), h("div", { key: '9a417daa4d79b380c949737732ce7a8ecb84e2fc', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, h("div", { key: '6dcdfcc391faa485b38f23cc2146af950fc6e367', class: "nv-accordion-item__content-inner" }, h("slot", { key: '2440c14ca77420204c556e7cfb3094205d192bb7', name: "content" })))));
+            }, role: "listitem", "aria-expanded": this.currentOpenState ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, h("div", { key: 'c7475f319d5bf737fc0db2c3a127db409614440f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, h("slot", { key: '3bc7770b94ae5ac43bbe60bf95f54048e1b4627a', name: "header" }, h("div", { key: '4258d3bfba027886cc827e399c51776197312063', class: "nv-accordion-item__header-content" }, this.itemTitle && (h("span", { key: 'a14d303daef12c4db52c0944eba36f9aa6aeca37', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (h("span", { key: '814dc4ae5baa839b010dcd1e229d66e2a5f7af23', class: "nv-accordion-item__subtitle" }, this.subtitle)))), h("nv-iconbutton", { key: 'aeec0b17000461b24ed02cfc88f220a21dde38b5', emphasis: "low", size: "sm", shape: "square", name: this.chevronIconName, tabindex: this.disabled ? -1 : 0, onClick: this.handleIconClick, onKeyDown: this.handleHeaderKeyDown, "aria-controls": "content", "aria-label": this.currentOpenState ? 'Close the section' : 'Open the section' })), h("div", { key: 'fcc3b286b3a49a294f50a12516ffe345c666c1ac', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, h("div", { key: 'd31933c4e3111025fcfce99f5c57e7c6d0d15fd8', class: "nv-accordion-item__content-inner" }, h("slot", { key: '34252e6dded7011301840d3b1b7b9af0166c9f5c', name: "content" })))));
     }
     static get is() { return "nv-accordion-item"; }
     static get originalStyleUrls() {
@@ -385,4 +384,3 @@ export class NvAccordionItem {
             }];
     }
 }
-//# sourceMappingURL=nv-accordion-item.js.map

package/dist/collection/components/nv-alert/nv-alert.docs.js

@@ -80,4 +80,3 @@ const NvAlertDocs = {
     ],
 };
 export default NvAlertDocs;
-//# sourceMappingURL=nv-alert.docs.js.map

package/dist/collection/components/nv-alert/nv-alert.js

@@ -176,7 +176,8 @@ export class NvAlert {
                         "DeprecatedSemanticColors": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::DeprecatedSemanticColors"
+                            "id": "src/utils/constants.ts::DeprecatedSemanticColors",
+                            "referenceLocation": "DeprecatedSemanticColors"
                         }
                     }
                 },
@@ -204,7 +205,8 @@ export class NvAlert {
                         "FeedbackColors": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::FeedbackColors"
+                            "id": "src/utils/constants.ts::FeedbackColors",
+                            "referenceLocation": "FeedbackColors"
                         }
                     }
                 },
@@ -418,4 +420,3 @@ export class NvAlert {
             }];
     }
 }
-//# sourceMappingURL=nv-alert.js.map

package/dist/collection/components/nv-avatar/nv-avatar.docs.js

@@ -95,4 +95,3 @@ const NvAvatarDocs = {
     ],
 };
 export default NvAvatarDocs;
-//# sourceMappingURL=nv-avatar.docs.js.map

package/dist/collection/components/nv-avatar/nv-avatar.js

@@ -290,7 +290,8 @@ export class NvAvatar {
                         "SemanticSizes": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::SemanticSizes"
+                            "id": "src/utils/constants.ts::SemanticSizes",
+                            "referenceLocation": "SemanticSizes"
                         }
                     }
                 },
@@ -329,4 +330,3 @@ export class NvAvatar {
         };
     }
 }
-//# sourceMappingURL=nv-avatar.js.map

package/dist/collection/components/nv-badge/nv-badge.css

@@ -374,7 +374,10 @@ nv-badge.badge-petrol .close:focus-visible, nv-badge.badge-petrol .close:has(:fo
 nv-badge.badge-petrol nv-icon {
   color: var(--color-rainbow-8-icon);
 }
-nv-badge span {
+nv-badge .nv-badge-leading {
+  display: contents;
+}
+nv-badge .nv-badge-label {
   font-size: var(--font-size-xs);
   line-height: var(--line-height-xs) !important;
   text-align: center;

package/dist/collection/components/nv-badge/nv-badge.docs.js

@@ -137,4 +137,3 @@ const NvBadgeDocs = {
     ],
 };
 export default NvBadgeDocs;
-//# sourceMappingURL=nv-badge.docs.js.map

package/dist/collection/components/nv-badge/nv-badge.js

@@ -129,7 +129,9 @@ export class NvBadge {
                 'with-gap': this.dismissible || this.label,
                 'visually-hidden': this._isHidden,
                 'is-icon-only': this.isIconOnly,
-            }) }, h("slot", { key: '63909cdcb1edc9e685d1b60534d72ed3dd700d05', name: "leading-icon" }, this.leadIcon && h("nv-icon", { key: 'ca443b29509145863f0fc4a8f814c57669342d15', name: this.leadIcon, size: "sm" })), h("span", { key: 'fbae90db0aa23cf0d204b14002ca702ad3731b51', class: clsx({ 'visually-hidden': this.isIconOnly }) }, this.label, h("slot", { key: '93e818db9d012176d407b19097c7513d7d462053' })), this.dismissible && (h("button", { key: 'c48984564102d04914a967aa3f9a29defae62455', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '849a32c60019a99909e0383ad593fc1daf00dc59', name: "x", size: "sm" })))));
+            }) }, h("span", { key: '11cec03cc5f65c6def293b548d71ea53fd2ec2bb', class: "nv-badge-leading" }, this.leadIcon && h("nv-icon", { key: 'a9433930c4e7dd50d3abd34e1cd64b5b4eea9698', name: this.leadIcon, size: "sm" }), h("slot", { key: 'a93320c14a9e31b9b9796b5fb9cb03a04a2ea1d5', name: "leading-icon" })), h("span", { key: '5a8a3568cfbe2e9b61a42b3cd5b5056bd5c2563f', class: clsx('nv-badge-label', {
+                'visually-hidden': this.isIconOnly,
+            }) }, this.label, h("slot", { key: '4b0c4558957d4505208e2352382365b2f50810d1' })), this.dismissible && (h("button", { key: '945df330dcae40586ac02d349abc73131e8ce596', onClick: this.handleClose, class: "close", type: "button" }, h("nv-icon", { key: '37535be0818bc78809f5585841757dd992617753', name: "x", size: "sm" })))));
     }
     static get is() { return "nv-badge"; }
     static get originalStyleUrls() {
@@ -420,4 +422,3 @@ export class NvBadge {
             }];
     }
 }
-//# sourceMappingURL=nv-badge.js.map

package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.docs.js

@@ -3,4 +3,3 @@ const NvBreadcrumbDocs = {
     skip: true,
 };
 export default NvBreadcrumbDocs;
-//# sourceMappingURL=nv-breadcrumb.docs.js.map

package/dist/collection/components/nv-breadcrumb/nv-breadcrumb.js

@@ -1,4 +1,4 @@
-import { Host, h, forceUpdate } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import clsx from "clsx";
 /**
  * @slot default - Pass an icon, a link, or text to render the breadcrumb content.
@@ -17,21 +17,24 @@ export class NvBreadcrumb {
     //#endregion PROPERTIES
     /****************************************************************************/
     //#region LIFECYCLE
-    componentDidLoad() {
-        // Force a re-render to pass the popoverTrigger ref to the popovers
-        if (this.type === 'collapsed')
-            forceUpdate(this);
-    }
-    componentWillLoad() {
+    componentDidRender() {
         if (this.type === 'default' && this.tooltip) {
-            this.popoverTrigger = Array.from(this.el.children).find(child => child.getAttribute('slot') === null);
+            const trigger = this.defaultSlot?.nextSibling;
+            if (trigger && trigger !== this.toolTipRef)
+                this.toolTipRef.triggerElement = trigger;
+        }
+        if (this.type === 'collapsed') {
+            // <button ref={..}> does not rerender the component, so we need to
+            // manually assign the trigger
+            if (this.popoverRef)
+                this.popoverRef.triggerElement = this.popoverTrigger;
         }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'b0cfdee987585488bd49734900ee421b081e6df4', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", null)), this.tooltip && (h("nv-tooltip", { key: '970d9552c3f81bffd86889fc2ff169f73810507b', message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: '1b14ce172db49aaeb199d6801978f96204ba05a1', triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: 'b984309f9290bb4bcfed796200ffaad6e52a2b93', slot: "content" }, h("slot", { key: '189408f75e689b98b4cf9397074dbaefaecece9a' })))), h("span", { key: '62a4bed098620043b69f1e7dcf51db7de035f5fc', "data-scope": "separator" }, "/")));
+        return (h(Host, { key: '032880129d2acf89ed3e57367e357391a1e0848d', role: "listitem", "aria-current": this.current ? 'location' : undefined, class: clsx({ 'visually-hidden': this.current }) }, this.type === 'collapsed' ? (h("button", { ref: el => (this.popoverTrigger = el) }, "...")) : (h("slot", { ref: el => (this.defaultSlot = el) })), this.tooltip && (h("nv-tooltip", { key: '90cdd03fa067846b3f3fa8ff264899b6ca170485', ref: el => (this.toolTipRef = el), message: this.tooltip, triggerElement: this.popoverTrigger, placement: "top" })), this.type === 'collapsed' && (h("nv-popover", { key: 'acda8815ed5e216cf89cdd34323dd8211a8ea020', ref: el => (this.popoverRef = el), triggerMode: "click", groupName: "breadcrumbs", triggerElement: this.popoverTrigger }, h("ul", { key: '424396d17c2452cb6280aaa6446ee6f8ea52ea6e', slot: "content" }, h("slot", { key: '668bc1e090901e62c01079e4b058d3e6b044afd0' })))), h("span", { key: '1c84f3c4cf91cc976722a838188baae0521eb7f4', "data-scope": "separator" }, "/")));
     }
     static get is() { return "nv-breadcrumb"; }
     static get originalStyleUrls() {
@@ -108,4 +111,3 @@ export class NvBreadcrumb {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=nv-breadcrumb.js.map

package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.css

@@ -1,7 +1,4 @@
 nv-breadcrumbs {
-  display: block;
-}
-nv-breadcrumbs > ol {
   display: flex;
   flex-wrap: wrap;
   align-items: center;

package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.docs.js

@@ -30,4 +30,3 @@ const NvBreadcrumbsDocs = {
     ],
 };
 export default NvBreadcrumbsDocs;
-//# sourceMappingURL=nv-breadcrumbs.docs.js.map

package/dist/collection/components/nv-breadcrumbs/nv-breadcrumbs.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 export class NvBreadcrumbs {
     //#region RENDER
     render() {
-        return (h(Host, { key: '4337fe5161c0ce444001e1b92221f3adac26e4bf', role: "navigation", "aria-label": "breadcrumbs" }, h("ol", { key: '00d470eadfe879be525a4a4b7ec3368601a0697c' }, h("slot", { key: '2d012f152b49f33f399aa14dfb18a4c39265128c' }))));
+        return (h(Host, { key: 'f8221b9ae4d3a5fabedbe497fef43832fc498df4', role: "navigation", "aria-label": "breadcrumbs" }, h("slot", { key: '047683541469ee0490e296813cb7e303127ad200' })));
     }
     static get is() { return "nv-breadcrumbs"; }
     static get originalStyleUrls() {
@@ -19,4 +19,3 @@ export class NvBreadcrumbs {
         };
     }
 }
-//# sourceMappingURL=nv-breadcrumbs.js.map

package/dist/collection/components/nv-button/nv-button.docs.js

@@ -101,4 +101,3 @@ const NvButtonDocs = {
     ],
 };
 export default NvButtonDocs;
-//# sourceMappingURL=nv-button.docs.js.map

package/dist/collection/components/nv-button/nv-button.js

@@ -163,7 +163,8 @@ export class NvButton {
                         "ButtonSize": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonSize"
+                            "id": "src/utils/constants.ts::ButtonSize",
+                            "referenceLocation": "ButtonSize"
                         }
                     }
                 },
@@ -189,7 +190,8 @@ export class NvButton {
                         "ButtonEmphasis": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonEmphasis"
+                            "id": "src/utils/constants.ts::ButtonEmphasis",
+                            "referenceLocation": "ButtonEmphasis"
                         }
                     }
                 },
@@ -315,7 +317,8 @@ export class NvButton {
                         "ButtonType": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonType"
+                            "id": "src/utils/constants.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -393,4 +396,3 @@ export class NvButton {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=nv-button.js.map

package/dist/collection/components/nv-buttongroup/nv-buttongroup.docs.js

@@ -62,4 +62,3 @@ const NvButtongroupDocs = {
     ],
 };
 export default NvButtongroupDocs;
-//# sourceMappingURL=nv-buttongroup.docs.js.map

package/dist/collection/components/nv-buttongroup/nv-buttongroup.js

@@ -116,7 +116,8 @@ export class NvButtongroup {
                         "ButtonSize": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonSize"
+                            "id": "src/utils/constants.ts::ButtonSize",
+                            "referenceLocation": "ButtonSize"
                         }
                     }
                 },
@@ -142,7 +143,8 @@ export class NvButtongroup {
                         "ButtonEmphasis": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonEmphasis"
+                            "id": "src/utils/constants.ts::ButtonEmphasis",
+                            "referenceLocation": "ButtonEmphasis"
                         }
                     }
                 },
@@ -214,4 +216,3 @@ export class NvButtongroup {
             }];
     }
 }
-//# sourceMappingURL=nv-buttongroup.js.map

package/dist/collection/components/nv-buttongroup/nv-buttongroup.utils.js

@@ -83,4 +83,3 @@ export function forwardPropsToChildren(containerElement, props) {
         }
     });
 }
-//# sourceMappingURL=nv-buttongroup.utils.js.map

package/dist/collection/components/nv-buttongroup/styles/nv-buttongroup.css

@@ -13,11 +13,11 @@ nv-buttongroup[emphasis=lower] .group-item, nv-buttongroup[emphasis=lower] .grou
 nv-buttongroup:not([orientation=vertical]) .group-item:not(.last):not(.first) {
   border-radius: 0;
 }
-nv-buttongroup:not([orientation=vertical]) .group-item.first {
+nv-buttongroup:not([orientation=vertical]) .group-item.first:not(.last) {
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
-nv-buttongroup:not([orientation=vertical]) .group-item.last {
+nv-buttongroup:not([orientation=vertical]) .group-item.last:not(.first) {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
@@ -48,11 +48,11 @@ nv-buttongroup[orientation=vertical] .group-item {
 nv-buttongroup[orientation=vertical] .group-item:not(.last):not(.first) {
   border-radius: 0;
 }
-nv-buttongroup[orientation=vertical] .group-item.first {
+nv-buttongroup[orientation=vertical] .group-item.first:not(.last) {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-nv-buttongroup[orientation=vertical] .group-item.last {
+nv-buttongroup[orientation=vertical] .group-item.last:not(.first) {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
 }

package/dist/collection/components/nv-buttongroup/test/nv-buttongroup.utils.test.js

@@ -309,4 +309,3 @@ describe('nv-buttongroup -> utils', () => {
         });
     });
 });
-//# sourceMappingURL=nv-buttongroup.utils.test.js.map

package/dist/collection/components/nv-calendar/nv-calendar.css

@@ -5,6 +5,44 @@
 * Usage:
 * @include scrollbar();
 */
+/* TODO: integrate this logic in the proper structure */
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
+  background: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
+  border-color: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider[error] .slider-container .track-container .track .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-handler-background-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+
 nv-calendar {
   display: block;
 }
@@ -119,6 +157,77 @@ nv-calendar {
   justify-content: start;
   flex-grow: 1;
 }
+.date-controls select {
+  appearance: base-select;
+}
+.date-controls select::picker(select) {
+  appearance: base-select;
+  background-color: var(--components-popover-background);
+  border-color: var(--components-popover-border);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--popover-radius);
+  padding: var(--popover-padding-y) var(--popover-padding-x);
+  margin-top: var(--spacing-2);
+  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);
+}
+.date-controls select::picker-icon {
+  display: none;
+}
+.date-controls select option {
+  display: flex;
+  gap: var(--list-select-gap-y);
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  background-color: var(--components-list-select-option-background-default);
+  padding: var(--list-select-option-padding);
+  font-weight: var(--menu-contextual-item-font-weight);
+  font-size: var(--list-select-font-size);
+  line-height: var(--list-select-line-height);
+  color: var(--components-list-select-option-content-default);
+  border-radius: var(--list-select-option-radius);
+  transition: background-color 150ms ease-out, color 150ms ease-out;
+  cursor: pointer;
+}
+.date-controls select option:not(:first-of-type) {
+  margin-top: var(--list-select-gap-y);
+}
+.date-controls select option:hover, .date-controls select option:focus, .date-controls select option:focus-within {
+  background-color: var(--components-list-select-option-background-hover);
+  color: var(--components-list-select-option-content-hover);
+}
+.date-controls select option:checked {
+  background-color: var(--components-list-select-option-background-active);
+  color: var(--components-list-select-option-content-active);
+}
+.date-controls select option:checked::after {
+  order: 1;
+  margin-left: auto;
+  content: "";
+  display: inline-block;
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+.date-controls select option::checkmark {
+  display: none;
+}
+.date-controls select option:disabled, .date-controls select option:checked:disabled {
+  color: var(--components-list-select-option-content-disabled);
+  background-color: var(--components-list-select-option-background-default);
+}
+.date-controls select option {
+  padding: calc(var(--list-dropdown-item-padding-y) * 0.5) calc(var(--list-dropdown-item-padding-x) * 0.8);
+}
 .date-controls .month-select,
 .date-controls .year-input {
   background: transparent !important;
@@ -221,7 +330,7 @@ nv-calendar {
   background: var(--components-calendar-cell-background-hover);
   color: var(--components-calendar-cell-text-hover);
 }
-.day.selected, .day.selected:hover .day.is-today.selected, .day.is-today.selected:hover {
+.day.selected, .day.selected:hover, .day.is-today.selected, .day.is-today.selected:hover {
   background: var(--components-calendar-cell-background-selected);
   color: var(--components-calendar-cell-text-selected) !important;
 }

package/dist/collection/components/nv-calendar/nv-calendar.docs.js

@@ -653,4 +653,3 @@ const NvCalendarDocs = {
     ],
 };
 export default NvCalendarDocs;
-//# sourceMappingURL=nv-calendar.docs.js.map

package/dist/collection/components/nv-calendar/nv-calendar.js

@@ -28,7 +28,6 @@ export class NvCalendar {
          * - Range: "2025-03-15,2025-03-20"
          * @default ""
          */
-        // eslint-disable-next-line @stencil-community/strict-mutable
         this.value = '';
         /**
          * Locale for date formatting
@@ -550,7 +549,6 @@ export class NvCalendar {
                 // Legacy support (deprecated) - sync props
                 const legacyRange = { start: startFormatted, end: endFormatted };
                 this.rangeDateChange.emit(legacyRange);
-                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.rangeValue = legacyRange;
                 if (!this.showActions) {
                     const event = new CustomEvent('closePopover', {
@@ -575,9 +573,7 @@ export class NvCalendar {
         this.resetSelection = () => {
             if (this.selectionType === 'single') {
                 this.selectedDate = null;
-                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.singleValue = null;
-                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.value = '';
                 this.singleDateChange.emit('');
                 this.valueChanged.emit('');
@@ -585,9 +581,7 @@ export class NvCalendar {
             else {
                 this.startDate = null;
                 this.endDate = null;
-                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.rangeValue = null;
-                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.value = '';
                 this.rangeDateChange.emit({ start: '', end: '' });
                 this.valueChanged.emit('');
@@ -602,7 +596,6 @@ export class NvCalendar {
                     dateFormat: this.dateFormat,
                 });
                 this.singleDateChange.emit(dateStr);
-                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.singleValue = dateStr;
                 const event = new CustomEvent('closePopover', {
                     bubbles: true,
@@ -617,7 +610,6 @@ export class NvCalendar {
                     start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
                     end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
                 });
-                // eslint-disable-next-line @stencil-community/strict-mutable
                 this.rangeValue = {
                     start: formatDate(this.startDate, { dateFormat: this.dateFormat }),
                     end: formatDate(this.endDate, { dateFormat: this.dateFormat }),
@@ -789,6 +781,13 @@ export class NvCalendar {
         // Initialize from unified value prop if provided
         if (this.value) {
             this.parseUnifiedValue(this.value);
+            // Force navigation to initial value date (ignore data-prevent-navigation for initial load)
+            if (this.selectionType === 'single' && this.selectedDate) {
+                this.currentDate = this.selectedDate;
+            }
+            else if (this.selectionType === 'range' && this.startDate) {
+                this.currentDate = this.startDate;
+            }
         }
         else if (this.selectionType === 'single' && this.singleValue) {
             this.selectedDate = parseDate(this.singleValue, this.dateFormat);
@@ -803,7 +802,6 @@ export class NvCalendar {
                     this.currentDate = startDate;
                     if (swapped) {
                         // If dates were swapped, update the rangeValue property
-                        // eslint-disable-next-line @stencil-community/strict-mutable
                         this.rangeValue = {
                             start: formatDate(startDate, { dateFormat: this.dateFormat }),
                             end: formatDate(endDate, { dateFormat: this.dateFormat }),
@@ -907,8 +905,8 @@ export class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (h(Host, { key: '18793334c6b01685f8c42acb0709bb3b35a1d466' }, h("div", { key: '2fa622b5027d4fc94732e0826fac044056e8bca1', class: "datepicker-root" }, h("div", { key: '4c88d823b5a720d3529bc199014b5e498ba1a701', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: 'e6be82fb79db589171e4db2beb640fb005dd603f', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
-            this.hasActions) && (h("div", { key: '5991593c0ae9128c3dfea099db2864a37105c9a4', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '5e92296fdc3732ea7f241a5ce381e0234330e7a3' })));
+        return (h(Host, { key: '4e8b7b83c32a4defd9620558ebe6b2d45c63c509' }, h("div", { key: '65b9f1a93cae9fb77d64d5b34333c7775b99ef65', class: "datepicker-root" }, h("div", { key: '54dde61b295e3ee84e6917634bdcdad36d8aed98', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, h("div", { key: '8423c5ff77f07f03d9665f2575855ba0a2540fbc', class: `datepicker-wrapper ${this.numberOfCalendars === 1 ? 'single' : ''}` }, this.shortcutsPlacement === 'left' && this.renderShortcuts(), Array.from({ length: this.numberOfCalendars }, (_, index) => this.renderCalendar(index, index)), this.shortcutsPlacement === 'right' && this.renderShortcuts()), ((this.hasShortcuts && this.shortcutsPlacement === 'bottom') ||
+            this.hasActions) && (h("div", { key: 'd49a6c9077a4d4795d00a7221ff5ed76980d8a92', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), h("slot", { key: '52ef97f13e630ad31b80ebd53a87f07f18f458d4' })));
     }
     static get is() { return "nv-calendar"; }
     static get originalStyleUrls() {
@@ -1396,4 +1394,3 @@ export class NvCalendar {
             }];
     }
 }
-//# sourceMappingURL=nv-calendar.js.map

package/dist/collection/components/nv-calendar/nv-calendar.utils.js

@@ -272,4 +272,3 @@ export const isHoverRangeValid = (startDate, hoverDate, min, max, parsedDisabled
     }
     return true;
 };
-//# sourceMappingURL=nv-calendar.utils.js.map

package/dist/collection/components/nv-calendar/partials/calendar-actions.js

@@ -8,4 +8,3 @@ export const CalendarActions = props => {
     const { onReset, onConfirm, cancelLabel = 'Cancel', primaryLabel = 'OK', useSlot = false, } = props;
     return (h("div", { class: "datepicker-actions" }, useSlot ? (h("slot", { name: "actions" }, h("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, cancelLabel), h("nv-button", { size: "xs", onClick: onConfirm }, primaryLabel))) : (h("div", { class: "actions-container" }, h("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, cancelLabel), h("nv-button", { size: "xs", onClick: onConfirm }, primaryLabel)))));
 };
-//# sourceMappingURL=calendar-actions.js.map

package/dist/collection/components/nv-calendar/partials/calendar-grid.js

@@ -27,4 +27,3 @@ export const CalendarGrid = props => {
         return (h(DayCell, { date: date, dayOfMonth: day.dayOfMonth, isCurrentMonth: day.isCurrentMonth, isSelected: isSelected, isInRange: isInRange, isStart: isStart, isEnd: isEnd, isToday: isTodayDate, isDisabled: day.isDisabled, selectionType: selectionType, onClick: onDayClick, onDayHover: onDayHover, isInHoverRange: inHoverRange, isHoverRangeValid: hoverRangeValid }));
     }))));
 };
-//# sourceMappingURL=calendar-grid.js.map

package/dist/collection/components/nv-calendar/partials/calendar-header.js

@@ -35,4 +35,3 @@ export const CalendarHeader = props => {
         Math.floor((currentDate.getUTCMonth() + monthOffset) / 12);
     return (h("div", { class: "header" }, numberOfCalendars > 1 && calendarIndex === 0 && (h("nv-iconbutton", { class: "nav-left", emphasis: "lower", name: "chevron-left", onClick: createNavigationHandler(-1) })), h("div", { class: "date-controls" }, h("select", { class: "month-select mr-4", onChange: createMonthSelectHandler(monthOffset) }, months.map(month => (h("option", { key: month.value, value: month.value, selected: month.value === currentMonth }, month.label)))), h("input", { type: "number", class: "year-input", min: "1950", max: "2100", value: currentYear, onChange: createYearChangeHandler(monthOffset) })), numberOfCalendars === 1 && (h("div", { class: "nav-buttons" }, h("nv-iconbutton", { emphasis: "lower", name: "chevron-left", onClick: createNavigationHandler(-1) }), h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: createNavigationHandler(1) }))), numberOfCalendars > 1 && calendarIndex === numberOfCalendars - 1 && (h("nv-iconbutton", { emphasis: "lower", name: "chevron-right", onClick: createNavigationHandler(1), class: "nav-right" }))));
 };
-//# sourceMappingURL=calendar-header.js.map

package/dist/collection/components/nv-calendar/partials/calendar-shortcuts.js

@@ -19,4 +19,3 @@ export const CalendarShortcuts = props => {
     };
     return (h("div", { class: `shortcuts-container shortcuts-placement-${placement}` }, shortcuts.map((shortcut, index) => (h("nv-button", { key: `shortcut-${index}`, emphasis: "lower", size: "xs", "aria-label": shortcut.label, onClick: createShortcutHandler(shortcut) }, shortcut.label)))));
 };
-//# sourceMappingURL=calendar-shortcuts.js.map