@nova-design-system/nova-webcomponents 3.12.0 → 3.13.0

package/hydrate/index.js

@@ -2745,13 +2745,14 @@ class NvAccordion {
          * Expansion mode: 'accordion' (single open) or 'multi' (multiple open)
          */
         this.mode = 'accordion';
+        /**
+         * Index of open items (external control possible)
+         */
+        this.openIndexes = [];
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
-        /**
-         * Internal index of open items (not exposed)
-         */
-        this.internalOpenIndexes = [];
+        this.updatingFromInternal = false;
     }
     //#endregion EVENTS
     /****************************************************************************/
@@ -2776,113 +2777,125 @@ class NvAccordion {
      * @param {boolean} [forceOpen] Force open (true) or close (false)
      */
     toggleItem(index, forceOpen) {
-        let openIndexes = this.openIndexes !== undefined
-            ? [...this.openIndexes]
-            : [...(this.internalOpenIndexes || [])];
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        const item = items[index];
+        if (!item || item.disabled) {
+            console.warn('[toggleItem] Item not found or disabled:', index);
+            this.openChanged.emit({ openIndexes: [...(this.openIndexes || [])] });
+            return;
+        }
+        let openIndexes = [...(this.openIndexes || [])];
         const isOpen = openIndexes.includes(index);
         if (this.mode === 'accordion') {
-            openIndexes = forceOpen === false || isOpen ? [] : [index];
+            openIndexes =
+                forceOpen === false || (forceOpen === undefined && isOpen)
+                    ? []
+                    : [index];
         }
         else {
             if (forceOpen === false) {
                 openIndexes = openIndexes.filter(i => i !== index);
             }
-            else if (!isOpen) {
+            else if (forceOpen === true && !isOpen) {
                 openIndexes.push(index);
             }
+            else if (forceOpen === undefined) {
+                openIndexes = isOpen
+                    ? openIndexes.filter(i => i !== index)
+                    : [...openIndexes, index];
+            }
         }
-        this.internalOpenIndexes = openIndexes;
-        this.openChanged.emit({ openIndexes });
-        if (this.openIndexes !== undefined) {
-            this.openIndexes =
-                this.mode === 'accordion'
-                    ? [openIndexes[0]].filter(x => x !== undefined)
-                    : [...openIndexes];
-        }
-        // Update child elements state - for both data and slot usage
+        this.updatingFromInternal = true;
+        this.openIndexes = [...openIndexes];
         this.updateChildrenState();
+        this.updatingFromInternal = false;
+        this.openChanged.emit({ openIndexes: [...openIndexes] });
     }
     /**
-     * Updates the open state of child elements based on internalOpenIndexes
+     * Updates the open state of child elements based on openIndexes
      */
     async updateChildrenState() {
-        // Force a re-render by updating the state
-        this.internalOpenIndexes = [...(this.internalOpenIndexes || [])];
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        items.forEach((item, i) => {
+            const shouldBeOpen = (this.openIndexes || []).includes(i);
+            item.open = shouldBeOpen;
+            item.mode = this.mode;
+            item.setAttribute('aria-expanded', shouldBeOpen ? 'true' : 'false');
+        });
     }
     /**
      * Listens to itemToggle events from nv-accordion-item elements
      * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
      */
     onItemToggle(event) {
-        // Find the index of the item that emitted the event
+        if (this.updatingFromInternal) {
+            return;
+        }
         const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
         const targetItem = event.target;
         const index = items.indexOf(targetItem);
         if (index !== -1) {
-            // If the event comes from an item that is opening, handle accordion mode
-            if (event.detail === true) {
-                if (this.mode === 'accordion') {
-                    // Close all other items
-                    items.forEach((item, i) => {
-                        if (i !== index && item.open) {
-                            item.open = false;
-                        }
-                    });
-                    this.internalOpenIndexes = [index];
-                }
-                else {
-                    // Add index to internalOpenIndexes if not already present
-                    if (!this.internalOpenIndexes.includes(index)) {
-                        this.internalOpenIndexes = [...this.internalOpenIndexes, index];
-                    }
-                }
-            }
-            else {
-                // If the item is closing, remove it from internalOpenIndexes
-                this.internalOpenIndexes = this.internalOpenIndexes.filter(i => i !== index);
-            }
-            // Emit openChanged event
-            this.openChanged.emit({ openIndexes: this.internalOpenIndexes });
-            if (this.openIndexes !== undefined) {
-                this.openIndexes =
-                    this.mode === 'accordion'
-                        ? [this.internalOpenIndexes[0]].filter(x => x !== undefined)
-                        : [...this.internalOpenIndexes];
-            }
+            this.toggleItem(index, event.detail);
+        }
+        else {
+            console.warn('[onItemToggle] Target item not found in items list');
         }
     }
     //#endregion METHODS
     /****************************************************************************/
     //#region WATCHERS
+    onOpenIndexesChange(newValue, oldValue) {
+        if (!this.updatingFromInternal &&
+            newValue !== undefined &&
+            newValue !== oldValue) {
+            this.updateChildrenState();
+        }
+    }
+    onModeChange() {
+        this.updateChildrenState();
+    }
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        if (this.openIndexes !== undefined) {
-            this.internalOpenIndexes = [...this.openIndexes];
-        }
-    }
-    componentDidLoad() {
-        // If using direct child elements, initialize their state
-        if (!this.data || this.data.length === 0) {
-            this.updateChildrenState();
+        if (this.openIndexes === undefined) {
+            this.openIndexes = [];
         }
     }
-    componentWillUpdate() {
-        if (this.openIndexes !== undefined) {
-            this.internalOpenIndexes = [...this.openIndexes];
-        }
+    async componentDidLoad() {
+        var _a;
+        const items = Array.from(this.el.querySelectorAll('nv-accordion-item'));
+        // Only initialize openIndexes from child items if no data is provided and openIndexes is not explicitly set
+        if (!((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) &&
+            (!this.openIndexes || this.openIndexes.length === 0)) {
+            const childOpenIndexes = items
+                .map((item, i) => (item.hasAttribute('open') || item.open ? i : -1))
+                .filter(i => i !== -1);
+            if (childOpenIndexes.length > 0) {
+                this.updatingFromInternal = true;
+                this.openIndexes = [...childOpenIndexes];
+                this.updatingFromInternal = false;
+                this.openChanged.emit({ openIndexes: [...this.openIndexes] });
+            }
+        }
+        // Ensure children are in sync with current openIndexes state
+        await this.updateChildrenState();
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'a6cb21b274024a00e60e0d0db780f25fab6e5bc2', role: "list", class: "nv-accordion" }, this.data && this.data.length > 0 ? (this.data.map((item, i) => {
+        var _a;
+        return (hAsync(Host, { key: 'b5c36f19bcbd0d06e9d924ae6f9630b8b6cae05a', role: "list", class: "nv-accordion" }, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.length) ? (this.data.map((item, i) => {
             var _a;
-            return (hAsync("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.internalOpenIndexes || []).includes(i) }, item.subtitle ? (hAsync("div", { slot: "header" }, hAsync("div", { class: "nv-accordion-item__header-content" }, hAsync("span", { class: "nv-accordion-item__title" }, item.title), hAsync("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, hAsync("div", { slot: "content" }, item.content), item.footer && hAsync("div", { slot: "footer" }, item.footer)));
+            return (hAsync("nv-accordion-item", { key: (_a = item.id) !== null && _a !== void 0 ? _a : i, itemTitle: item.title, disabled: item.disabled, open: (this.openIndexes || []).includes(i), mode: this.mode }, item.subtitle ? (hAsync("div", { slot: "header" }, hAsync("div", { class: "nv-accordion-item__header-content" }, hAsync("span", { class: "nv-accordion-item__title" }, item.title), hAsync("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, hAsync("div", { slot: "content" }, item.content), item.footer && hAsync("div", { slot: "footer" }, item.footer)));
         })) : (hAsync("slot", null))));
     }
     get el() { return getElement(this); }
+    static get watchers() { return {
+        "openIndexes": ["onOpenIndexesChange"],
+        "mode": ["onModeChange"]
+    }; }
     static get style() { return NvAccordionStyle0; }
     static get cmpMeta() { return {
         "$flags$": 4,
@@ -2891,7 +2904,7 @@ class NvAccordion {
             "data": [16],
             "mode": [513],
             "openIndexes": [1040],
-            "internalOpenIndexes": [32],
+            "updatingFromInternal": [32],
             "open": [64],
             "close": [64]
         },
@@ -3551,8 +3564,9 @@ const DEFAULT_OVERSHOOT_STRENGTH = 1.525;
 const BOUNCE_FIRST_THRESHOLD = 4.0 / 11.0;
 const BOUNCE_SECOND_THRESHOLD = 8.0 / 11.0;
 const BOUNCE_THIRD_THRESHOLD = 9.0 / 10.0;
+const linear = p => p;
 const easeIn = createExpoIn(2);
-reverseEasing(easeIn);
+const easeOut = reverseEasing(easeIn);
 const easeInOut = mirrorEasing(easeIn);
 const circIn = p => 1 - Math.sin(Math.acos(p));
 const circOut = reverseEasing(circIn);
@@ -3872,6 +3886,217 @@ function animate(_a) {
     };
 }
 
+const a = (a1, a2) => 1.0 - 3.0 * a2 + 3.0 * a1;
+const b = (a1, a2) => 3.0 * a2 - 6.0 * a1;
+const c = (a1) => 3.0 * a1;
+const calcBezier = (t, a1, a2) => ((a(a1, a2) * t + b(a1, a2)) * t + c(a1)) * t;
+const getSlope = (t, a1, a2) => 3.0 * a(a1, a2) * t * t + 2.0 * b(a1, a2) * t + c(a1);
+const subdivisionPrecision = 0.0000001;
+const subdivisionMaxIterations = 10;
+function binarySubdivide(aX, aA, aB, mX1, mX2) {
+    let currentX;
+    let currentT;
+    let i = 0;
+    do {
+        currentT = aA + (aB - aA) / 2.0;
+        currentX = calcBezier(currentT, mX1, mX2) - aX;
+        if (currentX > 0.0) {
+            aB = currentT;
+        }
+        else {
+            aA = currentT;
+        }
+    } while (Math.abs(currentX) > subdivisionPrecision &&
+        ++i < subdivisionMaxIterations);
+    return currentT;
+}
+const newtonIterations = 8;
+const newtonMinSlope = 0.001;
+function newtonRaphsonIterate(aX, aGuessT, mX1, mX2) {
+    for (let i = 0; i < newtonIterations; ++i) {
+        const currentSlope = getSlope(aGuessT, mX1, mX2);
+        if (currentSlope === 0.0) {
+            return aGuessT;
+        }
+        const currentX = calcBezier(aGuessT, mX1, mX2) - aX;
+        aGuessT -= currentX / currentSlope;
+    }
+    return aGuessT;
+}
+const kSplineTableSize = 11;
+const kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);
+function cubicBezier(mX1, mY1, mX2, mY2) {
+    if (mX1 === mY1 && mX2 === mY2)
+        return linear;
+    const sampleValues = new Float32Array(kSplineTableSize);
+    for (let i = 0; i < kSplineTableSize; ++i) {
+        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
+    }
+    function getTForX(aX) {
+        let intervalStart = 0.0;
+        let currentSample = 1;
+        const lastSample = kSplineTableSize - 1;
+        for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
+            intervalStart += kSampleStepSize;
+        }
+        --currentSample;
+        const dist = (aX - sampleValues[currentSample]) /
+            (sampleValues[currentSample + 1] - sampleValues[currentSample]);
+        const guessForT = intervalStart + dist * kSampleStepSize;
+        const initialSlope = getSlope(guessForT, mX1, mX2);
+        if (initialSlope >= newtonMinSlope) {
+            return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
+        }
+        else if (initialSlope === 0.0) {
+            return guessForT;
+        }
+        else {
+            return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
+        }
+    }
+    return (t) => t === 0 || t === 1 ? t : calcBezier(getTForX(t), mY1, mY2);
+}
+
+/**
+ * Read current box metrics (height + vertical margins).
+ * @param {HTMLElement} node - The element to measure.
+ * @returns {object} The box metrics.
+ */
+function getBoxMetrics(node) {
+    const rectHeight = node.getBoundingClientRect().height;
+    const style = getComputedStyle(node);
+    const marginTop = parseFloat(style.marginTop) || 0;
+    const marginBottom = parseFloat(style.marginBottom) || 0;
+    const total = rectHeight + marginTop + marginBottom;
+    return { height: rectHeight, marginTop, marginBottom, total };
+}
+const useCollapse = (node, { duration = 200, overflow = 'hidden' } = {}) => {
+    let currentAnimation = null;
+    const stop = () => {
+        if (currentAnimation) {
+            currentAnimation.stop();
+            currentAnimation = null;
+        }
+    };
+    const setStyle = (styles) => {
+        for (const [k, v] of Object.entries(styles)) {
+            node.style[k] = v;
+        }
+    };
+    /** Instantly apply collapsed styles (no animation). */
+    function setCollapsed() {
+        stop();
+        setStyle({
+            height: '0px',
+            marginTop: '0px',
+            marginBottom: '0px',
+            overflow,
+        });
+    }
+    /** Instantly apply expanded styles (no animation). */
+    function setExpanded() {
+        stop();
+        setStyle({
+            height: '',
+            marginTop: '',
+            marginBottom: '',
+            overflow: '',
+        });
+    }
+    /**
+     * Collapse: animate from current box (height + margins) down to 0.
+     */
+    function collapse() {
+        stop();
+        return new Promise(resolve => {
+            const { height, marginTop, marginBottom, total } = getBoxMetrics(node);
+            // Lock current box
+            setStyle({
+                height: `${height}px`,
+                marginTop: `${marginTop}px`,
+                marginBottom: `${marginBottom}px`,
+                overflow,
+                willChange: 'height, margin',
+            });
+            const denom = total > 0 ? total : 0.0001; // avoid divide-by-zero
+            currentAnimation = animate({
+                from: total,
+                to: 0,
+                duration,
+                ease: cubicBezier(0.2, 0, 0, 1),
+                onUpdate: v => {
+                    const ratio = v / denom;
+                    setStyle({
+                        height: `${height * ratio}px`,
+                        marginTop: `${marginTop * ratio}px`,
+                        marginBottom: `${marginBottom * ratio}px`,
+                    });
+                },
+                onComplete: () => {
+                    setStyle({
+                        height: '0px',
+                        marginTop: '0px',
+                        marginBottom: '0px',
+                        willChange: '',
+                    });
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Expand: animate from 0 box to the element's natural box (height + margins),
+     * then restore `height: auto` and computed margins.
+     */
+    function expand() {
+        stop();
+        return new Promise(resolve => {
+            // Let the element size naturally to measure the target box
+            setStyle({
+                height: '',
+                marginTop: '',
+                marginBottom: '',
+                overflow,
+            });
+            const { height, marginTop, marginBottom, total } = getBoxMetrics(node);
+            // Start locked at zero box
+            setStyle({
+                height: '0px',
+                marginTop: '0px',
+                marginBottom: '0px',
+                willChange: 'height, margin',
+            });
+            const denom = total > 0 ? total : 0.0001;
+            currentAnimation = animate({
+                from: 0,
+                to: total,
+                duration,
+                ease: cubicBezier(0.2, 0, 0, 1),
+                onUpdate: v => {
+                    const ratio = v / denom;
+                    setStyle({
+                        height: `${height * ratio}px`,
+                        marginTop: `${marginTop * ratio}px`,
+                        marginBottom: `${marginBottom * ratio}px`,
+                    });
+                },
+                onComplete: () => {
+                    // Restore natural layout
+                    setStyle({
+                        height: '',
+                        marginTop: '',
+                        marginBottom: '',
+                        overflow: '',
+                        willChange: '',
+                    });
+                    resolve();
+                },
+            });
+        });
+    }
+    return { collapse, expand, setCollapsed, setExpanded };
+};
+
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -4706,85 +4931,6 @@ function index(nodeOrSelector, props) {
     return getStyler(node, props);
 }
 
-const useCollapse = (node, { duration } = { duration: 200 }) => {
-    const nodeStyler = index(node);
-    /**
-     * Will set the overflow to hidden, and animate the max height to 0. Make sure
-     * the element has no border or y padding set, otherwise the animation will
-     * not work as expected.
-     */
-    function collapse() {
-        return new Promise(resolve => {
-            const height = node.getBoundingClientRect().height;
-            nodeStyler.set({ overflow: 'hidden' });
-            animate({
-                from: height,
-                to: 0,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    resolve();
-                },
-            });
-        });
-    }
-    /**
-     * Apply the collapsed styles without animating, useful when initial state
-     * is collapsed.
-     */
-    function setCollapsed() {
-        node.style.maxHeight = '0';
-        node.style.overflow = 'hidden';
-    }
-    /**
-     * Apply the expanded styles without animating, useful when initial state
-     * is expanded.
-     */
-    function setExpanded() {
-        node.style.maxHeight = '';
-        node.style.overflow = '';
-    }
-    /**
-     * Will set the overflow to hidden, and animate the max height to the value
-     * of the scrollHeight. Make sure the element has no border or y padding set,
-     * otherwise the animation will not work as expected. Once complete, the
-     * max-height and overflow style properties will be removed.
-     */
-    function expand() {
-        return new Promise(resolve => {
-            const scrollHeight = node.scrollHeight;
-            nodeStyler.set({
-                overflow: 'hidden',
-            });
-            animate({
-                from: 0,
-                to: scrollHeight,
-                duration,
-                onUpdate: value => {
-                    nodeStyler.set({
-                        maxHeight: value,
-                    });
-                },
-                onComplete: () => {
-                    node.style.removeProperty('max-height');
-                    node.style.removeProperty('overflow');
-                    resolve();
-                },
-            });
-        });
-    }
-    return {
-        collapse,
-        expand,
-        setCollapsed,
-        setExpanded,
-    };
-};
-
 const useFade = (node, { duration } = { duration: 200 }) => {
     const nodeStyler = index(node);
     /**
@@ -4932,6 +5078,68 @@ const useGrow = (node, { duration = 200, amount = 0.8, hasFade = true } = {}) =>
     };
 };
 
+const useSlide = (node, { duration } = { duration: 200 }) => {
+    const nodeStyler = index(node);
+    /**
+     * Will animate the translateX to 100%, sliding the element to the right.
+     */
+    function slideOut() {
+        return new Promise(resolve => {
+            animate({
+                from: { x: 0 },
+                to: { x: 100 },
+                ease: easeOut,
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                },
+            });
+        });
+    }
+    /**
+     * Applies the slideOut styles without animating, useful when initial state
+     * is slid out.
+     */
+    function setSlideOut() {
+        node.style.transform = 'translateX(100%)';
+    }
+    /**
+     * Applies the slideIn styles without animating, useful when initial state
+     * is slid in.
+     */
+    function setSlideIn() {
+        node.style.transform = '';
+    }
+    /**
+     * Will animate the translateX from 100% to 0%, sliding the element in from the right.
+     */
+    function slideIn() {
+        return new Promise(resolve => {
+            animate({
+                from: { x: 100 },
+                to: { x: 0 },
+                duration,
+                onUpdate(latest) {
+                    nodeStyler.set({ transform: `translateX(${latest.x}%)` });
+                },
+                onComplete() {
+                    resolve();
+                    node.style.removeProperty('transform');
+                },
+            });
+        });
+    }
+    return {
+        slideIn,
+        slideOut,
+        setSlideOut,
+        setSlideIn,
+    };
+};
+
 /**
  * Will execute a series of animation promises in sequence.
  * This is useful for chaining animations where each step depends on the
@@ -4951,8 +5159,26 @@ const timeline = (...animations) => ({
         return animations.reduce((promise, animation) => promise.then(() => animation()), Promise.resolve());
     },
 });
+/**
+ * Will execute a series of animation promises in parallel.
+ * This is useful for running multiple animations simultaneously.
+ *
+ * @param {Array<() => Promise<void>>} animations - The array of animation functions.
+ * @returns {Object} - An object with a `start` method to begin the parallel animations.
+ *
+ * @example
+ * const { fadeOut } = useFade(this.ref);
+ * const { slideOut } = useSlide(this.containerRef);
+ *
+ * parallel(fadeOut, slideOut).start();
+ */
+const parallel = (...animations) => ({
+    start: () => {
+        return Promise.all(animations.map(animation => animation()));
+    },
+});
 
-const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}";
+const nvAccordionItemCss = "nv-accordion-item{display:block;border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child{border-bottom:none}nv-accordion-item .nv-accordion-item__header{cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-4)}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__chevron{margin-left:var(--spacing-2);flex-shrink:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__header-content{display:flex;flex-direction:column;gap:var(--spacing-0-5);flex:1;min-width:0}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__title{color:var(--color-content-high-text);font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__header .nv-accordion-item__subtitle{color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--line-height-base);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}nv-accordion-item .nv-accordion-item__content{background:var(--color-level-10-background)}nv-accordion-item .nv-accordion-item__content .nv-accordion-item__content-inner{padding:var(--spacing-4);color:var(--color-content-low-text);font-size:var(--font-size-md);font-style:normal;font-weight:500;line-height:var(--line-height-base);}nv-accordion-item.is-disabled{opacity:var(--opacity-disabled);pointer-events:none}nv-accordion-item.is-open .nv-accordion-item__header{border-bottom:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion-item:last-child .nv-accordion-item__content{border-radius:0 0 calc(var(--radius-rounded-lg) - var(--spacing-px)) calc(var(--radius-rounded-lg) - var(--spacing-px))}";
 var NvAccordionItemStyle0 = nvAccordionItemCss;
 
 /**
@@ -4965,16 +5191,25 @@ class NvAccordionItem {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.itemToggle = createEvent(this, "itemToggle", 7);
-        /** Open or closed */
+        this.isToggling = false;
+        /**
+         * Open or closed
+         */
         this.open = false;
-        /** Disables the item */
+        /**
+         * Disables the item
+         */
         this.disabled = false;
-        /** Parent expansion mode (accordion or multi) */
+        /**
+         * Parent expansion mode (accordion or multi)
+         */
         this.mode = 'accordion';
         //#endregion EVENTS
         /****************************************************************************/
         //#region STATE
-        /** Internal state for open/close rendering */
+        /**
+         * Internal state for open/close rendering
+         */
         this.currentOpenState = false;
         /**
          * Controls if the panel has been initialized for animations
@@ -4995,7 +5230,7 @@ class NvAccordionItem {
          * @param {Event} e - Click event
          */
         this.handleIconClick = (e) => {
-            e.stopPropagation(); // Prevent header click from triggering
+            e.stopPropagation();
             this.toggle();
         };
         /**
@@ -5003,8 +5238,10 @@ class NvAccordionItem {
          * @param {KeyboardEvent} e - Keyboard event
          */
         this.handleHeaderKeyDown = (e) => {
-            if (this.disabled)
+            if (this.disabled) {
+                console.warn('[handleHeaderKeyDown] Ignored (disabled)');
                 return;
+            }
             switch (e.key) {
                 case 'Enter':
                 case ' ':
@@ -5014,17 +5251,19 @@ class NvAccordionItem {
                 case 'ArrowDown':
                     e.preventDefault();
                     if (!this.open) {
+                        this.isToggling = true;
                         this.open = true;
-                        this.itemToggle.emit(this.open);
-                        this.updateVisibility(this.open);
+                        this.itemToggle.emit(true);
+                        this.isToggling = false;
                     }
                     break;
                 case 'ArrowUp':
                     e.preventDefault();
                     if (this.open) {
+                        this.isToggling = true;
                         this.open = false;
-                        this.itemToggle.emit(this.open);
-                        this.updateVisibility(this.open);
+                        this.itemToggle.emit(false);
+                        this.isToggling = false;
                     }
                     break;
             }
@@ -5034,12 +5273,23 @@ class NvAccordionItem {
     /****************************************************************************/
     //#region WATCHERS
     async onOpenChanged(newValue, oldValue) {
-        this.currentOpenState = newValue; // Synchronize internal state
-        // Skip initial render
-        if (oldValue === undefined) {
+        if (this.disabled) {
+            console.warn('[onOpenChanged] Item is disabled, forcing closed state');
+            this.currentOpenState = false;
+            this.open = false;
             return;
         }
-        await this.updateVisibility(newValue);
+        this.currentOpenState = newValue;
+        const isInitialRender = oldValue === undefined;
+        if (!isInitialRender) {
+            if (newValue === false && !this.isToggling) {
+                this.itemToggle.emit(newValue);
+            }
+            else if (newValue && !this.isToggling) {
+                this.itemToggle.emit(newValue);
+            }
+            await this.updateVisibility(newValue);
+        }
     }
     //#endregion WATCHERS
     /****************************************************************************/
@@ -5049,18 +5299,18 @@ class NvAccordionItem {
      * @param {boolean} open - Whether the accordion item should be open
      */
     async updateVisibility(open) {
-        if (!this.contentRef)
+        if (!this.contentRef) {
+            console.error('[updateVisibility] No contentRef available');
             return;
+        }
         this.isAnimating = true;
         const { collapse, expand } = useCollapse(this.contentRef, {
             duration: 200,
         });
         if (open) {
-            // Expand with animation
             await expand();
         }
         else {
-            // Collapse with animation
             await collapse();
         }
         this.isAnimating = false;
@@ -5069,19 +5319,24 @@ class NvAccordionItem {
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        this.currentOpenState = this.open; // Initial synchronization
+        this.currentOpenState = this.open;
     }
     componentDidLoad() {
         if (this.contentRef) {
-            const { setExpanded, setCollapsed } = useCollapse(this.contentRef);
-            if (this.open) {
-                // If open by default on initial load, set expanded state without animation
-                setExpanded();
-            }
-            else {
-                // If closed by default, set collapsed state without animation
-                setCollapsed();
-            }
+            setTimeout(() => {
+                const { setExpanded, setCollapsed } = useCollapse(this.contentRef, {
+                    duration: 200,
+                });
+                if (this.open) {
+                    setExpanded();
+                    this.currentOpenState = true;
+                }
+                else {
+                    setCollapsed();
+                    this.currentOpenState = false;
+                }
+                this.isInitialized = true;
+            }, 0);
         }
     }
     disconnectedCallback() {
@@ -5097,10 +5352,14 @@ class NvAccordionItem {
      */
     async toggle() {
         if (!this.disabled && !this.isAnimating) {
-            this.open = !this.open;
-            this.itemToggle.emit(this.open);
-            // Force animation update directly instead of relying on watcher
-            await this.updateVisibility(this.open);
+            this.isToggling = true;
+            const newOpen = !this.open;
+            this.open = newOpen;
+            this.itemToggle.emit(newOpen);
+            this.isToggling = false;
+        }
+        else {
+            console.warn('[toggle] Ignored toggle (disabled or animating)');
         }
     }
     /**
@@ -5108,18 +5367,19 @@ class NvAccordionItem {
      * @returns {string} The icon name to display in the chevron button
      */
     get chevronIconName() {
-        return this.open ? 'chevron-top' : 'chevron-down';
+        const name = this.open ? 'chevron-top' : 'chevron-down';
+        return name;
     }
     //#endregion METHODS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'dfb8ca76f8ac40c938323be1ccba4353ea33a616', class: {
+        return (hAsync(Host, { key: '4d5ae52ba3e8cac86316d790f95afd39f6c73019', class: {
                 'nv-accordion-item': true,
-                'is-open': this.open,
+                'is-open': this.currentOpenState,
                 'is-disabled': this.disabled,
                 'is-animating': this.isAnimating,
-            }, role: "listitem", "aria-expanded": this.open ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("div", { key: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, hAsync("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, hAsync("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (hAsync("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (hAsync("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), hAsync("nv-iconbutton", { key: '145718cd664f6b1015cf99ad3c72dbe80df1f54e', 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.open ? 'Fermer la section' : 'Ouvrir la section' })), hAsync("div", { key: '667967ca20edaa1fc738188f42cfa8bf47bb080f', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, hAsync("div", { key: '1f66bac904a5992d5e6cd63852d5aec9bc602ed7', class: "nv-accordion-item__content-inner" }, hAsync("slot", { key: 'd7b5cf5c69daab242e7696e7432769905b3d4c72', name: "content" })))));
+            }, role: "listitem", "aria-expanded": this.currentOpenState ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, hAsync("div", { key: '866562d2f3033189e6d5df8fa5576d2f1540959e', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, hAsync("slot", { key: '36d2b14528c6bd6665ccfc94707d62dc406262d0', name: "header" }, hAsync("div", { key: 'c78c1e485d0128708db6fc5fb2b64c6c01e4ed0f', class: "nv-accordion-item__header-content" }, this.itemTitle && (hAsync("span", { key: '524cf377a4c89752eeed1933dbb8fd2343cd8830', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (hAsync("span", { key: 'b8ee5edc3c798218348490fc43c458c45934ee83', class: "nv-accordion-item__subtitle" }, this.subtitle)))), hAsync("nv-iconbutton", { key: 'aa474788bb5551ca7b94261dca1ccb2e5aced3d3', 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' })), hAsync("div", { key: '3b49afd97cc797b165a8fa6753f564349735aad1', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, hAsync("div", { key: '955b5c7cef3259a2531ecc14eafb806a9d28c9a6', class: "nv-accordion-item__content-inner" }, hAsync("slot", { key: '56ff89e2041d425f520fe6e62975bbb7193653f2', name: "content" })))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -5193,6 +5453,11 @@ var ButtonType;
     ButtonType["Reset"] = "reset";
     ButtonType["Button"] = "button";
 })(ButtonType || (ButtonType = {}));
+var NotificationEmphasis;
+(function (NotificationEmphasis) {
+    NotificationEmphasis["Medium"] = "medium";
+    NotificationEmphasis["High"] = "high";
+})(NotificationEmphasis || (NotificationEmphasis = {}));
 var ToggleButtonEmphasis;
 (function (ToggleButtonEmphasis) {
     ToggleButtonEmphasis["High"] = "high";
@@ -5417,7 +5682,7 @@ const CUSTOM_MONTH_NAMES = {
     ],
 };
 
-const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--spacing-5) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 var NvAlertStyle0 = nvAlertCss;
 
 /**
@@ -5528,8 +5793,8 @@ class NvAlert {
             this.toggleHiddenClass(hidden);
             return;
         }
-        const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });
-        const { collapse, expand } = useCollapse(this.ref, { duration: 150 });
+        const { fadeIn, fadeOut } = useFade(this.el, { duration: 150 });
+        const { collapse, expand } = useCollapse(this.el, { duration: 250 });
         if (hidden) {
             await timeline(fadeOut, collapse).start();
             this.toggleHiddenClass(true);
@@ -5544,7 +5809,7 @@ class NvAlert {
      * @param {boolean} hidden - Whether to add or remove the hidden class
      */
     toggleHiddenClass(hidden) {
-        this.ref.classList.toggle('hidden', hidden);
+        this.el.classList.toggle('hidden', hidden);
     }
     //#endregion METHODS
     /****************************************************************************/
@@ -5566,7 +5831,7 @@ class NvAlert {
             }
         }
         if (this.hidden) {
-            this.ref.classList.add('hidden');
+            this.el.classList.add('hidden');
         }
     }
     //#endregion LIFECYCLE
@@ -5574,9 +5839,9 @@ class NvAlert {
     //#region RENDER
     render() {
         var _a;
-        return (hAsync(Host, { key: 'f0e75ac2c38aced1dcf76cb1d5f03becefbee71d', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: '19f7fcf452d62277ab436acd20c285f44fbaecd4', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: '8e656ffd0bce63bd33d92b97df21389af265e182', class: "content" }, this.heading && hAsync("p", { key: '0aa928e8ee8605d735f890bc67128563ce3ad379', class: "heading" }, this.heading), this.message && hAsync("p", { key: '690d9928646d25a636b2bb04eb65eee40c402f52', class: "message" }, this.message), hAsync("slot", { key: '86309f093688dbb81ff805f1c9137b200541e905' })), this.dismissible && (hAsync("button", { key: '387695ff1e23a7e289cf58c51042ccc561d451ad', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: '788b99b4c56fc8c936a67ac48d2db37fdcca7631', name: "x", size: "sm" })))));
+        return (hAsync(Host, { key: '08bc48f1d9bba66505e46fb26b8400f185dcc716', role: "alert", class: clsx('root', `feedback-${this.feedback}`) }, hAsync("nv-icon", { key: 'b4846e6aee8cf6cfde913372b11675a3c0301fa3', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), hAsync("div", { key: '61edadca039963056bdf27914829286515269a4a', class: "content" }, this.heading && hAsync("p", { key: '25c0396ade2573a9f955302cfe52702fe5e4f531', class: "heading" }, this.heading), this.message && hAsync("p", { key: 'dbef6eac9028f5431bb9665ca5642af5278c20d7', class: "message" }, this.message), hAsync("slot", { key: '5aa607cb7c48783371887fd9126b247647e8b37c' })), this.dismissible && (hAsync("button", { key: 'e6be3501788f12fac97c162c0ed64c922acd4b22', class: "close", type: "button", onClick: this.handleDismiss }, hAsync("nv-icon", { key: 'f39c94a6cf82226eb77143bce7b4d74aff30c05a', name: "x", size: "sm" })))));
     }
-    get ref() { return getElement(this); }
+    get el() { return getElement(this); }
     static get watchers() { return {
         "hidden": ["handleHiddenChange"]
     }; }
@@ -6650,12 +6915,12 @@ const DayCell = props => {
  * @returns {JSX.Element} JSX element representing the action buttons
  */
 const CalendarActions = props => {
-    const { onReset, onConfirm, useSlot = false } = props;
+    const { onReset, onConfirm, cancelLabel = 'Cancel', primaryLabel = 'OK', useSlot = false, } = props;
     return (hAsync("div", { class: "datepicker-actions" }, useSlot ? (hAsync("slot", { name: "actions" },
-        hAsync("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, "Cancel"),
-        hAsync("nv-button", { size: "xs", onClick: onConfirm }, "OK"))) : (hAsync("div", null,
-        hAsync("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, "Cancel"),
-        hAsync("nv-button", { size: "xs", onClick: onConfirm }, "OK")))));
+        hAsync("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, cancelLabel),
+        hAsync("nv-button", { size: "xs", onClick: onConfirm }, primaryLabel))) : (hAsync("div", { class: "actions-container" },
+        hAsync("nv-button", { emphasis: "low", size: "xs", onClick: onReset }, cancelLabel),
+        hAsync("nv-button", { size: "xs", onClick: onConfirm }, primaryLabel)))));
 };
 
 /**
@@ -6789,7 +7054,7 @@ const CalendarGrid = props => {
         }))));
 };
 
-const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){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{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;background-color:transparent;border-color:transparent}.day.day-blank{pointer-events:none;background-color:transparent;border-color:transparent}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.day.hover-range{background-color:var(--components-calendar-cell-background-hover)}.day.hover-blocked{background-color:var(--components-calendar-cell-background-hover)}.day.disabled.hover-blocked{background-color:transparent}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
+const nvCalendarCss = "nv-calendar{display:block}.datepicker-root{display:flex;justify-content:center;align-items:flex-start;width:auto}.datepicker-container{font-family:system-ui, sans-serif;display:flex;flex-direction:column;align-items:stretch;background:var(--components-calendar-background);border-radius:var(--calendar-radius);padding:var(--calendar-padding);box-shadow:0px var(--shadow-y-axis-md-1) var(--shadow-blur-md-1) var(--shadow-spread-md, 0) var(--shadow-color-opacity-0), 0px var(--shadow-y-axis-md-2) var(--shadow-blur-md-2) var(--shadow-spread-md, 0) var(--shadow-color-opacity-2);border:1px solid var(--components-calendar-border);width:auto;max-width:100%}.datepicker-container-single{max-width:300px}.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-left),.datepicker-container-single .datepicker-wrapper:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-container-single:has(.shortcuts-placement-left),.datepicker-container-single:has(.shortcuts-placement-right){max-width:410px !important}.datepicker-wrapper{display:flex;justify-content:center;align-items:flex-start;gap:var(--calendar-gap-x);width:auto;overflow-x:hidden}.datepicker-wrapper::-webkit-scrollbar{width:6px;height:6px}.datepicker-wrapper::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}.datepicker-wrapper::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}.datepicker-wrapper.single{justify-content:center}.calendar-container{display:flex;flex-direction:column;align-items:center;padding:var(--calendar-padding);width:auto;position:relative}.calendar-separator{width:1px;background:var(--components-calendar-border);height:auto;min-height:100%;margin:0 10px}.header{display:flex;justify-content:start;align-items:center;margin-bottom:var(--calendar-header-margin-bottom);width:100%}.header nv-iconbutton{width:var(--calendar-header-button-size);height:var(--calendar-header-button-size)}.nav-buttons{display:flex;gap:var(--spacing-0);margin-left:auto}.nav-left{order:-1}.date-controls{display:flex;gap:var(--spacing-1);align-items:center;min-height:34px;justify-content:center}.datepicker-container-single .date-controls{justify-content:flex-start}.datepicker-container:not(.datepicker-container-single) .date-controls{justify-content:start;flex-grow:1}.date-controls .month-select,.date-controls .year-input{background:transparent !important}.calendar-wrapper:nth-child(n+2) .datepicker-container{margin-left:42px}.calendar-grid{display:grid;grid-template-columns:auto 1fr;column-gap:var(--calendar-weeks-calendar-gap-x);position:relative}.calendar-grid.slide-left{animation:slideLeft 0.3s ease-out}.calendar-grid.slide-right{animation:slideRight 0.3s ease-out}.week-numbers{display:grid;grid-template-rows:var(--calendar-cell-size) repeat(6, var(--calendar-cell-size));background:var(--components-calendar-weeks-background);color:var(--components-calendar-weeks-text);border-radius:var(--calendar-weeks-radius);width:var(--calendar-weeks-size);row-gap:var(--calendar-grid-gap-y)}.week-numbers .clickable{cursor:pointer}.week-numbers .clickable:hover{background-color:var(--components-calendar-weeks-background-hover);color:var(--components-calendar-weeks-text-hover);border-radius:var(--calendar-radius)}.week-header,.week-number{display:grid;place-items:center;font-size:var(--calendar-cell-font-size)}.week-header{font-weight:700;color:var(--components-calendar-weeks-text)}.week-number{color:var(--components-calendar-cell-text)}.days-container{display:grid;grid-template-rows:auto 1fr;row-gap:var(--calendar-grid-gap-y)}.days-header{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));height:var(--calendar-cell-size)}.day-header{display:grid;place-items:center;font-size:var(--calendar-cell-font-size);color:var(--components-calendar-cell-text)}.days-grid{display:grid;grid-template-columns:repeat(7, var(--calendar-cell-size));grid-template-rows:repeat(6, var(--calendar-cell-size));animation:fadeIn 0.2s ease-in;row-gap:var(--calendar-grid-gap-y);z-index:0}.day{display:grid;place-items:center;width:var(--calendar-cell-size);height:var(--calendar-cell-size);font-size:var(--calendar-cell-font-size);border-radius:var(--calendar-cell-radius);cursor:pointer;border:none;background:transparent;transition:all 0.2s ease;text-align:center;animation:scaleIn 0.2s ease-out}.day:hover:not(.disabled,.empty,.selected){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{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected) !important}.day.disabled{opacity:var(--opacity-disabled);cursor:not-allowed}.day.is-empty{pointer-events:none;background-color:transparent;border-color:transparent}.day.day-blank{pointer-events:none;background-color:transparent;border-color:transparent}.day.outside-month{color:var(--components-calendar-cell-text);opacity:var(--opacity-disabled)}.day.outside-month.selected{opacity:1 !important;color:var(--components-calendar-cell-text-selected)}.day.outside-month.in-range{opacity:0.5 !important;background-color:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range)}.day.outside-month.in-range:hover{opacity:0.7 !important;background-color:var(--components-calendar-cell-background-in-range)}.day.in-range{background:var(--components-calendar-cell-background-in-range);color:var(--components-calendar-cell-text-in-range);border-radius:0;position:relative}.day.range-start,.day.range-start:focus,.day.range-start:hover,.day.range-end,.day.range-end:focus,.day.range-end:hover{background-color:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected) !important}.day.range-start,.day.range-end,.day.range-start.is-today,.day.range-end.is-today{background:var(--components-calendar-cell-background-selected);color:var(--components-calendar-cell-text-selected);position:relative;border-radius:var(--radius-rounded-full)}.day.range-start:hover,.day.range-end:hover,.day.range-start.is-today:hover,.day.range-end.is-today:hover{color:var(--components-calendar-cell-text-today)}.day.range-start:before,.day.range-end:before,.day.range-start.is-today:before,.day.range-end.is-today:before{content:\"\";position:absolute;bottom:0;left:0;right:0;top:0;z-index:-1;background-color:var(--components-calendar-cell-background-in-range);border-radius:var(--radius-rounded-full);width:auto;height:auto}.day.range-start:has(~.range-end):before,.day.range-start:has(+.in-range):before{border-top-right-radius:0;border-bottom-right-radius:0}.day.range-end:before{border-top-left-radius:0 !important;border-bottom-left-radius:0 !important}.day.outside-month.range-start,.day.outside-month.range-end{opacity:1 !important;background:var(--components-calendar-cell-background-selected) !important;color:var(--components-calendar-cell-text-selected)}.day.is-today{font-weight:700;position:relative;color:var(--components-calendar-cell-text-today)}.day.is-today.range-start,.day.is-today.range-end{color:var(--components-calendar-cell-text-selected)}.day.is-today.range-start:hover,.day.is-today.range-end:hover{color:var(--components-calendar-cell-text-today)}.day.is-today::after{content:\"\";position:absolute;bottom:var(--spacing-1);left:50%;transform:translateX(-50%);width:var(--calendar-cell-dot-size);height:var(--calendar-cell-dot-size);background-color:currentColor;border-radius:50%}.day.is-today.selected::after{color:var(--components-calendar-cell-text-selected)}.day.is-today.selected::after::after{background-color:var(--components-calendar-cell-dot-selected)}.day.hover-range{background-color:var(--components-calendar-cell-background-hover)}.day.hover-blocked{background-color:var(--components-calendar-cell-background-hover)}.day.disabled.hover-blocked{background-color:transparent}.calendar-footer{display:flex;gap:var(--spacing-1);justify-content:flex-start;width:100%;flex-wrap:wrap}.footer-placement-left{justify-content:flex-start}.footer-placement-right{justify-content:flex-end}.footer-placement-center{justify-content:center}.datepicker-controls{display:flex;flex-direction:column;border-top:1px solid var(--components-calendar-border);padding:var(--calendar-controls-padding-top) var(--calendar-padding) var(--calendar-padding);gap:var(--calendar-grid-gap-y);margin-top:var(--calendar-controls-margin-top)}.datepicker-actions{display:flex;justify-content:flex-end;gap:var(--spacing-1);width:100%}.datepicker-actions slot-fb{display:contents !important}.datepicker-actions .actions-container{display:flex;gap:var(--spacing-1)}.calendar-footer+.datepicker-actions{margin-top:0}.shortcuts-placement-left,.shortcuts-placement-right{display:flex;flex-direction:column;gap:var(--spacing-1);margin-top:var(--spacing-4)}.shortcuts-placement-left{align-items:flex-end}.shortcuts-placement-right{align-items:flex-start}@keyframes slideLeft{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}@keyframes slideRight{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}";
 var NvCalendarStyle0 = nvCalendarCss;
 
 /**
@@ -6849,6 +7114,10 @@ class NvCalendar {
          * Show action buttons
          */
         this.showActions = false;
+        /** Sets the label for the cancel button in actions. */
+        this.cancelLabel = 'Cancel';
+        /** Sets the label for the primary (OK) button in actions. */
+        this.primaryLabel = 'OK';
         /** Cache for parsed disabled dates */
         this.parsedDisabledDates = [];
         /** Flag to indicate a user click for selection */
@@ -7503,7 +7772,7 @@ class NvCalendar {
          * @slot actions - Child content of the component.
          */
         this.renderActions = () => {
-            return (hAsync("div", { class: "datepicker-actions" }, hAsync("slot", { name: "actions" }, hAsync(CalendarActions, { onReset: this.resetSelection, onConfirm: this.confirmSelection, useSlot: false }))));
+            return (hAsync("div", { class: "datepicker-actions" }, hAsync("slot", { name: "actions" }, hAsync(CalendarActions, { onReset: this.resetSelection, onConfirm: this.confirmSelection, cancelLabel: this.cancelLabel, primaryLabel: this.primaryLabel, useSlot: false }))));
         };
     }
     //#endregion EVENTS
@@ -7703,8 +7972,8 @@ class NvCalendar {
      * @slot default - Child content of the component.
      */
     render() {
-        return (hAsync(Host, { key: '15aa3c2afb51ea1fbd16de597889d687fb8d1982' }, hAsync("div", { key: '6492b58cb2b5c9bb7fd6c40e8f37e9c2142b5827', class: "datepicker-root" }, hAsync("div", { key: '3cb216c3af4900b48c2dcd09a0a0034c7ebf622d', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: '0663841721d5db871e7ede0ec396affa560ea99d', 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) && (hAsync("div", { key: '0a17a627cb1e4a4cb2b91aa104403b00d055bce5', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '3104795c8cc9c81a6aca7e426a145e3966a4361e' })));
+        return (hAsync(Host, { key: '9856eac375fde00aa98f18766e52673ac00fbf0d' }, hAsync("div", { key: 'c25e3fc04ed553e086116a40aff0c302c1cbb75b', class: "datepicker-root" }, hAsync("div", { key: 'b32891731ba9f84d1e5ce2a00e4c48d243478816', class: `datepicker-container ${this.numberOfCalendars === 1 ? 'datepicker-container-single' : ''}` }, hAsync("div", { key: 'd051841a48835b7d1637aea05071a4e8ae0cc0aa', 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) && (hAsync("div", { key: 'e2f7beb10f042d7694f02453a6d181ba37fa607c', class: "datepicker-controls" }, this.shortcutsPlacement === 'bottom' && this.renderShortcuts(), this.hasActions && this.renderActions())))), hAsync("slot", { key: '77d2bd14bc703b825b2b77c67c99e364e2a58c88' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -7734,6 +8003,8 @@ class NvCalendar {
             "showActions": [516, "show-actions"],
             "shortcuts": [16],
             "showWeekNumbers": [516, "show-week-numbers"],
+            "cancelLabel": [513, "cancel-label"],
+            "primaryLabel": [513, "primary-label"],
             "currentDate": [32],
             "selectedDate": [32],
             "startDate": [32],
@@ -7744,7 +8015,7 @@ class NvCalendar {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["firstDayOfWeek", "first-day-of-week"], ["numberOfCalendars", "number-of-calendars"], ["value", "value"], ["singleValue", "single-value"], ["min", "min"], ["max", "max"], ["locale", "locale"], ["dateFormat", "date-format"], ["shortcutsPlacement", "shortcuts-placement"], ["selectionType", "selection-type"], ["showActions", "show-actions"], ["showWeekNumbers", "show-week-numbers"]]
+        "$attrsToReflect$": [["firstDayOfWeek", "first-day-of-week"], ["numberOfCalendars", "number-of-calendars"], ["value", "value"], ["singleValue", "single-value"], ["min", "min"], ["max", "max"], ["locale", "locale"], ["dateFormat", "date-format"], ["shortcutsPlacement", "shortcuts-placement"], ["selectionType", "selection-type"], ["showActions", "show-actions"], ["showWeekNumbers", "show-week-numbers"], ["cancelLabel", "cancel-label"], ["primaryLabel", "primary-label"]]
     }; }
 }
 
@@ -13311,10 +13582,6 @@ class NvDialogfooter {
          * Sets the label for the primary button.
          */
         this.primaryLabel = 'Primary';
-        /**
-         * Sets the type of the primary button.
-         */
-        this.primaryButtonType = ButtonType.Button;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -13345,11 +13612,18 @@ class NvDialogfooter {
                 !node.hasAttribute('slot'));
         });
     }
+    componentDidLoad() {
+        // Set the default button type based on the form property
+        this.primaryButtonType =
+            this.primaryButtonType || this.form
+                ? ButtonType.Submit
+                : ButtonType.Button;
+    }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '313836d5d0bc1704325aa200f0ed115bf3e63e7d' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
+        return (hAsync(Host, { key: '0868c3af73f89219eee7c006b4ddca47c6da29b0' }, !this.hasSlot ? (hAsync(Fragment, null, !this.undismissable && (hAsync("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), hAsync("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (hAsync("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (hAsync("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (hAsync("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -13365,7 +13639,7 @@ class NvDialogfooter {
             "danger": [516],
             "cancelLabel": [513, "cancel-label"],
             "primaryLabel": [513, "primary-label"],
-            "primaryButtonType": [513, "primary-button-type"],
+            "primaryButtonType": [1537, "primary-button-type"],
             "form": [513]
         },
         "$listeners$": undefined,
@@ -18984,7 +19258,6 @@ class NvFieldmultiselect {
          * Handle badge close for options mode.
          */
         this.handleBadgeCloseOptions = () => {
-            console.info('handleBadgeCloseOptions:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -19002,7 +19275,6 @@ class NvFieldmultiselect {
          * Handle badge close for slots mode.
          */
         this.handleBadgeCloseSlots = () => {
-            console.info('handleBadgeCloseSlots:', this.value);
             this.value = [];
             this.valueChanged.emit(this.value);
             // Uncheck all elements
@@ -19211,7 +19483,6 @@ class NvFieldmultiselect {
             try {
                 // Get visible and enabled option values from DOM
                 const visibleOptionValues = this.getVisibleEnabledOptionItems();
-                console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible options - merge with existing selections
                     this.value = [...new Set([...this.value, ...visibleOptionValues])];
@@ -19220,7 +19491,6 @@ class NvFieldmultiselect {
                     // Deselect only the visible options, keep others that might be filtered out
                     this.value = this.value.filter(val => !visibleOptionValues.includes(val));
                 }
-                console.info('[SelectAll][Options] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Synchronize child components
@@ -19246,7 +19516,6 @@ class NvFieldmultiselect {
             try {
                 // Get visible and enabled items
                 const items = this.getVisibleEnabledSlotItems();
-                console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
                 if (selectAll) {
                     // Select all visible items
                     const allActiveValues = items
@@ -19261,7 +19530,6 @@ class NvFieldmultiselect {
                         .filter(value => value !== '');
                     this.value = this.value.filter(val => !visibleValues.includes(val));
                 }
-                console.info('[SelectAll][Slots] New value after toggle:', this.value);
                 // Emit the change event
                 this.valueChanged.emit(this.value);
                 // Force synchronization with a small delay to ensure DOM is updated
@@ -19284,15 +19552,12 @@ class NvFieldmultiselect {
         this.handleSelectAllCheckboxOptionsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxOptionsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateOptions();
-            console.info('[SelectAll][Options] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Options] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllOptions(shouldSelectAll);
         };
         /**
@@ -19302,15 +19567,12 @@ class NvFieldmultiselect {
         this.handleSelectAllCheckboxSlotsClick = (event) => {
             event.stopPropagation();
             event.preventDefault();
-            console.info('[handleSelectAllCheckboxSlotsClick] event:', event);
             const currentState = this.getSelectAllCheckboxStateSlots();
-            console.info('[SelectAll][Slots] Checkbox clicked. Current state:', currentState, 'Current value:', this.value);
             // Logic to handle the indeterminate state
             // - unchecked → select all
             // - indeterminate → select all (clicking on indeterminate will change to checked)
             // - checked → deselect all
             const shouldSelectAll = currentState === 'unchecked' || currentState === 'indeterminate';
-            console.info('[SelectAll][Slots] shouldSelectAll:', shouldSelectAll);
             this.toggleSelectAllSlots(shouldSelectAll);
         };
         //#endregion METHODS
@@ -19353,8 +19615,6 @@ class NvFieldmultiselect {
     /****************************************************************************/
     //#region WATCHERS
     handleOptionsChange(newValue) {
-        console.info('[Watch:options] newValue:', newValue);
-        console.info('[Watch:options] current value before update:', this.value);
         if (!newValue)
             return;
         // If the parent has set a value prop, use it. Otherwise, derive from checked options.
@@ -19363,22 +19623,18 @@ class NvFieldmultiselect {
             this.value = newValue
                 .filter(option => option.checked)
                 .map(option => option.value);
-            console.info('[Watch:options] updated value from checked options:', this.value);
         }
         else {
             // If value is set, ensure checked states in options match value
             newValue.forEach(option => {
                 option.checked = this.value.includes(option.value);
             });
-            console.info('[Watch:options] options checked state synced to value:', newValue);
         }
         this.reorderOptionsContent();
     }
     watchValueHandler() {
-        console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
         // Skip processing during bulk operations
         if (this.isBulkOperation) {
-            console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
             return;
         }
         // Synchronize child components when value changes programmatically
@@ -19427,11 +19683,9 @@ class NvFieldmultiselect {
     handleItemChecked(event) {
         if (this.disabled || this.readonly || this.isBulkOperation) {
             // Skip processing itemChecked events during bulk operations
-            console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
             return;
         }
         const { value, checked } = event.detail;
-        console.info('[Event:itemChecked] value:', value, 'checked:', checked, 'current value:', this.value);
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
@@ -19444,7 +19698,6 @@ class NvFieldmultiselect {
                 newValue.splice(valueIndex, 1);
                 hasChanged = true;
             }
-            console.info('[Event:itemChecked] newValue after update:', newValue);
             if (hasChanged) {
                 this.value = newValue;
                 this.valueChanged.emit(this.value);
@@ -19478,7 +19731,6 @@ class NvFieldmultiselect {
      * Subscribe to click outside event.
      */
     connectedCallback() {
-        console.info('[Lifecycle] connectedCallback - value:', this.value);
         // Bind once and reuse the same reference for add/remove to avoid leaks
         if (!this._boundHandleClickOutside) {
             this._boundHandleClickOutside = this.handleClickOutside.bind(this);
@@ -19490,7 +19742,6 @@ class NvFieldmultiselect {
      */
     componentWillLoad() {
         var _a;
-        console.info('[Lifecycle] componentWillLoad - value:', this.value, 'options:', this.options);
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
@@ -19524,7 +19775,6 @@ class NvFieldmultiselect {
      * Force reorder if options mode in componentDidLoad because of the initial render not trigger @watch
      */
     componentDidLoad() {
-        console.info('[Lifecycle] componentDidLoad - value:', this.value, 'options:', this.options);
         if (this.options) {
             this.handleOptionsChange(this.options);
         }
@@ -19540,7 +19790,6 @@ class NvFieldmultiselect {
      * Unsubscribe from click outside event.
      */
     disconnectedCallback() {
-        console.info('[Lifecycle] disconnectedCallback - value:', this.value);
         if (this._boundHandleClickOutside) {
             document.removeEventListener('click', this._boundHandleClickOutside);
         }
@@ -19585,7 +19834,6 @@ class NvFieldmultiselect {
      * @returns {string[]} The selected values.
      */
     async getSelectedValues() {
-        console.info('getSelectedValues:', this.value);
         return this.value;
     }
     /**
@@ -20066,12 +20314,10 @@ class NvFieldmultiselect {
             return;
         }
         const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
-        console.info('[syncChildComponents] value:', this.value);
         items.forEach(item => {
             // Get the effective value: use explicit value if present, otherwise use label
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
             const shouldBeChecked = this.value.includes(itemValue);
-            console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
             // Only update if the checked state differs to avoid triggering unnecessary events
             if (item.checked !== shouldBeChecked) {
                 // Set attribute and property, but avoid triggering itemChecked during bulk
@@ -20090,7 +20336,6 @@ class NvFieldmultiselect {
                     item.checked = shouldBeChecked;
                 }
             }
-            console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
         });
     }
     /**
@@ -20188,7 +20433,6 @@ class NvFieldmultiselect {
             .map(item => item.getAttribute('value') || item.getAttribute('label') || '');
         // Combine with current this.value (set by code), ensuring uniqueness
         this.value = Array.from(new Set([...(this.value || []), ...checkedValues]));
-        console.info('[initializeValueFromSlots] checkedValues:', checkedValues, 'combined value:', this.value);
     }
     /**
      * Renders description and error description sections
@@ -20335,7 +20579,7 @@ class NvFieldnumber {
         //#region METHODS
         this.handleInput = (event) => {
             const input = event.target;
-            this.value = Number(input.value);
+            this.value = input.valueAsNumber;
         };
         this.handleInputContainerClick = () => {
             this.inputElement.focus();
@@ -21305,17 +21549,24 @@ const FieldInput = props => {
     else {
         inputName = name || '';
     }
-    // If hasField is false, only the containers are visible, not the input fields
-    const containerClass = hasField
-        ? 'input-container'
-        : 'input-container hidden-input';
-    return hasField ? (hAsync("div", { class: containerClass },
-        hAsync("nv-fieldnumber", Object.assign({ id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: onInput }),
+    const handleValueChanged = (event) => {
+        event.stopPropagation();
+        const newValue = event.detail;
+        if (isNaN(newValue)) {
+            return;
+        }
+        onInput({
+            value: newValue,
+            index,
+        });
+    };
+    return hasField ? (hAsync("div", { class: clsx(!hasField && 'hidden-input') },
+        hAsync("nv-fieldnumber", Object.assign({ id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName }, dataAttrs, { onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }),
             labelBeforeValue && (hAsync("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)),
             labelAfterValue && (hAsync("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (hAsync("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
 };
 
-const nvFieldsliderCss = "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-fieldslider{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldslider .slider-container .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldslider[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldslider[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldslider>.error-description[hidden]{display:none}";
+const nvFieldsliderCss = "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-fieldslider{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer;touch-action:none;user-select:none}nv-fieldslider .slider-container .track-container .track::after{content:\"\";position:absolute;top:calc(-13px + var(--slider-track-height) / 2);left:0;width:100%;height:26px;background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;touch-action:none;user-select:none;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:after{content:\"\";position:absolute;top:-7px;left:-7px;width:calc(100% + 14px);height:calc(100% + 14px);background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%);backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform-style:preserve-3d}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px;backface-visibility:hidden;will-change:transform, opacity}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldslider .slider-container .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%;}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldslider[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldslider[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldslider>.error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldslider>.error-description[hidden]{display:none}";
 var NvFieldsliderStyle0 = nvFieldsliderCss;
 
 /**
@@ -21348,7 +21599,8 @@ class NvFieldslider {
         /**
          * Enables an optional numeric input field alongside the slider, allowing
          * users to type a value directly instead of—or in addition to—using the
-         * slider handle.
+         * slider handle. The field accepts numeric values in the format based on
+         * client-side local settings.
          */
         this.hasField = false;
         /**
@@ -21599,16 +21851,15 @@ class NvFieldslider {
         };
         /**
          * Handles field input value changes.
-         * @param {Event} event - The input event
+         * @param {FieldInputProps['onInput']} details - The parsed value and index
          */
-        this.handleFieldChange = (event) => {
-            const input = event.target;
-            const newValue = parseFloat(input.value);
+        this.handleFieldChange = (details) => {
+            const newValue = details.value;
             if (isNaN(newValue)) {
                 return;
             }
             if (this.range) {
-                const fieldIndex = input.getAttribute('data-index') === '0' ? 0 : 1;
+                const fieldIndex = details.index === 0 ? 0 : 1;
                 const updatedRange = [...this.rangeValueInternal];
                 updatedRange[fieldIndex] = newValue;
                 this.handleValueChange(updatedRange);
@@ -21779,11 +22030,11 @@ class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '7dafd85aa9bae558c6339bacc1ab0f9ca284f252' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '5a85de0b6d1216a1cdfa27172def79c7e2d17142', htmlFor: this.startInputId }, hAsync("slot", { key: '5f17b24bc70f148a70677f52dfe0be84162a675b', name: "label" }, this.label))), hAsync("div", { key: '5fb5d887c5fe61febfd877876365863f0657af93', class: "slider-container" }, this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, hAsync("div", { key: '801e4189130725d5f4b3b0f116761e35a89f1236', class: "track-container" }, hAsync("div", { key: 'fba52a45d3b5ba937b3e87441e17df458c490755', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: '1530c379bac4d4d0d7ef2eb22ddabe507ace1c0a', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (hAsync(Host, { key: '5256401116f099a480f35552c3a38072c60d74ed' }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: 'ae1c59b2561f0b007d3f6da3ef379a32fe2ff449', htmlFor: this.startInputId }, hAsync("slot", { key: '6d0b7e287276082ea680fc7fdfaabe428648df03', name: "label" }, this.label))), hAsync("div", { key: '3c09727930e4d7bbde1f1ad578fb87e18f04c8dc', class: "slider-container" }, this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, hAsync("div", { key: 'db7e57716f9fc13e9ecd2e81c4126ccd8ceade9f', class: "track-container" }, hAsync("div", { key: '8b5cc8d661b8179fa71c6729291e72bc743dcb13', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (hAsync(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (hAsync(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), hAsync(TickMarks, { key: '4f7ee0f6eccff4a2539b9f33c9f1dd68e0e8afa1', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (hAsync(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '032ea2e613073412908abe35fe04545d2369f04a', class: "description" }, this.success && (hAsync("nv-icon", { key: 'ff7a4249402880359bc46dd07ff39acd196a7630', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '2fc0542506811cfc2d50eac140aae4cf97d279ea', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '40b921d84578b1d7ae18fa5f1ebcc34cc1678df2', class: "description" }, this.success && (hAsync("nv-icon", { key: 'c0c7e52eb9118154f18280fdcb09ca4a5db63c74', name: "circle-check", class: "validation", size: "md" })), hAsync("slot", { key: '2d764e1dabf08abb3271de1f8c2cf6f8418d9d5d', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: 'd7ac4fc356cef87c86f7bd75dd4d5b4151379cfa', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: '598353c10d3f709fee22b44b8f831f22c2804d08', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: 'a426ae3e63aafeea9d74cba5baa4bbf0fb65b0d1', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (hAsync("div", { key: '96f9424431a2adcca98f4619350e6d34c2037bc2', class: "error-description", hidden: !this.error }, this.error && (hAsync("nv-icon", { key: 'b77e2b14a5f4e9cdf49c173f5fbf24d6a3f081ff', name: "alert-circle", class: "validation", size: "md" })), hAsync("slot", { key: 'f04a20c146d54c405669109436b28bf9ad99ebd8', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -23829,6 +24080,133 @@ class NvMenuitem {
     }; }
 }
 
+const nvNotificationCss = "nv-notification{display:block}nv-notification [data-scope=container]{display:flex;position:relative;max-width:512px;width:100%;padding:var(--notification-padding);align-items:flex-start;gap:var(--notification-gap-x);border-radius:var(--notification-radius);border-style:solid;box-shadow:0 var(--shadow-y-axis-lg-1, 4px) var(--shadow-blur-lg-1, 6px) var(--shadow-spread-lg-1, -2px) var(--shadow-color-opacity-1, rgba(14, 14, 14, 0.06)), 0 var(--shadow-y-axis-lg-2, 10px) var(--shadow-blur-lg-2, 15px) var(--shadow-spread-lg-2, -3px) var(--shadow-color-opacity-2, rgba(14, 14, 14, 0.1))}nv-notification [data-scope=container]>nv-icon{flex-shrink:0}nv-notification [data-scope=container] [data-scope=dismiss]{padding:var(--button-sm-icon-button-padding, 8px);justify-content:center;align-items:center;gap:var(--button-sm-gap, 6px);display:flex;position:absolute;right:8px;top:8px;border-radius:var(--button-sm-border-radius, 4px);background:var(--components-button-lower-background, rgba(255, 255, 255, 0));color:var(--components-button-lower-icon)}nv-notification [data-scope=container] [data-scope=content]{display:flex;padding-right:var(--notification-padding-right);flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);flex:1 0 0}nv-notification [data-scope=container] [data-scope=content] [data-scope=heading]{display:flex;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;color:var(--components-notification-content-title);font-size:var(--notification-title-font-size);font-style:normal;font-weight:500;line-height:20px;}nv-notification [data-scope=container] [data-scope=content] [data-scope=message]{display:flex;flex-direction:column;align-items:flex-start;gap:var(--notification-gap-y);align-self:stretch;color:var(--components-notification-content-description);font-variant-numeric:lining-nums tabular-nums slashed-zero;font-size:var(--font-size-sm, 14px);font-style:normal;font-weight:400;line-height:var(--line-height-sm, 20px)}nv-notification [data-scope=container] [data-scope=content] [data-scope=actions]{display:flex;padding:var(--spacing-2, 8px) 0;padding-bottom:0px;align-items:flex-start;gap:var(--notification-gap-x);align-self:stretch;margin-left:calc(-1 * var(--button-sm-padding-x))}nv-notification[feedback=information] [data-scope=container]{background-color:var(--components-notification-information-background);border-color:var(--components-notification-information-border)}nv-notification[feedback=information] [data-scope=container]>nv-icon{color:var(--components-notification-information-icon)}nv-notification[feedback=information]>[data-scope=close]:focus,nv-notification[feedback=information]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=information]>[data-scope=close]:focus-visible,nv-notification[feedback=information]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-information-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=warning] [data-scope=container]{background-color:var(--components-notification-warning-background);border-color:var(--components-notification-warning-border)}nv-notification[feedback=warning] [data-scope=container]>nv-icon{color:var(--components-notification-warning-icon)}nv-notification[feedback=warning]>[data-scope=close]:focus,nv-notification[feedback=warning]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=warning]>[data-scope=close]:focus-visible,nv-notification[feedback=warning]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=error] [data-scope=container]{background-color:var(--components-notification-error-background);border-color:var(--components-notification-error-border)}nv-notification[feedback=error] [data-scope=container]>nv-icon{color:var(--components-notification-error-icon)}nv-notification[feedback=error]>[data-scope=close]:focus,nv-notification[feedback=error]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=error]>[data-scope=close]:focus-visible,nv-notification[feedback=error]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-error-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=success] [data-scope=container]{background-color:var(--components-notification-success-background);border-color:var(--components-notification-success-border)}nv-notification[feedback=success] [data-scope=container]>nv-icon{color:var(--components-notification-success-icon)}nv-notification[feedback=success]>[data-scope=close]:focus,nv-notification[feedback=success]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=success]>[data-scope=close]:focus-visible,nv-notification[feedback=success]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-success-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[feedback=neutral] [data-scope=container]{background-color:var(--components-notification-neutral-background);border-color:var(--components-notification-neutral-border)}nv-notification[feedback=neutral] [data-scope=container]>nv-icon{color:var(--components-notification-neutral-icon)}nv-notification[feedback=neutral]>[data-scope=close]:focus,nv-notification[feedback=neutral]>[data-scope=close]:focus-within{outline:none}nv-notification[feedback=neutral]>[data-scope=close]:focus-visible,nv-notification[feedback=neutral]>[data-scope=close]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-notification-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-notification[emphasis=high] [data-scope=container]{border-width:1px;border-left-width:var(--notification-border-width-high-emphasis);padding-left:calc(var(--notification-padding) - var(--notification-border-width-high-emphasis) + 1px)}nv-notification[emphasis=medium] [data-scope=container]{border-width:var(--notification-border-width-low-emphasis);border-color:var(--color-content-low-border, #E3E3E3)}";
+var NvNotificationStyle0 = nvNotificationCss;
+
+/**
+ * @slot heading - Use this slot to insert HTML as the notification title.
+ * @slot content - Use this slot to insert HTML as the notification message.
+ * @slot actions - Use this slot for custom actions.
+ */
+class NvNotification {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.hiddenChanged = createEvent(this, "hiddenChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Set a unique ID for the notification. Used for aria attributes and managing
+         * multiple notifications.
+         */
+        this.uid = v4();
+        /**
+         * Specifies the notification type which determines the color and default icon.
+         */
+        this.feedback = 'information';
+        /**
+         * Adjusts the emphasis to make the notification more or less visually
+         * prominent to users. Use this to draw attention to important actions or
+         * reduce focus on less critical ones
+         */
+        this.emphasis = 'medium';
+        /**
+         * Allows the notification to be dismissed via a close button (x). The
+         * notification is not dismissible unless explicitly enabled.
+         */
+        this.dismissible = false;
+        /**
+         * Controls the visibility of the notification.
+         */
+        this.hidden = false; // eslint-disable-line @stencil-community/reserved-member-names
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region INTERNAL
+        this.iconByFeedback = {
+            [FeedbackColors.Warning]: 'alert-circle',
+            [FeedbackColors.Information]: 'info-circle',
+            [FeedbackColors.Success]: 'circle-check',
+            [FeedbackColors.Error]: 'alert-triangle',
+            [FeedbackColors.Neutral]: 'help',
+        };
+        this.roleByFeedback = {
+            [FeedbackColors.Error]: 'alert',
+            [FeedbackColors.Warning]: 'alert',
+            [FeedbackColors.Information]: 'status',
+            [FeedbackColors.Success]: 'status',
+            [FeedbackColors.Neutral]: 'status',
+        };
+    }
+    //#endregion PROPERTIES
+    /****************************************************************************/
+    //#region METHODS
+    async dismiss() {
+        await this.dismissAnimation();
+    }
+    getDefaultIcon() {
+        var _a;
+        return (_a = this.iconByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'info-circle';
+    }
+    getAriaRole() {
+        var _a;
+        return (_a = this.roleByFeedback[this.feedback]) !== null && _a !== void 0 ? _a : 'status';
+    }
+    getAriaLive() {
+        return this.getAriaRole() === 'alert' ? 'assertive' : 'polite';
+    }
+    getHeadingId() {
+        return this.heading ? `nv-notification-${this.uid}-heading` : null;
+    }
+    getMessageId() {
+        return this.message ? `nv-notification-${this.uid}-message` : null;
+    }
+    async dismissAnimation() {
+        const { fadeOut } = useFade(this.container, { duration: 300 });
+        const { slideOut } = useSlide(this.container, { duration: 800 });
+        const { collapse } = useCollapse(this.el, {
+            duration: 800,
+            overflow: 'visible',
+        });
+        await parallel(fadeOut, slideOut, collapse).start();
+        this.hidden = true;
+        this.hiddenChanged.emit(true);
+    }
+    //#endregion INTERNAL
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.headingSlot = this.el.querySelector('[slot="heading"]');
+        this.messageSlot = this.el.querySelector('[slot="content"]');
+        this.actionsSlot = this.el.querySelector('[slot="actions"]');
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        var _a, _b, _c;
+        return (hAsync(Host, { key: '9146cea4ed72801aadf2fb4b7e44895038c98437', role: this.getAriaRole(), "aria-live": this.getAriaLive(), "aria-atomic": true, "aria-labelledby": (_a = this.getHeadingId()) !== null && _a !== void 0 ? _a : null, "aria-describedby": (_b = this.getMessageId()) !== null && _b !== void 0 ? _b : null, tabindex: "-1" }, hAsync("div", { key: 'beed9ae5f6fac1b0c6d103dd75a41e0aede84041', "data-scope": "container", ref: el => (this.container = el) }, this.dismissible && (hAsync("button", { key: '8e17f33867c2563de719dc1b0f0e2d4ae39ad1a6', "data-scope": "dismiss", type: "button", onClick: this.dismiss.bind(this) }, hAsync("nv-icon", { key: 'cb8850135bb2383e33a16671569547611b55e434', name: "x", size: "sm" }))), hAsync("nv-icon", { key: 'f5f58e1c3a94d854841271eb12af047322b2f0b4', name: (_c = this.icon) !== null && _c !== void 0 ? _c : this.getDefaultIcon(), size: "md" }), hAsync("div", { key: '9c6f6bb0315cd25260d483472a24832031ce45da', "data-scope": "content" }, (this.heading || this.headingSlot) && (hAsync("p", { key: '1013d6b6790f75682a1db0e43293b61e614f1c07', id: this.getHeadingId(), "data-scope": "heading" }, hAsync("slot", { key: '844a7bccf6f365d4e59dfdec9b3c9096cbeda798', name: "heading" }, this.heading))), (this.message || this.messageSlot) && (hAsync("p", { key: '6688e9dc927f6164ce60f27b84fdbeb257296504', id: this.getMessageId(), "data-scope": "message" }, hAsync("slot", { key: 'f0c0790faa40411970575240a081f0f0bf0e9aff', name: "content" }, this.message))), this.actionsSlot && (hAsync("div", { key: '0ba946edf5b3a8410da3b375e589613a2674fd15', "data-scope": "actions" }, hAsync("slot", { key: '0360ab92db66957f0290569c39307ced2be5922d', name: "actions" })))))));
+    }
+    get el() { return getElement(this); }
+    static get style() { return NvNotificationStyle0; }
+    static get cmpMeta() { return {
+        "$flags$": 4,
+        "$tagName$": "nv-notification",
+        "$members$": {
+            "uid": [513],
+            "feedback": [513],
+            "emphasis": [513],
+            "heading": [513],
+            "message": [513],
+            "icon": [513],
+            "dismissible": [516],
+            "hidden": [1540],
+            "dismiss": [64]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": [["uid", "uid"], ["feedback", "feedback"], ["emphasis", "emphasis"], ["heading", "heading"], ["message", "message"], ["icon", "icon"], ["dismissible", "dismissible"], ["hidden", "hidden"]]
+    }; }
+}
+
 /**
  * Custom positioning reference element.
  * @see https://floating-ui.com/docs/virtual-elements
@@ -26209,7 +26587,7 @@ class NvPopover {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '290f9c76a0a4db0648061ce3778bec21b5926ae4' }, hAsync("slot", { key: 'ca90cba5de160880308dfc12b1f82f0047c57b75', name: "trigger" }), hAsync("div", { key: 'f9b5e11a4a6fd63fe1a640acd936cf883fc91563', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '39f7287b5614326cc5eb29be9b94c70f1574671b', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '45ac045f3669f3ebe3e8200bff75b26284e609a6', name: "content" }))));
+        return (hAsync(Host, { key: 'dc7ef1862f1a1da4b32e02bee827f81545df73d1' }, hAsync("slot", { key: '7535c2ba2b1f600c237602c68a04c85fd9d6d98b', name: "trigger" }), hAsync("div", { key: '8e7907e2fda20d35b00642eca0507aa20e56f7cb', "data-scope": "popover", "data-strategy": this.strategy, hidden: true, ref: el => (this.popoverElement = el) }, this.hasArrow && (hAsync("div", { key: '4e081e84e9597b69351253d1c1b89c115cdcfd9a', "data-scope": "arrow", ref: el => (this.arrowElement = el) })), hAsync("slot", { key: '5bcd80588e9746db974cee69c5963b698665d105', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26256,7 +26634,7 @@ class NvRow {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '91a990d393ce32b86f66729fc69068a4a5754fe4' }, hAsync("slot", { key: '867eaa3d6b5760f3a8763a59d36c592d56325e9e' })));
+        return (hAsync(Host, { key: '8415bdad0106bd3d836996c617a749294e0c19e2' }, hAsync("slot", { key: '77c069ced0dc25c4169945877c388f30d27fdc4f' })));
     }
     static get style() { return NvRowStyle0; }
     static get cmpMeta() { return {
@@ -26291,7 +26669,7 @@ class NvStack {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '6a314d1f6679d4cbbd01fc08ce54fc0f7709e3e0', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: 'd3c5d0fd8f44b23a3cfae00aa39de8722babca2a' })));
+        return (hAsync(Host, { key: '66123f22ad4a6ebefe8663c795274eb900d2c178', class: clsx(this.fill && 'nv-stack-fill', this.flex && 'nv-stack-flex', this.full && 'w-full', this.gutter && !this.vertical && `gap-x-${this.gutter}`, this.gutter && this.vertical && `gap-y-${this.gutter}`, this.vertical && 'nv-stack-vertical') }, hAsync("slot", { key: '7b3d395c3490664f0e2f337a04f69cc717ed6c0e' })));
     }
     static get style() { return NvStackStyle0; }
     static get cmpMeta() { return {
@@ -26628,14 +27006,14 @@ class NvTable {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table.data;
-        return (hAsync(Host, { key: '1b6e90df16e6f35fab46bdd7b9366122ace0c93f' }, hAsync("div", { key: '77d54a2d44fad92dd8eae7bba4752adb6da28406', class: "hidden" }, hAsync("slot", { key: 'c5f9508d2ffcd61dd660acd11df74d7d1bf12516' })), hAsync("slot", { key: 'b1dc1a74cafbd302a9b81d1226ee7e7f4061c357', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
+        return (hAsync(Host, { key: 'ea0b3237145fbc199d356010f1e001797afc52d6' }, hAsync("div", { key: 'd3bf41bad48e549d1799b2c8e55a308a7d767973', class: "hidden" }, hAsync("slot", { key: '8263220ebd266240b16228b67f8d215d7d56afd7' })), hAsync("slot", { key: '36d43d6870cf9a6021521579c0507afd1fe85081', name: "before" }), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (hAsync("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (hAsync("table", { class: "table" }, this.parsedColumns.length > 0 && headerGroups.length > 0 && (hAsync("thead", { class: "table-header" }, hAsync("tr", null, headerGroups &&
             headerGroups.map(col => {
                 return (hAsync("th", { key: col.name }, this.renderTemplate(this.headerTemplateCache.get(col.name), {}) || col.header));
             })))), hAsync("tbody", { class: "table-body" }, !rows || rows.length === 0 ? (hAsync("tr", null, hAsync("td", { colSpan: headerGroups.length || 12, class: "no-data" }, this.noDataMessage))) : (rows.map(row => (hAsync("tr", { key: JSON.stringify(row) }, headerGroups.map(col => {
             var _a;
             return (hAsync("td", null, this.renderTemplate(this.templateCache.get(col.name), row) ||
                 ((_a = row[col.name]) !== null && _a !== void 0 ? _a : this.fallbackValue)));
-        })))))))), hAsync("slot", { key: '2b90fd6d1e626faff3e7eb08e2b319ce02de4ec3', name: "after" })));
+        })))))))), hAsync("slot", { key: '233b61e9099f58ca0eeeb7d0f7fdc7bd71bc9065', name: "after" })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -26755,8 +27133,8 @@ class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: 'caafe3f48598a1323132e20b0492070e73c95885', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '2b95ace9e3713bfeda007d8d9eb693fca688b45f', class: "input-container" }, hAsync("input", { key: '703e41e527f018071ac7d02d8318314014568995', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: '54b2d88481800d6f988900ca6405a45ecad48352', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '41f04a6166fada0f522e5a6682d50b9e14d26ca1', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '6f24ee6e06ea767e04263a3451e29b24b8d8bf95', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: 'ec177dadeadba62b9e69a6f3577a7a8166abb029', class: "description" }, hAsync("slot", { key: 'd52e04c1aa3a607015f01fed95cb9f2300071087', name: "description" }, this.description))))));
+        return (hAsync(Host, { key: 'db161d2edfcf7f83381b6431c8bc70a22c04fbf3', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, hAsync("div", { key: '086d6c429b4b7bcaa23093b13d30cf6ba21912f8', class: "input-container" }, hAsync("input", { key: 'e83f407f2c3643c245198131a7991545b73dde78', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), hAsync("div", { key: 'eb5af410d1c643c70a4364948bf8fad9d54e74df', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (hAsync("label", { key: '54793fd81258bee7676801f23da4f5fb554242bf', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, hAsync("slot", { key: '6af650d9677d1eb0f8cfa77cbcd6318f2d6f8aaf', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (hAsync("div", { key: '2c157429288779ad6cc18d4e318e64830a657c54', class: "description" }, hAsync("slot", { key: 'fcfae2a0d7cdcc76d4b23c4b376c8e2496e11bb5', name: "description" }, this.description))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -26832,7 +27210,7 @@ class NvTogglebutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '81e773d6bafc0fd451fb7e71cb14ca709af2d07e', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, hAsync("slot", { key: '4cec2d6ae5388cdfd285ab15af356e9833b0ccb3' })));
+        return (hAsync(Host, { key: 'cb15a84c7e7cc27a80773613f31b98168eee8475', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, hAsync("slot", { key: '32d6b9394088d88c4671fb7809ad6aa85b240fff' })));
     }
     static get style() { return NvTogglebuttonStyle0; }
     static get cmpMeta() { return {
@@ -27008,7 +27386,7 @@ class NvTogglebuttongroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '52e2d0e1b8f0740a50a8d4d1e93af494e957b521' }, hAsync("slot", { key: 'a82248437817b4fd7aa1c64e4d544050a71b4311' })));
+        return (hAsync(Host, { key: 'ce185699fabd71bb5c22e5a0d73df88067acb9d6' }, hAsync("slot", { key: 'a1e375fb1e8660f3fdb75d96f18db20735a3a64d' })));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -27079,7 +27457,7 @@ class NvTooltip {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (hAsync(Host, { key: '02f95c0f1f41fe11785859fc8f1bf585cbe35af5' }, hAsync("slot", { key: '338049b6a5ce354b5ddcba1f183488e2f6b2116e' }), hAsync("nv-popover", { key: 'f2e82343908d4e59a3ecf93f791c2756f29714ae', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'ee35eff1233d1d03accdff3260b6d71ef0815d47', slot: "content" }, this.message), hAsync("slot", { key: '1a5cdc8a671ea9f3f84cb0414579b9a85a183630', name: "content" }))));
+        return (hAsync(Host, { key: 'e0b68e5ade824e2b0f9c5e5cac140349412c919d' }, hAsync("slot", { key: 'd61a58d034818fdba87b4ab17ce903bbb13a47ff' }), hAsync("nv-popover", { key: '408df675045f95adf270025f83285b2e125873c5', triggerMode: "hover", hasArrow: true, placement: this.placement, strategy: this.strategy, triggerElement: this.triggerElement, groupName: 'tooltip', enterDelay: this.enterDelay }, hAsync("p", { key: 'e4f860f09f5e5ef83b5e704c271781f41a643e59', slot: "content" }, this.message), hAsync("slot", { key: '2e2e4dcae68651d734696e718c59389f712562df', name: "content" }))));
     }
     get el() { return getElement(this); }
     static get style() { return NvTooltipStyle0; }
@@ -27136,6 +27514,7 @@ registerComponents([
   NvLoader,
   NvMenu,
   NvMenuitem,
+  NvNotification,
   NvPopover,
   NvRow,
   NvStack,