npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.24.0 → 3.25.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1239) hide show

package/dist/cjs/nv-datagrid.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,7 @@
 'use strict';
-var index = require('./index-B1na8x6M.js');
+var index = require('./index-BQjqJTJB.js');
+var dom_utils = require('./dom.utils-8VY5SfMZ.js');
 var constants = require('./constants-BugGJYqL.js');
 /**
@@ -3291,170 +3292,6 @@ function getSortedRowModel() {
   }, getMemoOptions(table.options, 'debugTable', 'getSortedRowModel', () => table._autoResetPageIndex()));
 }
-/* eslint-disable @typescript-eslint/no-explicit-any */
-/**
- * All properties that should be excluded from the deep copy of an HTML element.
- */
-const excludedProps = new Set([
-    // Text and content-related properties
-    'textContent',
-    'innerText',
-    'outerText',
-    'innerHTML',
-    'outerHTML',
-    'text',
-    // Form element properties
-    'value',
-    'defaultValue',
-    'checked',
-    'defaultChecked',
-    'selectionStart',
-    'selectionEnd',
-    'selectionDirection',
-    'form',
-    'willValidate',
-    'validity',
-    'validationMessage',
-    'labels',
-    'list',
-    'maxLength',
-    'minLength',
-    'valueAsDate',
-    'valueAsNumber',
-    // Editability and namespaces
-    'contentEditable',
-    'isContentEditable',
-    'namespaceURI',
-    // Child-related properties (handled recursively)
-    'attributes',
-    'children',
-    'childNodes',
-    'firstChild',
-    'lastChild',
-    // Blazor-related properties
-    'origin',
-    'dataset',
-    'attributeStyleMap',
-    'prefix',
-    'localName',
-    'tagName',
-    'shadowRoot',
-    'assignedSlot',
-    'scrollWidth',
-    'scrollHeight',
-    'clientTop',
-    'clientLeft',
-    'clientWidth',
-    'clientHeight',
-    'firstElementChild',
-    'lastElementChild',
-    'childElementCount',
-    'previousElementSibling',
-    'nextElementSibling',
-    'currentCSSZoom',
-    'nodeType',
-    'nodeName',
-    'baseURI',
-    'isConnected',
-    'ownerDocument',
-    'parentNode',
-    'parentElement',
-    'previousSibling',
-    'nextSibling',
-    'ELEMENT_NODE',
-    'ATTRIBUTE_NODE',
-    'TEXT_NODE',
-    'CDATA_SECTION_NODE',
-    'ENTITY_REFERENCE_NODE',
-    'ENTITY_NODE',
-    'PROCESSING_INSTRUCTION_NODE',
-    'COMMENT_NODE',
-    'DOCUMENT_NODE',
-    'DOCUMENT_TYPE_NODE',
-    'DOCUMENT_FRAGMENT_NODE',
-    'NOTATION_NODE',
-    'DOCUMENT_POSITION_DISCONNECTED',
-    'DOCUMENT_POSITION_PRECEDING',
-    'DOCUMENT_POSITION_FOLLOWING',
-    'DOCUMENT_POSITION_CONTAINS',
-    'DOCUMENT_POSITION_CONTAINED_BY',
-    'DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC',
-]);
-/**
- * Deep copy an HTML element with all its attributes, properties, and child nodes.
- * This method is useful for creating a clone of an element that can be safely modified without affecting the original.
- * @param {HTMLElement} element - The HTML element to copy.
- * @returns {HTMLElement} - A deep copy of the HTML element.
- * @example const copy = deepCopyElement(document.getElementById('myElement'));
- */
-function deepCopyElement(element) {
-    const copy = document.createElement(element.tagName);
-    // ✅ Copy attributes
-    Array.from(element.attributes).forEach(attr => {
-        copy.setAttribute(attr.name, attr.value);
-    });
-    // ✅ Dynamically extract relevant properties
-    const properties = new Set();
-    // Collect only own enumerable properties
-    Object.keys(element).forEach(key => properties.add(key));
-    // Collect inherited properties from prototypes (HTMLElement -> Element -> Node)
-    let proto = Object.getPrototypeOf(element);
-    while (proto && proto !== HTMLElement.prototype) {
-        Object.keys(proto).forEach(key => properties.add(key));
-        proto = Object.getPrototypeOf(proto);
-    }
-    // ✅ Filter and copy only non-function properties (methods are excluded) and non-event listeners
-    properties.forEach(prop => {
-        if (typeof element[prop] !== 'function' && // Ignore methods
-            !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-            !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
-        ) {
-            try {
-                copy[prop] = element[prop];
-            }
-            catch (error) {
-                console.warn(`Could not copy property ${prop}:`, error.message);
-            }
-        }
-    });
-    // ✅ Copy dataset separately
-    Object.assign(copy.dataset, element.dataset);
-    // ✅ Handle form elements specifically
-    if (element instanceof HTMLInputElement) {
-        copy.value = element.value;
-        copy.checked = element.checked;
-        copy.defaultValue = element.defaultValue;
-        copy.defaultChecked = element.defaultChecked;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection = element.selectionDirection;
-    }
-    else if (element instanceof HTMLTextAreaElement) {
-        copy.value = element.value;
-        copy.defaultValue = element.defaultValue;
-        copy.selectionStart = element.selectionStart;
-        copy.selectionEnd = element.selectionEnd;
-        copy.selectionDirection =
-            element.selectionDirection;
-    }
-    else if (element instanceof HTMLSelectElement) {
-        copy.value = element.value;
-        copy.selectedIndex = element.selectedIndex;
-    }
-    // ✅ Recursively copy child nodes (prevent duplicates)
-    element.childNodes.forEach(child => {
-        let childCopy;
-        if (child.nodeType === Node.ELEMENT_NODE) {
-            childCopy = deepCopyElement(child);
-        }
-        else {
-            childCopy = child.cloneNode(true);
-        }
-        copy.appendChild(childCopy);
-    });
-    return copy;
-}
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /**
  * Debounce function to prevent multiple calls in a short
@@ -3475,7 +3312,7 @@ function debounce(func, wait) {
     };
 }
-const nvDatagridCss = "nv-datagrid{--nv-datagrid-border-default:var(\n    --components-form-field-border-default\n  );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(\n    --components-form-field-background-default\n  );--nv-datagrid-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-datagrid-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-datagrid-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-datagrid-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);min-height:var(--spacing-12);padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-high-emphasis);color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);min-height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-low-emphasis);color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}";
+const nvDatagridCss = () => `nv-datagrid{--nv-datagrid-border-default:var(     --components-form-field-border-default   );--nv-datagrid-border-hover:var(--components-form-field-border-hover);--nv-datagrid-border-focus:var(--components-form-field-border-default);--nv-datagrid-background-default:var(     --components-form-field-background-default   );--nv-datagrid-background-checked:var(     --components-form-field-background-checked   );--nv-datagrid-background-disabled:var(     --components-form-field-background-disabled   );--nv-datagrid-color-checked:var(     --components-form-shape-foreground-default   );--nv-datagrid-color-disabled:var(     --components-form-shape-foreground-disabled   );--nv-datagrid-outline-color:var(--color-focus-brand);display:block}nv-datagrid .hidden{display:none}nv-datagrid table{border-collapse:collapse;border-color:inherit;text-indent:0;width:100%}nv-datagrid th{text-align:left;border-bottom:1px solid var(--components-datagrid-header-border);min-height:var(--spacing-12);padding:var(--datagrid-cell-header-padding-y) var(--datagrid-cell-header-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-high-emphasis);color:var(--components-datagrid-header-text)}nv-datagrid td{border-bottom:1px solid var(--components-datagrid-body-border);min-height:var(--spacing-12);max-height:var(--spacing-14);padding:var(--datagrid-cell-body-padding-y) var(--datagrid-cell-body-padding-x);font-size:var(--font-size-md);font-weight:var(--font-weight-low-emphasis);color:var(--components-datagrid-body-text);white-space:nowrap;text-overflow:ellipsis}nv-datagrid tbody>tr:hover{background:var(--color-interaction-container-neutral-background-hover)}nv-datagrid .cursor-pointer{cursor:pointer}nv-datagrid .select-none{-webkit-user-select:none;user-select:none}nv-datagrid .search-container{display:flex}nv-datagrid .checkbox-container{position:relative;color:var(--nv-datagrid-color-checked)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-datagrid-color-disabled)}nv-datagrid .checkbox-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-datagrid-border-default);background:var(--nv-datagrid-background-default)}nv-datagrid .checkbox-container input[type=checkbox]:hover{border-color:var(--nv-datagrid-border-hover)}nv-datagrid .checkbox-container input[type=checkbox]:focus{border-color:var(--nv-datagrid-border-focus)}nv-datagrid .checkbox-container input[type=checkbox]:focus,nv-datagrid .checkbox-container input[type=checkbox]:focus-within{outline:none}nv-datagrid .checkbox-container input[type=checkbox]:focus-visible,nv-datagrid .checkbox-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-datagrid-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-datagrid .checkbox-container input[type=checkbox]:checked,nv-datagrid .checkbox-container input[type=checkbox]:indeterminate{background:var(--nv-datagrid-background-checked);border-color:var(--nv-datagrid-background-checked)}nv-datagrid .checkbox-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-datagrid-background-disabled);border-color:var(--nv-datagrid-border-default)}nv-datagrid .checkbox-container input[type=checkbox][readonly]{opacity:0.5}nv-datagrid .checkbox-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-datagrid .checkbox-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}`;
 const NvDatagrid = class {
     constructor(hostRef) {
@@ -3652,12 +3489,12 @@ const NvDatagrid = class {
             const key = col.accessor;
             const cellSlot = col.querySelector('[slot="cell"]');
             if (cellSlot) {
-                const element = deepCopyElement(cellSlot);
+                const element = dom_utils.deepCopyElement(cellSlot);
                 this.templateCache.set(key, element);
             }
             const headerSlot = col.querySelector('[slot="header"]');
             if (headerSlot) {
-                const element = deepCopyElement(headerSlot);
+                const element = dom_utils.deepCopyElement(headerSlot);
                 this.headerTemplateCache.set(key, element);
             }
             else {
@@ -4085,7 +3922,7 @@ const NvDatagrid = class {
         }
         // Handle <template> elements correctly
         const templateContent = template instanceof HTMLTemplateElement ? template.content : template;
-        const element = deepCopyElement(templateContent);
+        const element = dom_utils.deepCopyElement(templateContent);
         // Replace placeholders in text content, attributes, and properties
         element.querySelectorAll('*').forEach(el => {
             // Replace placeholders in text content
@@ -4264,7 +4101,7 @@ const NvDatagrid = class {
             properties.forEach(prop => {
                 if (typeof element[prop] !== 'function' && // Ignore methods
                     !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                    !dom_utils.excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
                 ) {
                     const propValue = element[prop];
                     if (typeof propValue === 'string' && propValue.includes('__')) {
@@ -4296,7 +4133,7 @@ const NvDatagrid = class {
             properties.forEach(prop => {
                 if (typeof element[prop] !== 'function' && // Ignore methods
                     !prop.startsWith('on') && // Ignore event listeners (onclick, oninput, etc.)
-                    !excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
+                    !dom_utils.excludedProps.has(prop) // 🚨 Prevent text duplication and irrelevant props
                 ) {
                     try {
                         const propValue = element[prop];
@@ -4480,7 +4317,7 @@ const NvDatagrid = class {
         const rows = !this.table || this.table === undefined || this.parsedData.length === 0
             ? []
             : this.table?.getRowModel()?.rows;
-        return (index.h(index.Host, { key: 'd1ca320f75940993840349a4f33afb0a8dc10788' }, index.h("div", { key: 'd07f038bfa0d4c0092f0ad9e6f13c95a47331f75', class: "hidden" }, index.h("slot", { key: 'be8e292240da78d055cce83fb5700111d371d0db' })), index.h("slot", { key: 'af921e34986bf67afa14190e2d01e866af7ab7ae', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: 'f3ffe4bdfee63e86ad470923e4faf62be821b5fa', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: 'a5ab10f4e088b106368bd5d98d99e3cef2b59955', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
+        return (index.h(index.Host, { key: '08593ceb15e31184e76c7ab641f5e2db635527e2' }, index.h("div", { key: '092f351ba6b5683b798651e5fb4eb1a40015684e', class: "hidden" }, index.h("slot", { key: 'c24d531e1e48dfc7db7bae7d6453994f70487f7b' })), index.h("slot", { key: 'e0d2aa2dd23eac36c5b735ea7640937cce649987', name: "before" }), this.enableGlobalFilter && this.table && (index.h("div", { key: 'beb373f14fad14c50b2c92b6c5542dec797750b3', class: `search-container justify-${this.globalFilterPosition}` }, index.h("nv-fieldtext", { key: '943dc6d3b0663e15846682ede0f9ea5cb3f1c56e', value: this.globalFilterSearchTerm, onInput: this.handleGlobalFilteringOnInput, placeholder: "Search all columns..." }))), this.parsedColumns.length === 0 && this.parsedData.length === 0 ? (index.h("div", { class: "no-data" }, this.noColumnsNoDataMessage)) : (index.h("div", null, index.h("table", null, this.parsedColumns.length > 0 && headerGroups.length > 0 && (index.h("thead", null, this.parsedColumns.length > 0 && headerGroups
             ? headerGroups?.map(headerGroup => (index.h("tr", { key: headerGroup.id }, headerGroup.headers.map(header => {
                 return this.getHeaderCell(header);
             }))))
@@ -4492,23 +4329,48 @@ const NvDatagrid = class {
             })));
         }))), this.table && this.enableRowSelection ? (index.h("tfoot", null, index.h("tr", null, index.h("td", { colSpan: 20 }, this.enableRowSelection && this.table ? (index.h("div", null, this.rowSelectionState &&
             Object.keys(this.rowSelectionState).length > 0 ? (index.h("span", null, Object.keys(this.rowSelectionState).length, " of", ' ', this.table.getPreFilteredRowModel()?.rows
-            ?.length || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: '8941adaa686dec6b3f09e0434bdf9df3d273e930', name: "after" })));
+            ?.length || 0, ' ', "Total Rows Selected")) : (index.h("span", null, "No rows selected")))) : null)))) : null), this.getPagination())), index.h("slot", { key: '9d016c03102ff36aeaf8ff5364086902b129f2ce', name: "after" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "columns": ["parseColumns"],
-        "data": ["parseData"],
-        "parsedColumns": ["handleParsedChange"],
-        "parsedData": ["handleParsedChange"],
-        "globalFilterSearchTerm": ["handleGlobalFilterSearchTerm", "handleInternalStateChange"],
-        "paginationState": ["handlePaginationState", "handleInternalStateChange"],
-        "sortingState": ["handleSortingState", "handleInternalStateChange"],
-        "pageSize": ["handlePageSize"],
-        "rowSelectionState": ["handleRowSelectionState"],
-        "state": ["handleStateChange"]
+        "columns": [{
+                "parseColumns": 0
+            }],
+        "data": [{
+                "parseData": 0
+            }],
+        "parsedColumns": [{
+                "handleParsedChange": 0
+            }],
+        "parsedData": [{
+                "handleParsedChange": 0
+            }],
+        "globalFilterSearchTerm": [{
+                "handleGlobalFilterSearchTerm": 0
+            }, {
+                "handleInternalStateChange": 0
+            }],
+        "paginationState": [{
+                "handlePaginationState": 0
+            }, {
+                "handleInternalStateChange": 0
+            }],
+        "sortingState": [{
+                "handleSortingState": 0
+            }, {
+                "handleInternalStateChange": 0
+            }],
+        "pageSize": [{
+                "handlePageSize": 0
+            }],
+        "rowSelectionState": [{
+                "handleRowSelectionState": 0
+            }],
+        "state": [{
+                "handleStateChange": 0
+            }]
     }; }
 };
-NvDatagrid.style = nvDatagridCss;
+NvDatagrid.style = nvDatagridCss();
 exports.nv_datagrid = NvDatagrid;
-//# sourceMappingURL=nv-datagrid.entry.cjs.js.map

package/dist/cjs/nv-datagridcolumn.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-B1na8x6M.js');
+var index = require('./index-BQjqJTJB.js');
 const NvDatagridcolumn = class {
     constructor(hostRef) {
@@ -14,9 +14,8 @@ const NvDatagridcolumn = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'd93cf7234c22d08319d2e4157945ece0b9e5f7b1' }, index.h("slot", { key: 'd4530c7f6854773716e7494e0379bc21f446ca53', name: "header" }), index.h("slot", { key: '60e2933f219f48c0567fd0e01a137a694ae1c1c9', name: "cell" })));
+        return (index.h(index.Host, { key: '413044aa941d307aa9a2e96faad28e5c78e20b71' }, index.h("slot", { key: 'c32dedbda74aa8204222b797e92a633eb7246c33', name: "header" }), index.h("slot", { key: '1412fae3228b4f9583a07395411da3fe264da449', name: "cell" })));
     }
 };
 exports.nv_datagridcolumn = NvDatagridcolumn;
-//# sourceMappingURL=nv-datagridcolumn.entry.cjs.js.map

package/dist/cjs/nv-dialog.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-B1na8x6M.js');
+var index = require('./index-BQjqJTJB.js');
 var index_esm = require('./index.esm-CG1TVKfu.js');
 var events_utils = require('./events.utils-BE6R5q9C.js');
 var fade_animation = require('./fade.animation-BQSqXXOJ.js');
@@ -11,7 +11,7 @@ var clsx = require('./clsx-BtxeOLZW.js');
 var constants = require('./constants-BugGJYqL.js');
 var v4 = require('./v4-C1vaJ4yP.js');
-const nvDialogCss = "nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}";
+const nvDialogCss = () => `nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}`;
 const NvDialog = class {
     constructor(hostRef) {
@@ -239,25 +239,23 @@ const NvDialog = class {
     //#region LIFECYCLE
     /**
      * Lifecycle method that runs before the component loads.
-     * Initializes the trigger, header, and footer elements by finding them in the component's children.
-     * Elements are found either by their slot attribute or by their tag name (for dialog header/footer)
+     * Looks for passed header, and footer elements, either by their slot
+     * attribute or by their tag name (for dialog header/footer)
      */
     componentWillLoad() {
-        this.triggerElement = Array.from(this.el.children).find(child => {
-            return child.getAttribute('slot') === 'trigger';
-        });
-        this.headerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'header' ||
-                child.tagName.toLowerCase() === 'nv-dialogheader');
-        });
-        this.footerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'footer' ||
-                child.tagName.toLowerCase() === 'nv-dialogfooter');
-        });
+        if (!this.headerElement)
+            this.headerElement =
+                this.el.querySelector('[slot="header"]') ??
+                    this.el.querySelector('nv-dialogheader');
+        if (!this.footerElement)
+            this.footerElement =
+                this.el.querySelector('[slot="footer"]') ??
+                    this.el.querySelector('nv-dialogfooter');
         // Initial form check
         this.checkForForm();
     }
-    componentWillUpdate() {
+    componentDidRender() {
+        this.triggerElement = this.el.querySelector('[slot="trigger"]');
         this.attachEventListeners();
     }
     componentDidLoad() {
@@ -268,7 +266,6 @@ const NvDialog = class {
         if (this.autofocus && !this.dialogElement.querySelector('[autofocus]')) {
             this.setAutofocus();
         }
-        this.attachEventListeners();
         // Additional form check in case form was added after initial load
         this.checkForForm();
         // this.setupContentBodyListeners();
@@ -285,14 +282,15 @@ const NvDialog = class {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (index.h(index.Host, { key: 'e1837ebe65fcf0e56880438b59a5e8c4b5873926' }, index.h("slot", { key: '543e69780f3dad15a91b4bcb1f4199153bbce1b3', name: "trigger" }), index.h("dialog", { key: 'ef1600f73c8d25744b3b69356e1c4a98e605be1e', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx.clsx({ full: this.full }) }, index.h("div", { key: '894e91291a5ee2a1c26a658e1ca7aaf237d71069', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '78700c26d1ec553d67a8e62f3f3628fab8deb49a', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: 'd042c828bc6886091128425ea3e5c73035a0cea1', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '035273dd23255883a7a5feb354d230242683e00e', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: 'd86417aae675f8611312495d31ca8d0b58c2caaf', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'cb48b94b846097d04ffd98c6689cd4116e8cd9f9' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants.ButtonType.Submit : constants.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
+        return (index.h(index.Host, { key: '3117cc6be5dfcdb0fd561bb7b8cc0179233adca5' }, index.h("slot", { key: '3462bbebcb37fe65ef192b47562ee554263d8e3d', name: "trigger" }), index.h("dialog", { key: '2baee57bc9924ac6a7f0e5511228877283c67b7e', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx.clsx({ full: this.full }) }, index.h("div", { key: '6083efe9e58d402c6df91f57bf45ca2ea77acb3b', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: 'e133552c05d709d9fb95ca97d4fae1fbba135585', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: '81830f0546f280cf2401f765252fee0a464fca2e', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '95a5eff054aad7385c440c1c1833d994b21c0583', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '8ec787b70862976f09f8bbaa2f2acbd743abd9c5', class: "content-body", id: "dialog-content" }, index.h("slot", { key: '6939345af1fa362fe9575948f099cf19dee54590' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants.ButtonType.Submit : constants.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleDialogOpenChange"]
+        "open": [{
+                "handleDialogOpenChange": 0
+            }]
     }; }
 };
-NvDialog.style = nvDialogCss;
+NvDialog.style = nvDialogCss();
 exports.nv_dialog = NvDialog;
-//# sourceMappingURL=nv-dialog.entry.cjs.js.map

package/dist/cjs/nv-dialogfooter_2.cjs.entry.js CHANGED Viewed

@@ -1,9 +1,9 @@
 'use strict';
-var index = require('./index-B1na8x6M.js');
+var index = require('./index-BQjqJTJB.js');
 var constants = require('./constants-BugGJYqL.js');
-const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
+const nvDialogfooterCss = () => `nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}`;
 const NvDialogfooter = class {
     constructor(hostRef) {
@@ -17,7 +17,6 @@ const NvDialogfooter = class {
             this.internals = hostRef.$hostElement$.attachInternals();
             hostRef.$hostElement$["s-ei"] = this.internals;
         }
-        this.hasSlot = false;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -72,37 +71,30 @@ const NvDialogfooter = class {
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
-    componentWillLoad() {
-        // Check if there are any child elements that don't have a slot attribute
-        this.hasSlot = Array.from(this.el.childNodes).some(node => {
-            return (node.nodeType === Node.ELEMENT_NODE &&
-                !node.hasAttribute('slot'));
-        });
-    }
-    componentDidLoad() {
+    componentDidRender() {
         // Set the default button type based on the form property
-        this.primaryButtonType =
-            this.primaryButtonType || this.form
+        if (!this.primaryButtonType) {
+            this.primaryButtonRef.type = this.form
                 ? constants.ButtonType.Submit
                 : constants.ButtonType.Button;
+        }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '0048aeb5ba7d8919e94f3dff06dddd1bdff813bb' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: '31d3490d2a966b28d3f23bf7409186c10463f765' }, index.h("slot", { key: '21c8a3431ad6ec95d7d8467d3a273f730a10984b' }, index.h(index.Fragment, { key: '6400d911813010cc012d1b982f5ebdcb9f589b87' }, !this.undismissable && (index.h("nv-button", { key: '29d8b79619aa6a225b3fe9eb123e166646cb910b', onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { key: '76cd9d05c3830a7d9d8bd040aa4ecb38da190644', ref: el => (this.primaryButtonRef = el), onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { key: '5ff1d8988d480dff0c12be00962a0470ef8adccf', slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { key: 'b1330826bcc205529a301378685ff72d7d3c53f6', slot: "trailing-icon", name: this.trailingIcon, size: "sm" })))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
 };
-NvDialogfooter.style = nvDialogfooterCss;
+NvDialogfooter.style = nvDialogfooterCss();
-const nvDialogheaderCss = "nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm);}";
+const nvDialogheaderCss = () => `nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm);}`;
 const NvDialogheader = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.hasSlot = false;
         /****************************************************************************/
         //#region PROPERTIES
         /**
@@ -112,24 +104,13 @@ const NvDialogheader = class {
     }
     //#endregion PROPERTIES
     /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        // Check if there are any child elements that don't have a slot attribute
-        this.hasSlot = Array.from(this.el.childNodes).some(node => {
-            return (node.nodeType === Node.ELEMENT_NODE &&
-                !node.hasAttribute('slot'));
-        });
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'e3390a18cd40f00dd70f71b436d3603fdcb2b337' }, !this.hasSlot ? (index.h(index.Fragment, null, index.h("div", { class: "heading" }, this.heading), index.h("div", { class: "subheading" }, this.subheading))) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: 'a608cbe8b942b1444d973a5f3d8c97183e76fd0a' }, index.h("slot", { key: '525dd320304a01682926208674db6210e4e2dd2a' }, index.h(index.Fragment, { key: '14f7f8e787941dbf2d9e00f8a8a5d2e25d82d056' }, index.h("div", { key: '00131448954f8390e145e458c71705850b19ec48', class: "heading" }, this.heading), index.h("div", { key: '8cd3ee3d6aacb5f54499ea59b9e915efe4c5e33c', class: "subheading" }, this.subheading)))));
     }
     get el() { return index.getElement(this); }
 };
-NvDialogheader.style = nvDialogheaderCss;
+NvDialogheader.style = nvDialogheaderCss();
 exports.nv_dialogfooter = NvDialogfooter;
 exports.nv_dialogheader = NvDialogheader;
-//# sourceMappingURL=nv-dialogfooter.nv-dialogheader.entry.cjs.js.map

package/dist/cjs/nv-drawer.cjs.entry.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var index = require('./index-B1na8x6M.js');
+var index = require('./index-BQjqJTJB.js');
 var index_esm = require('./index.esm-CG1TVKfu.js');
 var events_utils = require('./events.utils-BE6R5q9C.js');
 var fade_animation = require('./fade.animation-BQSqXXOJ.js');
@@ -11,7 +11,7 @@ var clsx = require('./clsx-BtxeOLZW.js');
 var constants = require('./constants-BugGJYqL.js');
 var v4 = require('./v4-C1vaJ4yP.js');
-const nvDrawerCss = "nv-drawer dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px);border:none}nv-drawer dialog[data-state=closed]{pointer-events:none}nv-drawer dialog[data-state=open]{pointer-events:auto}nv-drawer dialog.side-right .backdrop{justify-content:flex-end}nv-drawer dialog.side-right .content{box-shadow:-4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer dialog.side-left .backdrop{justify-content:flex-start}nv-drawer dialog.side-left .content{box-shadow:4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer .backdrop{display:flex;height:100%;width:100%;padding:0}nv-drawer .backdrop .content{background:var(--color-level-00-background);width:var(--drawer-width, min(90vw, 400px));height:100%;display:flex;flex-direction:column;align-items:flex-start;position:relative}nv-drawer .backdrop .content[data-side=left]{border-top-right-radius:var(--drawer-radius-top-right, 0);border-bottom-right-radius:var(--drawer-radius-bottom-right, 0)}nv-drawer .backdrop .content[data-side=right]{border-top-left-radius:var(--drawer-radius-top-left, 0);border-bottom-left-radius:var(--drawer-radius-bottom-left, 0)}nv-drawer .backdrop .content.size-sm{width:clamp(var(--drawer-size-sm-min-width), var(--drawer-size-sm-width), var(--drawer-size-sm-max-width))}nv-drawer .backdrop .content.size-md{width:clamp(var(--drawer-size-md-min-width), var(--drawer-size-md-width), var(--drawer-size-md-max-width))}nv-drawer .backdrop .content.size-lg{width:clamp(var(--drawer-size-lg-min-width), var(--drawer-size-lg-width), var(--drawer-size-lg-max-width))}nv-drawer .backdrop .content.size-full{width:var(--drawer-size-full-width)}nv-drawer .backdrop .content nv-button.close-button{position:absolute;top:var(--drawer-dismissible-position-top, var(--dialog-dismissible-position-top));right:var(--drawer-dismissible-position-right, var(--dialog-dismissible-position-right));z-index:1;display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:var(--drawer-gap-y, 10px)}nv-drawer .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-drawer .backdrop .content .content-body{box-sizing:border-box;padding:var(--drawer-padding-y, var(--dialog-body-padding-y)) var(--drawer-padding-x, var(--dialog-body-padding-x));scrollbar-gutter:stable both-edges;flex:1;overflow-y:auto;width:100%;border-bottom:1px solid var(--color-content-low-border);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text)}nv-drawer .backdrop .content slot[name=footer]::slotted(*),nv-drawer .backdrop .content nv-drawerfooter{padding-top:var(--spacing-4)}";
+const nvDrawerCss = () => `nv-drawer dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px);border:none}nv-drawer dialog[data-state=closed]{pointer-events:none}nv-drawer dialog[data-state=open]{pointer-events:auto}nv-drawer dialog.side-right .backdrop{justify-content:flex-end}nv-drawer dialog.side-right .content{box-shadow:-4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer dialog.side-left .backdrop{justify-content:flex-start}nv-drawer dialog.side-left .content{box-shadow:4px 0 24px rgba(0, 0, 0, 0.15)}nv-drawer .backdrop{display:flex;height:100%;width:100%;padding:0}nv-drawer .backdrop .content{background:var(--color-level-00-background);width:var(--drawer-width, min(90vw, 400px));height:100%;display:flex;flex-direction:column;align-items:flex-start;position:relative}nv-drawer .backdrop .content[data-side=left]{border-top-right-radius:var(--drawer-radius-top-right, 0);border-bottom-right-radius:var(--drawer-radius-bottom-right, 0)}nv-drawer .backdrop .content[data-side=right]{border-top-left-radius:var(--drawer-radius-top-left, 0);border-bottom-left-radius:var(--drawer-radius-bottom-left, 0)}nv-drawer .backdrop .content.size-sm{width:clamp(var(--drawer-size-sm-min-width), var(--drawer-size-sm-width), var(--drawer-size-sm-max-width))}nv-drawer .backdrop .content.size-md{width:clamp(var(--drawer-size-md-min-width), var(--drawer-size-md-width), var(--drawer-size-md-max-width))}nv-drawer .backdrop .content.size-lg{width:clamp(var(--drawer-size-lg-min-width), var(--drawer-size-lg-width), var(--drawer-size-lg-max-width))}nv-drawer .backdrop .content.size-full{width:var(--drawer-size-full-width)}nv-drawer .backdrop .content nv-button.close-button{position:absolute;top:var(--drawer-dismissible-position-top, var(--dialog-dismissible-position-top));right:var(--drawer-dismissible-position-right, var(--dialog-dismissible-position-right));z-index:1;display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:var(--drawer-gap-y, 10px)}nv-drawer .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-drawer .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-drawer .backdrop .content .content-body{box-sizing:border-box;padding:var(--drawer-padding-y, var(--dialog-body-padding-y)) var(--drawer-padding-x, var(--dialog-body-padding-x));scrollbar-gutter:stable both-edges;flex:1;overflow-y:auto;width:100%;border-bottom:1px solid var(--color-content-low-border);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text)}nv-drawer .backdrop .content slot[name=footer]::slotted(*),nv-drawer .backdrop .content nv-drawerfooter{padding-top:var(--spacing-4)}`;
 const NvDrawer = class {
     constructor(hostRef) {
@@ -383,25 +383,23 @@ const NvDrawer = class {
     //#region LIFECYCLE
     /**
      * Lifecycle method that runs before the component loads.
-     * Initializes the trigger, header, and footer elements by finding them in the component's children.
-     * Elements are found either by their slot attribute or by their tag name (for drawer header/footer)
+     * Looks for passed header, and footer elements, either by their slot
+     * attribute or by their tag name (for dialog header/footer)
      */
     componentWillLoad() {
-        this.triggerElement = Array.from(this.el.children).find(child => {
-            return child.getAttribute('slot') === 'trigger';
-        });
-        this.headerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'header' ||
-                child.tagName.toLowerCase() === 'nv-drawerheader');
-        });
-        this.footerElement = Array.from(this.el.children).find(child => {
-            return (child.getAttribute('slot') === 'footer' ||
-                child.tagName.toLowerCase() === 'nv-drawerfooter');
-        });
+        if (!this.headerElement)
+            this.headerElement =
+                this.el.querySelector('[slot="header"]') ??
+                    this.el.querySelector('nv-drawerheader');
+        if (!this.footerElement)
+            this.footerElement =
+                this.el.querySelector('[slot="footer"]') ??
+                    this.el.querySelector('nv-drawerfooter');
         // Initial form check
         this.checkForForm();
     }
-    componentWillUpdate() {
+    componentDidRender() {
+        this.triggerElement = this.el.querySelector('[slot="trigger"]');
         this.attachEventListeners();
     }
     componentDidLoad() {
@@ -430,14 +428,15 @@ const NvDrawer = class {
     render() {
         const hasForm = this.form || this.el.querySelector('form');
         const state = this.open ? 'open' : 'closed';
-        return (index.h(index.Host, { key: 'de12ca46afd89b287fc3f2b28e3f6ca79d328338' }, index.h("slot", { key: 'e7568c48a2a676d0f063831c769c1b4dfaee0925', name: "trigger" }), index.h("dialog", { key: '513b404bba6aa0b1d3831d17ef58e1c63fb6f757', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsx.clsx({ [`side-${this.side}`]: true }), "data-state": state }, index.h("div", { key: '0b9c6fec78844a1e64b33a7bbab62ee44ac0d7bd', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: 'c74cb4b717f232b4622bd9391027c7b048e786e9', class: clsx.clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (index.h("nv-button", { key: 'f9c03557a3ef3bb1d34e2b764d70a57cfd52dea3', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, index.h("nv-icon", { key: '5c0ea22963bad0bb84eb58e9ad26ebfca6b11b94', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-drawerheader", { id: "drawer-header" })), index.h("div", { key: '813c7b985c6f75faa1fffc56e198957194bda87e', class: "content-body", id: "drawer-content" }, index.h("slot", { key: 'e70eefb8a94ae5e7eff32d5eb0446fba5c56065a' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? constants.ButtonType.Submit : constants.ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
+        return (index.h(index.Host, { key: '24fef2e07989d6b9648d8c4c7374680650ac09e8' }, index.h("slot", { key: 'c8d25517097b715cf42ad3a60ea84c7efb052c6c', name: "trigger" }), index.h("dialog", { key: 'b9b94f73fa04bb421b70a1af4c3c40171af94008', ref: el => (this.dialogElement = el), onClose: this.handleDrawerClose, onClick: this.handleDrawerClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "drawer-header", "aria-describedby": "drawer-content", class: clsx.clsx({ [`side-${this.side}`]: true }), "data-state": state }, index.h("div", { key: '4867741abdaa5608992dd812311a43ce3af0c94e', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '476ac6bb40bb342ffb305faca2e67a8bef43f14e', class: clsx.clsx('content', `size-${this.size}`), ref: el => (this.contentElement = el), "data-state": state, "data-side": this.side, style: this.width ? { width: this.width } : {} }, !this.undismissable && (index.h("nv-button", { key: '90d1a2c776d486ee98d4b847ee1d43616c15d86c', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDrawerClose, "aria-label": "Close drawer" }, index.h("nv-icon", { key: '5c54095bae68cc0780a95fd541a8e607f430ebb9', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-drawerheader", { id: "drawer-header" })), index.h("div", { key: 'fcf2ccf83679fa5a702ce02206144a3a11ab53bf', class: "content-body", id: "drawer-content" }, index.h("slot", { key: 'b70b2edfb51da8a16f996c90d04391657718a12a' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-drawerfooter", { form: this.form, primaryButtonType: hasForm ? constants.ButtonType.Submit : constants.ButtonType.Button, onDrawerCanceled: this.handleDrawerClose, undismissable: this.undismissable })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "open": ["handleDrawerOpenChange"]
+        "open": [{
+                "handleDrawerOpenChange": 0
+            }]
     }; }
 };
-NvDrawer.style = nvDrawerCss;
+NvDrawer.style = nvDrawerCss();
 exports.nv_drawer = NvDrawer;
-//# sourceMappingURL=nv-drawer.entry.cjs.js.map