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

package/dist/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-jBgPO7HC.js');
+var index = require('./index-Jgn7NELT.js');
 require('react');
 
 
@@ -43,6 +43,10 @@ Object.defineProperty(exports, "LoaderColors", {
 	enumerable: true,
 	get: function () { return index.LoaderColors; }
 });
+Object.defineProperty(exports, "NotificationEmphasis", {
+	enumerable: true,
+	get: function () { return index.NotificationEmphasis; }
+});
 exports.NvAccordion = index.NvAccordion;
 exports.NvAccordionItem = index.NvAccordionItem;
 exports.NvAlert = index.NvAlert;
@@ -79,6 +83,7 @@ exports.NvIconbutton = index.NvIconbutton;
 exports.NvLoader = index.NvLoader;
 exports.NvMenu = index.NvMenu;
 exports.NvMenuitem = index.NvMenuitem;
+exports.NvNotification = index.NvNotification;
 exports.NvPopover = index.NvPopover;
 exports.NvRow = index.NvRow;
 exports.NvStack = index.NvStack;

package/dist/cjs/{nv-accordion-item.entry-BUb_Apy8.js → nv-accordion-item.entry-C7vVmDCg.js}

@@ -1,27 +1,36 @@
 'use strict';
 
-var index = require('./index-jBgPO7HC.js');
-var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
-require('./stylefire.es-74da334a-y0piPjlz.js');
+var index = require('./index-Jgn7NELT.js');
+var collapse_animationAcda1bf5 = require('./collapse.animation-acda1bf5-BuORVmQv.js');
+require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
 require('react');
 
-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))}";
 const NvAccordionItemStyle0 = nvAccordionItemCss;
 
 const NvAccordionItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.itemToggle = index.createEvent(this, "itemToggle");
-        /** 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
@@ -42,7 +51,7 @@ const NvAccordionItem = class {
          * @param {Event} e - Click event
          */
         this.handleIconClick = (e) => {
-            e.stopPropagation(); // Prevent header click from triggering
+            e.stopPropagation();
             this.toggle();
         };
         /**
@@ -50,8 +59,10 @@ const NvAccordionItem = class {
          * @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 ' ':
@@ -61,17 +72,19 @@ const NvAccordionItem = class {
                 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;
             }
@@ -81,12 +94,23 @@ const NvAccordionItem = class {
     /****************************************************************************/
     //#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
     /****************************************************************************/
@@ -96,18 +120,18 @@ const NvAccordionItem = class {
      * @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 } = collapse_animation16e3af45.useCollapse(this.contentRef, {
+        const { collapse, expand } = collapse_animationAcda1bf5.useCollapse(this.contentRef, {
             duration: 200,
         });
         if (open) {
-            // Expand with animation
             await expand();
         }
         else {
-            // Collapse with animation
             await collapse();
         }
         this.isAnimating = false;
@@ -116,19 +140,24 @@ const NvAccordionItem = class {
     /****************************************************************************/
     //#region LIFECYCLE
     componentWillLoad() {
-        this.currentOpenState = this.open; // Initial synchronization
+        this.currentOpenState = this.open;
     }
     componentDidLoad() {
         if (this.contentRef) {
-            const { setExpanded, setCollapsed } = collapse_animation16e3af45.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 } = collapse_animationAcda1bf5.useCollapse(this.contentRef, {
+                    duration: 200,
+                });
+                if (this.open) {
+                    setExpanded();
+                    this.currentOpenState = true;
+                }
+                else {
+                    setCollapsed();
+                    this.currentOpenState = false;
+                }
+                this.isInitialized = true;
+            }, 0);
         }
     }
     disconnectedCallback() {
@@ -144,10 +173,14 @@ const NvAccordionItem = class {
      */
     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)');
         }
     }
     /**
@@ -155,18 +188,19 @@ const NvAccordionItem = class {
      * @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 (index.h(index.Host, { key: 'dfb8ca76f8ac40c938323be1ccba4353ea33a616', class: {
+        return (index.h(index.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' }, index.h("div", { key: '258efe0502a39d963a9e75c16285ee9cbc65cb9f', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, index.h("slot", { key: 'bb4dae743f06e3d41d1f7b8c17793b668df9347b', name: "header" }, index.h("div", { key: 'f3142a81c6be776d95ab9292101b889db6e35805', class: "nv-accordion-item__header-content" }, this.itemTitle && (index.h("span", { key: 'e897d8b4d414ba4e93b2853c152059579063335e', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (index.h("span", { key: 'b8e03ceb1ca0e4c0b0fe24398f0e1c592ac077ab', class: "nv-accordion-item__subtitle" }, this.subtitle)))), index.h("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' })), index.h("div", { key: '667967ca20edaa1fc738188f42cfa8bf47bb080f', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, index.h("div", { key: '1f66bac904a5992d5e6cd63852d5aec9bc602ed7', class: "nv-accordion-item__content-inner" }, index.h("slot", { key: 'd7b5cf5c69daab242e7696e7432769905b3d4c72', name: "content" })))));
+            }, role: "listitem", "aria-expanded": this.currentOpenState ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false' }, index.h("div", { key: '866562d2f3033189e6d5df8fa5576d2f1540959e', class: "nv-accordion-item__header", onClick: this.handleHeaderClick, "aria-controls": "content" }, index.h("slot", { key: '36d2b14528c6bd6665ccfc94707d62dc406262d0', name: "header" }, index.h("div", { key: 'c78c1e485d0128708db6fc5fb2b64c6c01e4ed0f', class: "nv-accordion-item__header-content" }, this.itemTitle && (index.h("span", { key: '524cf377a4c89752eeed1933dbb8fd2343cd8830', class: "nv-accordion-item__title" }, this.itemTitle)), this.subtitle && (index.h("span", { key: 'b8ee5edc3c798218348490fc43c458c45934ee83', class: "nv-accordion-item__subtitle" }, this.subtitle)))), index.h("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' })), index.h("div", { key: '3b49afd97cc797b165a8fa6753f564349735aad1', id: "content", class: "nv-accordion-item__content", ref: el => (this.contentRef = el) }, index.h("div", { key: '955b5c7cef3259a2531ecc14eafb806a9d28c9a6', class: "nv-accordion-item__content-inner" }, index.h("slot", { key: '56ff89e2041d425f520fe6e62975bbb7193653f2', name: "content" })))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/nv-accordion.entry-CFynyAOo.js

@@ -0,0 +1,178 @@
+'use strict';
+
+var index = require('./index-Jgn7NELT.js');
+require('react');
+
+const nvAccordionCss = "nv-accordion{display:block;border:var(--spacing-px) solid var(--color-content-low-border);border-radius:var(--radius-rounded-lg)}nv-accordion .nv-accordion__footer{padding:var(--spacing-3);background:var(--color-level-05-background);border-radius:0 0 var(--radius-rounded-lg) var(--radius-rounded-lg);margin-top:calc(var(--spacing-px) * -1);border-top:var(--spacing-px) solid var(--color-content-low-border)}nv-accordion .nv-accordion__footer:empty{display:none}";
+const NvAccordionStyle0 = nvAccordionCss;
+
+const NvAccordion = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.openChanged = index.createEvent(this, "openChanged");
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Data to display as a list of items (title, subtitle, content).
+         */
+        this.data = [];
+        /**
+         * 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
+        this.updatingFromInternal = false;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region METHODS
+    /**
+     * Opens an item by its index (Public API)
+     * @param {number} index Index of the item to open
+     */
+    async open(index) {
+        this.toggleItem(index, true);
+    }
+    /**
+     * Closes an item by its index (Public API)
+     * @param {number} index Index of the item to close
+     */
+    async close(index) {
+        this.toggleItem(index, false);
+    }
+    /**
+     * Toggles an item's state (internal)
+     * @param {number} index Item index
+     * @param {boolean} [forceOpen] Force open (true) or close (false)
+     */
+    toggleItem(index, forceOpen) {
+        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 || (forceOpen === undefined && isOpen)
+                    ? []
+                    : [index];
+        }
+        else {
+            if (forceOpen === false) {
+                openIndexes = openIndexes.filter(i => i !== index);
+            }
+            else if (forceOpen === true && !isOpen) {
+                openIndexes.push(index);
+            }
+            else if (forceOpen === undefined) {
+                openIndexes = isOpen
+                    ? openIndexes.filter(i => i !== index)
+                    : [...openIndexes, index];
+            }
+        }
+        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 openIndexes
+     */
+    async updateChildrenState() {
+        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');
+            index.forceUpdate(item);
+        });
+    }
+    /**
+     * Listens to itemToggle events from nv-accordion-item elements
+     * @param {CustomEvent<boolean>} event Event emitted by nv-accordion-item
+     */
+    onItemToggle(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) {
+            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.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() {
+        var _a;
+        return (index.h(index.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 (index.h("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 ? (index.h("div", { slot: "header" }, index.h("div", { class: "nv-accordion-item__header-content" }, index.h("span", { class: "nv-accordion-item__title" }, item.title), index.h("span", { class: "nv-accordion-item__subtitle" }, item.subtitle)))) : null, index.h("div", { slot: "content" }, item.content), item.footer && index.h("div", { slot: "footer" }, item.footer)));
+        })) : (index.h("slot", null))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "openIndexes": ["onOpenIndexesChange"],
+        "mode": ["onModeChange"]
+    }; }
+};
+NvAccordion.style = NvAccordionStyle0;
+
+exports.nv_accordion = NvAccordion;

package/dist/cjs/{nv-alert.entry-nzJu8E5h.js → nv-alert.entry-C_FMs0Yi.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./index-jBgPO7HC.js');
+var index = require('./index-Jgn7NELT.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constantsA857c476 = require('./constants-a857c476-Cj2b-su0.js');
-var collapse_animation16e3af45 = require('./collapse.animation-16e3af45-CChx_tQJ.js');
-var fade_animation71e8e34c = require('./fade.animation-71e8e34c-BAw_TYsB.js');
-require('./stylefire.es-74da334a-y0piPjlz.js');
-var timeline_animationAdf35ecb = require('./timeline.animation-adf35ecb-CE6Dsdxr.js');
+var constantsD0f19e7b = require('./constants-d0f19e7b-s0SCO_vi.js');
+var collapse_animationAcda1bf5 = require('./collapse.animation-acda1bf5-BuORVmQv.js');
+var fade_animationEb454088 = require('./fade.animation-eb454088-Bma0SpTf.js');
+require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
+var timeline_animation79215cd4 = require('./timeline.animation-79215cd4-KteJaZPb.js');
 require('react');
 
-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}";
 const NvAlertStyle0 = nvAlertCss;
 
 const NvAlert = class {
@@ -63,15 +63,15 @@ const NvAlert = class {
          */
         this.getDefaultIcon = () => {
             switch (this.feedback) {
-                case constantsA857c476.FeedbackColors.Warning:
+                case constantsD0f19e7b.FeedbackColors.Warning:
                     return 'alert-circle';
-                case constantsA857c476.FeedbackColors.Information:
+                case constantsD0f19e7b.FeedbackColors.Information:
                     return 'info-circle';
-                case constantsA857c476.FeedbackColors.Success:
+                case constantsD0f19e7b.FeedbackColors.Success:
                     return 'circle-check';
-                case constantsA857c476.FeedbackColors.Error:
+                case constantsD0f19e7b.FeedbackColors.Error:
                     return 'alert-circle';
-                case constantsA857c476.FeedbackColors.Neutral:
+                case constantsD0f19e7b.FeedbackColors.Neutral:
                     return 'help';
                 default:
                     return 'info-circle';
@@ -117,15 +117,15 @@ const NvAlert = class {
             this.toggleHiddenClass(hidden);
             return;
         }
-        const { fadeIn, fadeOut } = fade_animation71e8e34c.useFade(this.ref, { duration: 150 });
-        const { collapse, expand } = collapse_animation16e3af45.useCollapse(this.ref, { duration: 150 });
+        const { fadeIn, fadeOut } = fade_animationEb454088.useFade(this.el, { duration: 150 });
+        const { collapse, expand } = collapse_animationAcda1bf5.useCollapse(this.el, { duration: 250 });
         if (hidden) {
-            await timeline_animationAdf35ecb.timeline(fadeOut, collapse).start();
+            await timeline_animation79215cd4.timeline(fadeOut, collapse).start();
             this.toggleHiddenClass(true);
         }
         else {
             this.toggleHiddenClass(false);
-            await timeline_animationAdf35ecb.timeline(expand, fadeIn).start();
+            await timeline_animation79215cd4.timeline(expand, fadeIn).start();
         }
     }
     /**
@@ -133,7 +133,7 @@ const NvAlert = class {
      * @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
     /****************************************************************************/
@@ -155,7 +155,7 @@ const NvAlert = class {
             }
         }
         if (this.hidden) {
-            this.ref.classList.add('hidden');
+            this.el.classList.add('hidden');
         }
     }
     //#endregion LIFECYCLE
@@ -163,9 +163,9 @@ const NvAlert = class {
     //#region RENDER
     render() {
         var _a;
-        return (index.h(index.Host, { key: 'f0e75ac2c38aced1dcf76cb1d5f03becefbee71d', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: '19f7fcf452d62277ab436acd20c285f44fbaecd4', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '8e656ffd0bce63bd33d92b97df21389af265e182', class: "content" }, this.heading && index.h("p", { key: '0aa928e8ee8605d735f890bc67128563ce3ad379', class: "heading" }, this.heading), this.message && index.h("p", { key: '690d9928646d25a636b2bb04eb65eee40c402f52', class: "message" }, this.message), index.h("slot", { key: '86309f093688dbb81ff805f1c9137b200541e905' })), this.dismissible && (index.h("button", { key: '387695ff1e23a7e289cf58c51042ccc561d451ad', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: '788b99b4c56fc8c936a67ac48d2db37fdcca7631', name: "x", size: "sm" })))));
+        return (index.h(index.Host, { key: '08bc48f1d9bba66505e46fb26b8400f185dcc716', role: "alert", class: clsx297c1ffe.clsx('root', `feedback-${this.feedback}`) }, index.h("nv-icon", { key: 'b4846e6aee8cf6cfde913372b11675a3c0301fa3', name: (_a = this.icon) !== null && _a !== void 0 ? _a : this.getDefaultIcon(), class: `icon-${this.feedback}`, size: "md" }), index.h("div", { key: '61edadca039963056bdf27914829286515269a4a', class: "content" }, this.heading && index.h("p", { key: '25c0396ade2573a9f955302cfe52702fe5e4f531', class: "heading" }, this.heading), this.message && index.h("p", { key: 'dbef6eac9028f5431bb9665ca5642af5278c20d7', class: "message" }, this.message), index.h("slot", { key: '5aa607cb7c48783371887fd9126b247647e8b37c' })), this.dismissible && (index.h("button", { key: 'e6be3501788f12fac97c162c0ed64c922acd4b22', class: "close", type: "button", onClick: this.handleDismiss }, index.h("nv-icon", { key: 'f39c94a6cf82226eb77143bce7b4d74aff30c05a', name: "x", size: "sm" })))));
     }
-    get ref() { return index.getElement(this); }
+    get el() { return index.getElement(this); }
     static get watchers() { return {
         "hidden": ["handleHiddenChange"]
     }; }

package/dist/cjs/{nv-avatar.entry-BPp1d-QO.js → nv-avatar.entry-BvjSzIHn.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./index-jBgPO7HC.js');
+var index = require('./index-Jgn7NELT.js');
 var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constantsA857c476 = require('./constants-a857c476-Cj2b-su0.js');
+var constantsD0f19e7b = require('./constants-d0f19e7b-s0SCO_vi.js');
 require('react');
 
 const nvAvatarCss = "nv-avatar{align-items:center !important;background-color:var(--components-avatar-background-1);border-radius:var(--radius-rounded-full) !important;display:flex !important;flex-shrink:0 !important;font-family:\"TT Norms Pro\", sans-serif;font-style:normal;font-weight:var(--font-weight-medium-emphasis);justify-content:center !important;leading-trim:both;line-height:1 !important;text-align:center;text-edge:cap;text-transform:uppercase}nv-avatar.avatar-color-1{background-color:var(--components-avatar-background-1);color:var(--components-avatar-content-1)}nv-avatar.avatar-color-2{background-color:var(--components-avatar-background-2);color:var(--components-avatar-content-2)}nv-avatar.avatar-color-3{background-color:var(--components-avatar-background-3);color:var(--components-avatar-content-3)}nv-avatar.avatar-color-4{background-color:var(--components-avatar-background-4);color:var(--components-avatar-content-4)}nv-avatar.avatar-color-5{background-color:var(--components-avatar-background-5);color:var(--components-avatar-content-5)}nv-avatar.avatar-color-6{background-color:var(--components-avatar-background-6);color:var(--components-avatar-content-6)}nv-avatar.avatar-color-7{background-color:var(--components-avatar-background-7);color:var(--components-avatar-content-7)}nv-avatar.avatar-color-8{background-color:var(--components-avatar-background-8);color:var(--components-avatar-content-8)}nv-avatar.avatar-color-9{background-color:var(--components-avatar-background-9);color:var(--components-avatar-content-9)}nv-avatar.avatar-color-10{background-color:var(--components-avatar-background-10);color:var(--components-avatar-content-10)}nv-avatar img{height:100%;width:100%;object-fit:cover;object-position:center;border-radius:50%}nv-avatar.avatar-xs{width:var(--avatar-xs-size);height:var(--avatar-xs-size);font-size:var(--avatar-xs-font-size);line-height:var(--avatar-xs-font-size)}nv-avatar.avatar-xs nv-icon>svg{width:var(--spacing-3);height:var(--spacing-3);stroke-width:1.2px}nv-avatar.avatar-sm{width:var(--avatar-sm-size);height:var(--avatar-sm-size);font-size:var(--avatar-sm-font-size);line-height:var(--avatar-sm-font-size)}nv-avatar.avatar-sm nv-icon>svg{width:var(--spacing-4);height:var(--spacing-4);stroke-width:1.5px}nv-avatar.avatar-md{width:var(--avatar-md-size);height:var(--avatar-md-size);font-size:var(--avatar-md-font-size);line-height:var(--avatar-md-font-size)}nv-avatar.avatar-md nv-icon>svg{width:var(--spacing-5);height:var(--spacing-5);stroke-width:1.6px}nv-avatar.avatar-lg{width:var(--avatar-lg-size);height:var(--avatar-lg-size);font-size:var(--avatar-lg-font-size);line-height:var(--avatar-lg-font-size)}nv-avatar.avatar-lg nv-icon>svg{width:var(--spacing-6);height:var(--spacing-6);stroke-width:1.8px}nv-avatar.avatar-xl{width:var(--avatar-xl-size);height:var(--avatar-xl-size);font-size:var(--avatar-xl-font-size);line-height:var(--avatar-xl-font-size)}nv-avatar.avatar-xl nv-icon>svg{width:var(--spacing-7);height:var(--spacing-7);stroke-width:1.9px}";
@@ -23,19 +23,19 @@ const NvAvatar = class {
     }
     componentWillRender() {
         if (this.xsmall) {
-            this.size = constantsA857c476.SemanticSizes.ExtraSmall;
+            this.size = constantsD0f19e7b.SemanticSizes.ExtraSmall;
         }
         if (this.small) {
-            this.size = constantsA857c476.SemanticSizes.Small;
+            this.size = constantsD0f19e7b.SemanticSizes.Small;
         }
         if (this.medium) {
-            this.size = constantsA857c476.SemanticSizes.Medium;
+            this.size = constantsD0f19e7b.SemanticSizes.Medium;
         }
         if (this.large) {
-            this.size = constantsA857c476.SemanticSizes.Large;
+            this.size = constantsD0f19e7b.SemanticSizes.Large;
         }
         if (this.xlarge) {
-            this.size = constantsA857c476.SemanticSizes.ExtraLarge;
+            this.size = constantsD0f19e7b.SemanticSizes.ExtraLarge;
         }
         if (this.text) {
             this.initials = this.text;