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

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

@@ -200,7 +200,6 @@ nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear
   height: 0;
 }
 nv-fieldselect .select-wrapper .select-container input:read-only {
-  opacity: 0.5;
   background-color: var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));
   border-color: var(--nv-field-border-readonly);
 }
@@ -217,6 +216,7 @@ nv-fieldselect .select-wrapper .select-container select {
   font-weight: var(--font-weight-medium-emphasis);
   height: var(--form-field-line-height);
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  padding-right: 36px;
   box-sizing: content-box;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -235,13 +235,96 @@ nv-fieldselect .select-wrapper .select-container select::placeholder {
   font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
+nv-fieldselect .select-wrapper .select-container select hr {
+  border-color: var(--components-list-select-hr, var(--color-content-low-border));
+}
+nv-fieldselect .select-wrapper .select-container select {
+  appearance: base-select;
+}
+nv-fieldselect .select-wrapper .select-container select::picker(select) {
+  appearance: base-select;
+  background-color: var(--components-popover-background);
+  border-color: var(--components-popover-border);
+  border-width: 1px;
+  border-style: solid;
+  border-radius: var(--popover-radius);
+  padding: var(--popover-padding-y) var(--popover-padding-x);
+  margin-top: var(--spacing-2);
+  box-shadow: var(--popover-shadow-1-x) var(--popover-shadow-1-y) var(--popover-shadow-1-blur) -2px var(--popover-shadow-1-opacity), var(--popover-shadow-2-x) var(--popover-shadow-2-y) var(--popover-shadow-2-blur) var(--shadow-spread-lg-2) var(--popover-shadow-2-opacity);
+}
+nv-fieldselect .select-wrapper .select-container select::picker-icon {
+  display: none;
+}
 nv-fieldselect .select-wrapper .select-container select option {
-  font-size: var(--form-field-font-size, 16px);
-  font-style: normal;
-  font-weight: var(--font-weight-medium-emphasis);
-  line-height: var(--form-field-line-height, 24px);
-  background-color: var(--color-level-05-background);
-  color: var(--components-form-field-content-text);
+  display: flex;
+  gap: var(--list-select-gap-y);
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  background-color: var(--components-list-select-option-background-default);
+  padding: var(--list-select-option-padding);
+  font-weight: var(--menu-contextual-item-font-weight);
+  font-size: var(--list-select-font-size);
+  line-height: var(--list-select-line-height);
+  color: var(--components-list-select-option-content-default);
+  border-radius: var(--list-select-option-radius);
+  transition: background-color 150ms ease-out, color 150ms ease-out;
+  cursor: pointer;
+}
+nv-fieldselect .select-wrapper .select-container select option:not(:first-of-type) {
+  margin-top: var(--list-select-gap-y);
+}
+nv-fieldselect .select-wrapper .select-container select option:hover, nv-fieldselect .select-wrapper .select-container select option:focus, nv-fieldselect .select-wrapper .select-container select option:focus-within {
+  background-color: var(--components-list-select-option-background-hover);
+  color: var(--components-list-select-option-content-hover);
+}
+nv-fieldselect .select-wrapper .select-container select option:checked {
+  background-color: var(--components-list-select-option-background-active);
+  color: var(--components-list-select-option-content-active);
+}
+nv-fieldselect .select-wrapper .select-container select option:checked::after {
+  order: 1;
+  margin-left: auto;
+  content: "";
+  display: inline-block;
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+  background-color: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
+  -webkit-mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  -webkit-mask-size: contain;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='nvicon_check' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6px' d='m5 12 5 5L20 7' vector-effect='non-scaling-stroke'%3E%3C/path%3E%3C/svg%3E");
+  mask-repeat: no-repeat;
+  mask-position: center;
+  mask-size: contain;
+}
+nv-fieldselect .select-wrapper .select-container select option::checkmark {
+  display: none;
+}
+nv-fieldselect .select-wrapper .select-container select option:disabled, nv-fieldselect .select-wrapper .select-container select option:checked:disabled {
+  color: var(--components-list-select-option-content-disabled);
+  background-color: var(--components-list-select-option-background-default);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup {
+  appearance: base-select;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  width: 100%;
+  color: var(--components-list-select-optgroup-content);
+  gap: var(--list-select-optgroup-gap);
+  padding-top: var(--list-select-optgroup-padding-y, 8px);
+  padding-bottom: var(--list-select-optgroup-padding-y, 8px);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup:hover {
+  color: var(--components-list-select-optgroup-content);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup option {
+  padding-left: var(--list-select-optgroup-option-padding-left);
+}
+nv-fieldselect .select-wrapper .select-container select optgroup option:first-child {
+  margin-top: var(--list-select-optgroup-option-margin-top, 4px);
 }
 nv-fieldselect .select-wrapper .select-container select.hidden {
   display: none;

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

@@ -368,4 +368,3 @@ const NvFieldsliderDocs = {
     ],
 };
 export default NvFieldsliderDocs;
-//# sourceMappingURL=nv-fieldslider.docs.js.map

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

@@ -464,11 +464,11 @@ export class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '554f94dc79adf1edbfa80bdc17bb41af26da871c' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '98ffb9c9332a9fef9c37088b48b80eaec2930417', htmlFor: this.startInputId }, h("slot", { key: '084d8c1fbdc91d8bd26016489b6ef86a3c334a6b', name: "label" }, this.label))), h("div", { key: 'ce62bedafa8b20ce952944b61638f61585fc7044', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: 'd4dd3f3cc00a19b166b27158c30f193096553127', class: "track-container" }, h("div", { key: 'd37bd4c7463d3a987d300082f2db4519af7fd652', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: '0c3b4b90851cb8cf80b3803fbb5e85f8e3d98aed', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (h(Host, { key: 'c247ce569201985167186da763f874c838919130' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'b5a17814669c6b8a3300dea842e1b886c48896ee', htmlFor: this.startInputId }, h("slot", { key: '6eab25a6ef6a73e034eafe23806c6924344f3f3a', name: "label" }, this.label))), h("div", { key: '6d3987ddc4f0005a6af919c00674356cf92b893e', class: "slider-container" }, this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, h("div", { key: 'a10ccb88fe4d3c9a44fb5b90ca2cf65567715bd5', class: "track-container" }, h("div", { key: '0d680c3b8b9aac3aee165e44e67501e60239b069', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: '261331b8517e65b17e0ad3059d11fc3e383a8db3', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '7674d49cfe01b7ac5be21c3cbc2ff4e625c27298', class: "description" }, this.success && (h("nv-icon", { key: '7342bca8ef60d227cd630affc37815bafa9736f7', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'c9221aadf6e2328bc5781d74c044b6911221dbe8', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b4fa791292ac4bcaba6f33a79dff07706c4ce3b0', class: "description" }, this.success && (h("nv-icon", { key: 'dc9f8213e6dc87aa2cdfdd131c7c7cfaa0a10f64', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'e64c6e4364acac752049f9908fc6fadce81b52f8', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '34f339f8e25ffb2c481b2472939d9ef14292c2f9', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '6a941595fc494afb7e580a98f968a628371b1a33', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'c77b3881b302a65c43098479aa445751314c2714', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '98e434ed68e64a8ad6d1d06dd1436682768e4d6d', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '7b56d0e87896fc2c10956e72dc7f701dc169aea6', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'b3ba1f603903131c42d95e67f3871a0b1a2ebb7b', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldslider"; }
     static get formAssociated() { return true; }
@@ -1044,4 +1044,3 @@ export class NvFieldslider {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldslider.js.map

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

@@ -118,4 +118,3 @@ export function formatValueForDisplay(value, step) {
     }
     return String(value);
 }
-//# sourceMappingURL=nv-fieldslider.utils.js.map

package/dist/collection/components/nv-fieldslider/partials/field-input.js

@@ -40,4 +40,3 @@ export const FieldInput = props => {
     };
     return hasField ? (h("div", { class: clsx(!hasField && 'hidden-input') }, h("nv-fieldnumber", { id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName, ...dataAttrs, onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }, labelBeforeValue && (h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)), labelAfterValue && (h("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
 };
-//# sourceMappingURL=field-input.js.map

package/dist/collection/components/nv-fieldslider/partials/range-thumb.js

@@ -31,4 +31,3 @@ export const RangeThumb = props => {
         h("div", { class: "thumb thumb-right", style: { left: `${rightPercent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": rightValue, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, "data-thumb": "right", tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, h("div", { class: "thumb-tooltip" }, labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)), formatValueForDisplay(rightValue, step), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))),
     ];
 };
-//# sourceMappingURL=range-thumb.js.map

package/dist/collection/components/nv-fieldslider/partials/single-thumb.js

@@ -15,4 +15,3 @@ export const SingleThumb = props => {
     const percent = valueToPercent(displayPosition, min, max);
     return (h("div", { class: "thumb", style: { left: `${percent}%` }, role: "slider", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": value, "aria-disabled": disabled ? 'true' : undefined, "aria-readonly": readonly ? 'true' : undefined, tabindex: disabled ? -1 : 0, onKeyDown: onKeyDown }, h("div", { class: "thumb-tooltip" }, labelBeforeValue && (h("span", { class: "label-before" }, labelBeforeValue)), formatValueForDisplay(value, step), labelAfterValue && h("span", { class: "label-after" }, labelAfterValue))));
 };
-//# sourceMappingURL=single-thumb.js.map

package/dist/collection/components/nv-fieldslider/partials/tick-marks.js

@@ -15,4 +15,3 @@ export const TickMarks = props => {
         return (h("div", { class: "track-tick", style: { left: `${percent}%` } }, tick.label && h("div", { class: "tick-label" }, tick.label)));
     })));
 };
-//# sourceMappingURL=tick-marks.js.map

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

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

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

@@ -311,4 +311,3 @@ const NvFieldtextDocs = {
     ],
 };
 export default NvFieldtextDocs;
-//# sourceMappingURL=nv-fieldtext.docs.js.map

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

@@ -148,11 +148,11 @@ export class NvFieldtext {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '95643ae488ca32bc792ac572fd127f358f881894' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '35d52de7041b6297af9feca3c0b19f480cacac54', htmlFor: this.inputId }, h("slot", { key: 'd866c825300faf563ded34e1a9960f14522d201f', name: "label" }, this.label))), h("div", { key: '923c5a4f9f8c9c2bf269a58896f070e3dba2be08', class: "input-wrapper" }, h("slot", { key: '933e05c2a3e4ec0429c90dfd8fc799250b8c8fed', name: "before-input" }), h("div", { key: '7cde9f8dd874269ddfca691946de52764764cbb2', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '55a6c1302a71fc5c5ea75708e09751407e3dfd10', name: "leading-input" }), h("input", { key: '324c57a9c6c590edb178a8821444842b55f19f2e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: '752b96931256a9b1c09079e4af9f1010af8ff409' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '9d04322a2519c8754f39ea4930e156b6df965bc6', htmlFor: this.inputId }, h("slot", { key: '3249f9865193d8a7ab8bf201b89ebcf9ee464961', name: "label" }, this.label))), h("div", { key: '072ad06abfd59614c8ff76e996d9f323f3795bdd', class: "input-wrapper" }, h("slot", { key: '3d2acf809e2565da88ff1ced1a62e58734a38f26', name: "before-input" }), h("div", { key: '64e0e81f95a0cecb3fa721e383e22de406c7b02f', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '7e4a48edef0443a18b9ebb33ee0644e56ae7347f', name: "leading-input" }), h("input", { key: 'afb87b6fc112249291c7d8f05dd94501aa3f51c9', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
-            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'cd9558b2939d1b935ac342eef24729a88425dcc9', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'd7834369c4b8d7bd095f9f602e176fe8fea0a92e', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '3e6714d10d4d21d6cc4912ea074810e3c11fa0a9', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: 'db6e9212d31d2f8b0d4f1379df6d8c41da96d587', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '829f38f3fa67e7bed5d08f6c9f416fbe39e807b6', class: "description" }, h("slot", { key: 'a3c63f1903fcdc25be26725b1f0b0b09dabe54a5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c2150b17c0385a5b2019db64eba7358ed07f62a4', hidden: !this.error, class: "error-description" }, h("slot", { key: 'a43078cd173e92fa7b17b0f72f302a3196acd1ba', name: "error-description" }, this.errorDescription)))));
+            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: '43df7002bd3c9304e3eb7965e6a13cc086eb2856', name: "trailing-input" }), this.error && (h("nv-icon", { key: '0735de48552dd73cad4bf9fe99b6a882ecdd33e4', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '666395f960bd25410c7a2fb31c88f13887d82dbc', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '8564a034022bd27777bed4c138bcf0131037a6fc', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '156613e0ea9c6bd81c821e99bb9497fe3069616b', class: "description" }, h("slot", { key: '5dc12f9875778d04c3a66238bfcec0b765d20039', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '22fcd8a566ab55e54f59db939e5c3a505dbcca65', hidden: !this.error, class: "error-description" }, h("slot", { key: 'f10a7a4b2e5514d035f31f90aa07f7d727b1c302', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }
@@ -585,12 +585,13 @@ export class NvFieldtext {
                 "mutable": false,
                 "complexType": {
                     "original": "`${TextInputAutocomplete}`",
-                    "resolved": "\"on\" | \"off\" | \"section-*\" | \"shipping\" | \"billing\" | \"home\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
+                    "resolved": "\"additional-name\" | \"address-level1\" | \"address-level2\" | \"address-level3\" | \"address-level4\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"billing\" | \"cc-additional-name\" | \"cc-csc\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-family-name\" | \"cc-given-name\" | \"cc-name\" | \"cc-number\" | \"cc-type\" | \"country\" | \"country-name\" | \"current-password\" | \"email\" | \"family-name\" | \"fax\" | \"given-name\" | \"home\" | \"honorific-prefix\" | \"honorific-suffix\" | \"impp\" | \"language\" | \"mobile\" | \"name\" | \"new-password\" | \"nickname\" | \"off\" | \"on\" | \"one-time-code\" | \"organization\" | \"organization-title\" | \"pager\" | \"photo\" | \"postal-code\" | \"section-*\" | \"sex\" | \"shipping\" | \"street-address\" | \"tel\" | \"tel-area-code\" | \"tel-country-code\" | \"tel-extension\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-national\" | \"transaction-amount\" | \"transaction-currency\" | \"url\" | \"username\" | \"work\"",
                     "references": {
                         "TextInputAutocomplete": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::TextInputAutocomplete"
+                            "id": "src/utils/constants.ts::TextInputAutocomplete",
+                            "referenceLocation": "TextInputAutocomplete"
                         }
                     }
                 },
@@ -690,4 +691,3 @@ export class NvFieldtext {
     }
     static get elementRef() { return "el"; }
 }
-//# sourceMappingURL=nv-fieldtext.js.map

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

@@ -249,4 +249,3 @@ const NvFieldtextareaDocs = {
     ],
 };
 export default NvFieldtextareaDocs;
-//# sourceMappingURL=nv-fieldtextarea.docs.js.map

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

@@ -213,11 +213,11 @@ export class NvFieldtextarea {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '0800e702f2212313aba04685710981ea5c9f1e13' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e5978fdc5f8588aba9e04571e0beb772d6c1843e', htmlFor: this.inputId }, h("slot", { key: 'f846862e07c1196e8f7d2c007846f40f90dea6c1', name: "label" }, this.label))), h("div", { key: 'a61a7551075e23adf63bb62c8a44b22fc78af72d', class: "textarea-wrapper" }, h("div", { key: '0e57bca81abbad3752875f3acfad7e94b1aa8f8e', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '9348dedab4d701980656c180d197db720061964a', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+        return (h(Host, { key: '318e509b03c06725526be8f6ec4ed07ad6f2180a' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '705f55c450ebdb9b3ccf61583436c5b9d1aa0ca6', htmlFor: this.inputId }, h("slot", { key: 'e4c2c58b5a8592dfe235d9544193c877c896d2b4', name: "label" }, this.label))), h("div", { key: '4c91b621928b8a38139c0a8f3a775abf0b76f178', class: "textarea-wrapper" }, h("div", { key: '2b15d531bb208a225f2bbf469f5ac7002805e9b5', class: "textarea-container", onClick: this.handleTextareaContainerClick }, h("textarea", { key: '15be5b082d20a8ee0cafb1ae78008b3b76b175c8', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
                 'aria-required': String(ariaRequiredValue),
             }), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '75e01c35855b9275c45546bbe8f1b9129365e208', class: "description" }, h("slot", { key: 'a0ecbbcef8a51b4d0dfaf14f3781a2e6d3d7cac3', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '8fc8170fa84865844cb544bfbd202b459707247a', hidden: !this.error, class: "error-description" }, h("slot", { key: '58d1774d57bf08c42e7c953b9606c5d9b0954ffc', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e3f3ab334446af3f6d16b916001bd3297341362b', class: "description" }, h("slot", { key: '1ba84f8c4de83e5bfdbdb307cd8493dd86be36ca', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '0dfef83d86ca29fad329d4c656173f052a51c4fa', hidden: !this.error, class: "error-description" }, h("slot", { key: '0361fa48742aba68bfb2b205c741bf0aff896134', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtextarea"; }
     static get formAssociated() { return true; }
@@ -721,4 +721,3 @@ export class NvFieldtextarea {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldtextarea.js.map

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

@@ -162,4 +162,3 @@ const NvFieldtimeDocs = {
     ],
 };
 export default NvFieldtimeDocs;
-//# sourceMappingURL=nv-fieldtime.docs.js.map

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

@@ -872,9 +872,9 @@ export class NvFieldtime {
             }, key: `${option}-${index}`, onClick: e => this.handleTimeOptionClick(e, type) }, option)))));
     }
     render() {
-        return (h(Host, { key: 'a6edfc1d50527225c9a275de73e497f6cd9652aa', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a82749db001869fb2246bef7126348c585e14a1a', htmlFor: this.inputId }, h("slot", { key: '8a96f4fad4f32b6793bee53ca94eec983c1ff09f', name: "label" }, this.label))), h("nv-popover", { key: 'de931598921043b8e6b44035964a5026e040afb1', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: 'b7e654cdb7ce4e270ebba03d20ebe47b37063fce', class: "input-wrapper", slot: "trigger" }, h("slot", { key: '1cde39106fad880cdd27ed96574f8cf320fc334a', name: "before-input" }), h("div", { key: 'eb7d8edd89d951eff5e00eb994dd85504b44801f', class: "input-container" }, h("slot", { key: '48212e52a925cdfb9d897201ca8ee50b037ba573', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: 'eb541ae9faaefb95c146f8ee9d32d533099162fc', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'c25d25f96b786c96ead487dc8af2b200e372ef79', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '2c08c7caa21771c697ed191589c836f58be4e761', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '77e91dd93225a61730ea7b892c50a7517a25af71', name: "after-input" })), h("div", { key: '9e8abc574dd8024dc479b2fe57891b022793291b', class: "time-dropdown", slot: "content" }, h("div", { key: 'f232d3e7a0b43f08b801ff76f4cdbf863bfc7a4a', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ab21ffb708f50a1b38a7d21d02d5f0b920aceca8', class: "description" }, h("slot", { key: '56790e4cc2c6d5f57e45ef7507aee8c1a8ea5a13', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '392a563b5eccd2120263bd72c883ccefe66d0c02', hidden: !this.error, class: "error-description" }, h("slot", { key: '8e6df58e39a9de7fdf05edb0611178c62ff9e79e', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '021f0592f7a4eae1b249f12c668b3ce805546593', onclick: (e) => this.handleHostClick(e), "aria-expanded": this.open ? 'true' : 'false' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '6c105236217cb0c6b326e3ecea4bc38bfa4353f2', htmlFor: this.inputId }, h("slot", { key: 'f4c2dbce6a50d648970acc57d8367194635b7e82', name: "label" }, this.label))), h("nv-popover", { key: 'b852ec86ace95303e1e7445765a334819135766f', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, h("div", { key: '2ddd521de9665e64095090a187b52d9fdb207dfb', class: "input-wrapper", slot: "trigger" }, h("slot", { key: 'e8ea5e1abc5b9b502e942e2a118184233677384f', name: "before-input" }), h("div", { key: '3d3a8e00ace3bab58b57305a68aac46863a61f36', class: "input-container" }, h("slot", { key: '2a1f88fc38b5d956f9d71d181f787ace20199588', name: "leading-input" }), this.renderTimeInputFields(), h("nv-iconbutton", { key: '497d5b2cdea39e83b0cb83eb6a9adbb18e57b952', name: 'clock', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide time picker' : 'Show time picker', onClick: () => this.HandleDropdownIconClick() }), this.error && (h("nv-icon", { key: 'e223b6faa4a476fe68aa9ae3c54e27dd0ff2017b', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: 'ec7a22c2005d297c25959d16c8326ebe7bc80dde', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: 'b12336e4d2708b3d5c25db1a4c5b761bf954e27b', name: "after-input" })), h("div", { key: '3a341dc72b2ece47841521817f5e44ca4b2286d1', class: "time-dropdown", slot: "content" }, h("div", { key: 'b67f1f796f0a2155210d6f6937264170f1fff7c3', class: "time-columns" }, this.renderTimeDropdownColumns()))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b31b8401c4eb3a12ff466f389345ab8179f9ca5b', class: "description" }, h("slot", { key: '8a81cc74fb35d10f34f9abd372a58758227a4937', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '87e16ffc6ed5983850271c18ea762671ef1f99ad', hidden: !this.error, class: "error-description" }, h("slot", { key: '154a889711ce35c28bab77c64418c0bdcc912fc0', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtime"; }
     static get formAssociated() { return true; }
@@ -1311,4 +1311,3 @@ export class NvFieldtime {
             }];
     }
 }
-//# sourceMappingURL=nv-fieldtime.js.map

package/dist/collection/components/nv-fieldtime/utils/format-utils.js

@@ -233,4 +233,3 @@ export function reconstructTimeByFormat(components, format) {
             return `${components.hours}:${components.minutes}:${components.seconds}`;
     }
 }
-//# sourceMappingURL=format-utils.js.map

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

@@ -75,4 +75,3 @@ const NvIconDocs = {
     ],
 };
 export default NvIconDocs;
-//# sourceMappingURL=nv-icon.docs.js.map

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

@@ -48,7 +48,7 @@ export class NvIcon {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '31b36db6d7b776186957d70948b9905c96274143', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '55fbe67f9e53aad9854288623b92795238cffc96', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: 'c5b7abbf6698be110c6458355cc3b732e620eed9', href: `#nvicon_${this.name}` }))));
+        return (h(Host, { key: '9cdc768f9a44f61de25e708c9d563faa7804782f', class: clsx(this.color && `${this.color}`), role: "img", "aria-label": `${this.name}-icon` }, h("svg", { key: '24c1ecfb3cbe406e60127d6d822523d35a6aa2c1', stroke: "currentColor", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `nv-icon-${this.size}` }, h("use", { key: 'e85e828f692e966c4679aa653b5dd4593edf58c3', href: `#nvicon_${this.name}` }))));
     }
     static get is() { return "nv-icon"; }
     static get originalStyleUrls() {
@@ -183,7 +183,8 @@ export class NvIcon {
                         "DeprecatedSemanticColors": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::DeprecatedSemanticColors"
+                            "id": "src/utils/constants.ts::DeprecatedSemanticColors",
+                            "referenceLocation": "DeprecatedSemanticColors"
                         }
                     }
                 },
@@ -211,7 +212,8 @@ export class NvIcon {
                         "IconName": {
                             "location": "import",
                             "path": "./nv-icons",
-                            "id": "src/components/nv-icon/nv-icons.ts::IconName"
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
                         }
                     }
                 },
@@ -236,7 +238,8 @@ export class NvIcon {
                         "SemanticSizes": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::SemanticSizes"
+                            "id": "src/utils/constants.ts::SemanticSizes",
+                            "referenceLocation": "SemanticSizes"
                         }
                     }
                 },
@@ -255,4 +258,3 @@ export class NvIcon {
         };
     }
 }
-//# sourceMappingURL=nv-icon.js.map

package/dist/collection/components/nv-icon/nv-icons.js

@@ -517,4 +517,3 @@ export const iconNames = [
     'x',
     'zoom-reset',
 ];
-//# sourceMappingURL=nv-icons.js.map

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

@@ -75,4 +75,3 @@ const NvIconbuttonDocs = {
     ],
 };
 export default NvIconbuttonDocs;
-//# sourceMappingURL=nv-iconbutton.docs.js.map

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

@@ -115,7 +115,7 @@ export class NvIconbutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '2e0011f5ebb23512aa89756ae7fd5ad81586f8b1', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '435692a00ed0af3548c2ac875e573af00daf5d62', size: this.size }), !this.loading && h("nv-icon", { key: '00b08fbd43724ad7ce54c96cd052ba637e111ece', name: this.name, size: this.size }), h("slot", { key: 'bb61e7db6115c9017007f15320dd5b2f6ccd9671' })));
+        return (h(Host, { key: '06b48253c77b09ae1259f72ad7698c9f9ddcd750', role: "button", type: this.type, tabindex: this.disableTabindex ? -1 : 0, disabled: this.disabled ? true : undefined, class: clsx('root', `size-${this.size}`, `emphasis-${this.emphasis}`, this.loading && 'loading', `shape-${this.shape}`), onClick: this.handleClick }, this.loading && h("nv-loader", { key: '5b4117978546581bfb217a0595dec6c736369955', size: this.size }), !this.loading && h("nv-icon", { key: 'f2f0da0fae0d0fde955cc2f766cb98a3058ffb7e', name: this.name, size: this.size }), h("slot", { key: '8d59cdf4be11216ff4a0a607bea4970128faa214' })));
     }
     static get is() { return "nv-iconbutton"; }
     static get formAssociated() { return true; }
@@ -141,7 +141,8 @@ export class NvIconbutton {
                         "ButtonSize": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonSize"
+                            "id": "src/utils/constants.ts::ButtonSize",
+                            "referenceLocation": "ButtonSize"
                         }
                     }
                 },
@@ -167,7 +168,8 @@ export class NvIconbutton {
                         "ButtonEmphasis": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonEmphasis"
+                            "id": "src/utils/constants.ts::ButtonEmphasis",
+                            "referenceLocation": "ButtonEmphasis"
                         }
                     }
                 },
@@ -253,7 +255,8 @@ export class NvIconbutton {
                         "IconName": {
                             "location": "import",
                             "path": "../nv-icon/nv-icons",
-                            "id": "src/components/nv-icon/nv-icons.ts::IconName"
+                            "id": "src/components/nv-icon/nv-icons.ts::IconName",
+                            "referenceLocation": "IconName"
                         }
                     }
                 },
@@ -278,7 +281,8 @@ export class NvIconbutton {
                         "ButtonType": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::ButtonType"
+                            "id": "src/utils/constants.ts::ButtonType",
+                            "referenceLocation": "ButtonType"
                         }
                     }
                 },
@@ -304,7 +308,8 @@ export class NvIconbutton {
                         "IconButtonShape": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::IconButtonShape"
+                            "id": "src/utils/constants.ts::IconButtonShape",
+                            "referenceLocation": "IconButtonShape"
                         }
                     }
                 },
@@ -369,4 +374,3 @@ export class NvIconbutton {
     }
     static get attachInternalsMemberName() { return "internals"; }
 }
-//# sourceMappingURL=nv-iconbutton.js.map

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

@@ -28,4 +28,3 @@ const NvLoaderDocs = {
     ],
 };
 export default NvLoaderDocs;
-//# sourceMappingURL=nv-loader.docs.js.map

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

@@ -16,7 +16,7 @@ export class NvLoader {
     //#region RENDER
     /* <slot> empty to force rendering change */
     render() {
-        return (h(Host, { key: '4347ec4ee393edb5e23a60e253bae73d0f9db583', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
+        return (h(Host, { key: '0e617a9043f912160b40255feba5c5a9140f1703', class: clsx(this.size && `size-${this.size}`, this.color && `color-${this.color}`) }));
     }
     static get is() { return "nv-loader"; }
     static get originalStyleUrls() {
@@ -41,7 +41,8 @@ export class NvLoader {
                         "SemanticSizes": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::SemanticSizes"
+                            "id": "src/utils/constants.ts::SemanticSizes",
+                            "referenceLocation": "SemanticSizes"
                         }
                     }
                 },
@@ -67,7 +68,8 @@ export class NvLoader {
                         "LoaderColors": {
                             "location": "import",
                             "path": "../../utils/constants",
-                            "id": "src/utils/constants.ts::LoaderColors"
+                            "id": "src/utils/constants.ts::LoaderColors",
+                            "referenceLocation": "LoaderColors"
                         }
                     }
                 },
@@ -85,4 +87,3 @@ export class NvLoader {
         };
     }
 }
-//# sourceMappingURL=nv-loader.js.map

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

@@ -117,4 +117,3 @@ const NvMenuDocs = {
     ],
 };
 export default NvMenuDocs;
-//# sourceMappingURL=nv-menu.docs.js.map

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

@@ -1,3 +1,9 @@
+/**
+ * Due to the recursive nature of the menu, we need to disable the event
+ * bubbling and native event listener rules for this component.
+ */
+/* eslint-disable nova/event-bubbling */
+/* eslint-disable nova/native-event-listener */
 import { Host, h, } from "@stencil/core";
 /**
  * @slot trigger - The button element that toggles the menu popover
@@ -40,9 +46,9 @@ export class NvMenu {
         this.renderMenuItems = () => {
             return this.items.map(item => {
                 if (item.hasSubmenu && item.submenuItems?.length > 0) {
-                    return (h("nv-menu", { nested: true, placement: "right-start", items: item.submenuItems }, h("nv-menuitem", { slot: "trigger", hasSubmenu: true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) })));
+                    return (h("nv-menu", { nested: true, placement: "right-start", items: item.submenuItems }, h("nv-menuitem", { slot: "trigger", hasSubmenu: true, disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label })));
                 }
-                return (h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label, onMenuitemSelected: e => this.menuitemSelected.emit(e.detail) }));
+                return (h("nv-menuitem", { disabled: item.disabled, icon: item.icon, shortcut: item.shortcut, id: item.value, name: item.label, label: item.label }));
             });
         };
     }
@@ -77,7 +83,6 @@ export class NvMenu {
     //#endregion EVENTS
     /****************************************************************************/
     //#region LISTENERS
-    /* eslint-disable nova/native-event-listener */
     handleMenuItemSelect(event) {
         if (this.disableCloseOnSelect)
             return;
@@ -85,7 +90,6 @@ export class NvMenu {
             return;
         this.open = false;
     }
-    /* eslint-enable nova/native-event-listener */
     handleKeydown(event) {
         // If the menu is not open, check if the trigger is focused
         // and the user presses Enter or ArrowDown, open the menu
@@ -184,13 +188,11 @@ export class NvMenu {
     //#endregion LISTENERS
     /****************************************************************************/
     //#region LIFECYCLE
-    componentWillLoad() {
-        this.triggerElement = Array.from(this.el.children).find(child => {
-            return child.getAttribute('slot') === 'trigger';
-        });
+    componentWillRender() {
+        this.triggerElement = this.el.querySelector('[slot="trigger"]');
     }
     render() {
-        return (h(Host, { key: '1139a5dbbbb52e2f32c5d1410b4bdb87156cfd60' }, h("slot", { key: 'f2202b254512643f0a16ebcda3715438a7c7aa2a', name: "trigger" }), h("nv-popover", { key: '2f49bd9af8ff253ab662b5054717e0d44690f47d', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
+        return (h(Host, { key: 'de2604e6681418f23352dc436ac6dfb64d3d3a8d' }, h("slot", { key: '26afcd55842377b82a3f6d1f63d2f87eff4f6001', name: "trigger" }), h("nv-popover", { key: '03466649d538b909070feb3c50e18a35ee7dda19', ref: el => (this.popoverElement = el), triggerMode: "click", triggerElement: this.triggerElement, placement: this.placement, nested: this.nested, open: this.open, onOpenChanged: this.handleOpenChanged.bind(this) }, this.items ? (h("ul", { slot: "content" }, this.renderMenuItems())) : (h("slot", { name: "content" })))));
     }
     static get is() { return "nv-menu"; }
     static get originalStyleUrls() {
@@ -275,7 +277,8 @@ export class NvMenu {
                         "Placement": {
                             "location": "import",
                             "path": "@floating-ui/dom",
-                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement"
+                            "id": "../../node_modules/@floating-ui/dom/dist/floating-ui.dom.d.ts::Placement",
+                            "referenceLocation": "Placement"
                         }
                     }
                 },
@@ -322,7 +325,7 @@ export class NvMenu {
         return [{
                 "method": "menuitemSelected",
                 "name": "menuitemSelected",
-                "bubbles": false,
+                "bubbles": true,
                 "cancelable": true,
                 "composed": true,
                 "docs": {
@@ -396,4 +399,3 @@ export class NvMenu {
             }];
     }
 }
-//# sourceMappingURL=nv-menu.js.map

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

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