@nova-design-system/nova-react 3.0.0 → 3.2.0

package/dist/cjs/{nv-fielddropdown.entry-DKXmoXeW.js → nv-fielddropdown.entry-BPwviyCp.js}

@@ -1,10 +1,10 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
 require('react');
 
-const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFielddropdownCss = "nv-fielddropdown{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fielddropdown[fluid]:not([fluid=false]){max-width:unset}nv-fielddropdown[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fielddropdown[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fielddropdown[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fielddropdown[hidden]:not([hidden=false]) label{display:none}nv-fielddropdown label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fielddropdown nv-popover{width:100%;display:block}nv-fielddropdown nv-popover [data-scope=popover]{width:100%;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fielddropdown nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fielddropdown nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fielddropdown nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fielddropdown nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fielddropdown .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fielddropdown .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative;width:100%;min-height:40px}nv-fielddropdown .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddropdown .input-container:focus-within,nv-fielddropdown .input-container:focus-within:hover,nv-fielddropdown .input-container:focus,nv-fielddropdown .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fielddropdown .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddropdown .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fielddropdown .input-container input[type=search]::-webkit-search-decoration,nv-fielddropdown .input-container input[type=search]::-webkit-search-cancel-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-button,nv-fielddropdown .input-container input[type=search]::-webkit-search-results-decoration{-webkit-appearance:none}nv-fielddropdown .input-container input,nv-fielddropdown .input-container p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height);width:100%}nv-fielddropdown .input-container input:focus,nv-fielddropdown .input-container p.non-filterable-text:focus{outline:none}nv-fielddropdown .input-container input::placeholder,nv-fielddropdown .input-container p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fielddropdown .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddropdown .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddropdown .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddropdown .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:500;line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fielddropdown .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fielddropdown .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fielddropdown .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 const NvFielddropdownStyle0 = nvFielddropdownCss;
 
 const NvFielddropdown = class {
@@ -21,10 +21,6 @@ const NvFielddropdown = class {
          * accessibility.
          */
         this.inputId = v4A79185f4.v4();
-        /**
-         * State of the dropdown popover.
-         */
-        this.open = false;
         /**
          * The autocomplete prop helps users fill out the input field faster by
          * suggesting entries they've used before, like their email or address.
@@ -37,12 +33,6 @@ const NvFielddropdown = class {
          * before submitting the form.
          */
         this.required = false;
-        /**
-         * Alters the input field's appearance to indicate an error, helping users
-         * identify fields that need correction.
-         * @validator error
-         */
-        this.error = false;
         /**
          * Display the input field's content without allowing users to change it.
          * Users can still click on it, select, and copy the text, but they won't be
@@ -55,6 +45,20 @@ const NvFielddropdown = class {
          * clicks or touches.
          */
         this.disabled = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Defines the maximum height of the multiselect list when open.
+         */
+        this.maxHeight = '';
+        /**
+         * State of the dropdown popover.
+         */
+        this.open = false;
         /**
          * The text to display when no items match the filter.
          */
@@ -63,16 +67,27 @@ const NvFielddropdown = class {
          * Enables or disables the filtering feature for the dropdown items.
          */
         this.filterable = false;
+        /**
+         * Delay in milliseconds before the search is triggered when typing in the filter input.
+         * @default 300
+         */
+        this.debounceDelay = 300;
         /**
          * Applies focus to the input field as soon as the component is mounted. This
          * is equivalent to setting the native autofocus attribute on an <input>
          * element.
          */
         this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
         //#endregion PROPERTIES
         /****************************************************************************/
         //#region STATE
-        /** The text entered by the user for filtering dropdown items. */
+        /**
+         * The text entered by the user for filtering dropdown items.
+         */
         this.filterText = '';
         this.selectedValues = new Set();
         this.handleInputContainerClick = (event) => {
@@ -103,8 +118,15 @@ const NvFielddropdown = class {
             }
             const input = event.target;
             this.open = true;
-            this.filterText = input.value.toLowerCase();
-            this.filterItems();
+            // Clear any existing timer
+            if (this.debounceTimer) {
+                window.clearTimeout(this.debounceTimer);
+            }
+            // Set a new timer for filtering
+            this.debounceTimer = window.setTimeout(() => {
+                this.filterText = input.value.toLowerCase();
+                this.filterItems();
+            }, this.debounceDelay);
         };
         this.handleInputFocus = () => {
             if (this.disabled || this.readonly)
@@ -140,6 +162,31 @@ const NvFielddropdown = class {
             this.filterItems();
         };
     }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    handleOptionsChange(newValue) {
+        var _a;
+        if (!newValue)
+            return;
+        if (!this.value) {
+            const defaultValue = newValue.find(option => option.selected);
+            this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
+            this.updateSelectedItem(this.value);
+        }
+    }
+    watchValueHandler(newValue) {
+        this.valueChanged.emit(newValue);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LISTENERS
+    handleOpenChanged(event) {
+        // Stop propagation to prevent the event from affecting parent components like dialogs
+        event.stopPropagation();
+        // Update `open` based on the popover state
+        this.open = event.detail;
+    }
     handleDropdownItemSelected(event) {
         if (this.disabled || this.readonly)
             return;
@@ -156,22 +203,6 @@ const NvFielddropdown = class {
         this.value = event.detail.value;
         this.open = false;
     }
-    handleOpenChanged(event) {
-        this.open = event.detail; // Update `open` based on the popover state
-    }
-    watchValueHandler(newValue) {
-        this.valueChanged.emit(newValue);
-    }
-    handleOptionsChange(newValue) {
-        var _a;
-        if (!newValue)
-            return;
-        if (!this.value) {
-            const defaultValue = newValue.find(option => option.selected);
-            this.value = (_a = defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.value) !== null && _a !== void 0 ? _a : '';
-            this.updateSelectedItem(this.value);
-        }
-    }
     handleBlur(event) {
         const target = event.relatedTarget;
         if (!(target instanceof Node) || !this.el.contains(target)) {
@@ -213,7 +244,27 @@ const NvFielddropdown = class {
             this.open = false;
         }
     }
-    //#endregion EVENTS
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.resetFilter();
+        if (this.filterable && this.filterText) {
+            this.filterItems();
+        }
+        if (this.options) {
+            this.handleOptionsChange(this.options);
+        }
+    }
+    componentDidLoad() {
+        if (this.value) {
+            this.updateSelectedItem(this.value);
+        }
+        if (this.inputElement) {
+            this.inputElement.value = this.getSelectedLabel();
+        }
+    }
+    //#endregion LIFECYCLE
     /****************************************************************************/
     //#region METHODS
     /**
@@ -302,38 +353,18 @@ const NvFielddropdown = class {
     }
     //#endregion METHODS
     /****************************************************************************/
-    //#region LIFECYCLE
-    componentWillLoad() {
-        this.resetFilter();
-        if (this.filterable && this.filterText) {
-            this.filterItems();
-        }
-        if (this.options) {
-            this.handleOptionsChange(this.options);
-        }
-    }
-    componentDidLoad() {
-        if (this.value) {
-            this.updateSelectedItem(this.value);
-        }
-        if (this.inputElement) {
-            this.inputElement.value = this.getSelectedLabel();
-        }
-    }
-    //#endregion LIFECYCLE
-    /****************************************************************************/
     //#region RENDER
     render() {
         var _a;
-        return (index.h(index.Host, { key: '6c23d4cfd361e1f40a2181db66692eb0d6326bfe', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'db9a30ece9e669c70b18193b3cc7d14967a5e071', htmlFor: this.inputId }, index.h("slot", { key: 'b7a721b25b82646d34ce141526775f24a9849f4b', name: "label" }, this.label))), index.h("nv-popover", { key: '724756cb69b4b6ef8837e6f7f53a65eb42a43b5e', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '0092cd2b78234ec2e0cdc70433246a2985b7e57f', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '519c1a407c8309861673b9eadb723edb0c70ae68', name: "before-input" }), index.h("div", { key: 'd88af43846337d9bfd6aeb4f28ab2dc7e56de4e8', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '8e91459d89acbf7a1cde5e75c520b11b109e810d', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: '55efb1100997af6b9b4ee41c489a9e628d36b749', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '69cfcac7b21d0e9faf9bad7f306bab187a761758', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '5b773edca6a5028eb8cedb42632a9c5b6e8b3d36', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: 'c225279e1ec938e2fbe672ce02e8d2a79cb7ff1e', name: "after-input" })), index.h("div", { key: '94905d2f6a0b7faae17540139c0bd2458e4c98ae', slot: "content" }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5d0b74de616aefa056d17cb70fab0d36ab9b41c3', class: "description" }, index.h("slot", { key: 'bab9d8222164d2227c6024ac2bd5675142ccb964', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '58596e0c753e8bb90f9d21432607427b0a029d64', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '6062d632aee6e825cd2d17a22180cb24d66e2864', name: "error-description" }, this.errorDescription)))));
+        return (index.h(index.Host, { key: '3864f366575665c4730dde8fd0d8e37c4ee11d82', role: "combobox", "aria-expanded": this.open.toString(), "aria-haspopup": "listbox", "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '8ce42f691251468c6c054464ee3695e2bea90bd5', htmlFor: this.inputId }, index.h("slot", { key: '7e779704e1c3f9f6ee71455679c0e1d5d4ee8795', name: "label" }, this.label))), index.h("nv-popover", { key: '82cdd318e195ef44513684afba0e9c9772cad448', ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '1189c8fd06db511cb51721ac14cdc54ef286691c', class: "input-wrapper", slot: "trigger" }, index.h("slot", { key: '9069907e055d77a19c30c045e29eaf4bf998f9a0', name: "before-input" }), index.h("div", { key: '2c57f017b25754d4b5baf44e3457e95256dfdccf', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '939e749473e4df95a28fcf98e8b6d455408bff71', name: "leading-input" }), this.filterable || this.disabled || this.readonly ? (index.h("input", { "data-scope": "focusable", id: this.inputId, type: "search", ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.getSelectedLabel(), required: this.required, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onFocus: this.handleInputFocus, onClick: this.handleInputFocus, onKeyDown: this.handleKeyDown })) : (index.h("p", { "data-scope": "focusable", id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClick, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocus }, this.getSelectedLabel() || this.value || this.placeholder)), this.filterable && this.filterText && this.open && (index.h("nv-iconbutton", { key: 'dcf54042b261665e5317ac122a93ca12fcedd9bc', name: "x", size: "md", emphasis: "lower", class: "clear-button", onClick: this.clearFilter, "aria-label": "Clear input" })), this.error && (index.h("nv-icon", { key: '3551957d94021648d731f97c1ba7ecdc8a325c15', name: "alert-circle", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'e8576d20f760219f236aa9ba52a34f762cc8d23e', "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', "aria-pressed": this.open.toString(), onClick: this.togglePopover, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '48e9ae570e34cde3d20594a3f6518298ebbad02e', name: "after-input" })), index.h("div", { key: 'cec0a670f4158ca91aa45dcee7a5c25a584226f9', slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) > 0 ? (index.h("ul", null, this.options.map(option => (index.h("nv-fielddropdownitem", { label: option.label, value: option.value, disabled: option.disabled, selected: option.value === this.value }))))) : (index.h("slot", { name: "content" })))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'e24dbfc170fb20e48ca2a474508a7c9beac6b87e', class: "description" }, index.h("slot", { key: '3b4429e2dd0b4f070309b00c6cba94cd343e7165', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b59ecbf446b142840f5c5933c505900abf126378', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'bf3c16d6a9fdc7a10741518153465a736eff808c', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["watchValueHandler"],
-        "options": ["handleOptionsChange"]
+        "options": ["handleOptionsChange"],
+        "value": ["watchValueHandler"]
     }; }
 };
 NvFielddropdown.style = NvFielddropdownStyle0;

package/dist/cjs/{nv-fielddropdownitem.entry-BVLVXi0e.js → nv-fielddropdownitem.entry-BGuUR9KP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Byv3Vmev.js');
+var index = require('./index-B2jv2KXv.js');
 require('react');
 
 const nvFielddropdownitemCss = "nv-fielddropdownitem{display:flex;gap:var(--spacing-2);flex-wrap:wrap;align-items:center;width:100%;padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);font-weight:var(--menu-contextual-item-font-weight);font-size:var(--list-dropdown-font-size);line-height:var(--list-dropdown-line-height);color:var(--components-list-dropdown-item-label-default);border-radius:var(--list-dropdown-item-radius);transition:background-color 150ms ease-out, color 150ms ease-out;cursor:pointer}nv-fielddropdownitem:hover,nv-fielddropdownitem:focus,nv-fielddropdownitem:focus-within{background-color:var(--components-list-dropdown-item-background-hover);color:var(--components-menu-contextual-item-content-hover)}nv-fielddropdownitem[disabled]:not([disabled=false]){cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled)}nv-fielddropdownitem .text-wrapper{display:flex;flex-grow:1;align-items:center;justify-content:space-between}nv-fielddropdownitem [data-scope=text]{flex-grow:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}nv-fielddropdownitem nv-icon[data-scope=selected]{color:var(--components-list-dropdown-item-label-default);align-self:center;margin-left:auto}";
@@ -59,7 +59,7 @@ const NvFielddropdownitem = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '86699901e52c35392ae5e60013f542427973a626', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: 'f2d893f0692821fc0e918da9283eb174c3429173' }), !this.composed && (index.h("div", { key: '5e62842ee3b0e79333f99a3ec8d92dd843ebd96e', class: "text-wrapper" }, index.h("span", { key: 'baa00ac59b5d85d912f34fc16fbf82d87af849e2', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'f9a5082e4cee6b68531809f9861e3da83b3001d6', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
+        return (index.h(index.Host, { key: '645ff9487464e30c9f0fc4510301fb1e0f919c1f', role: "menuitem", tabindex: '-1', onClick: this.handleSelected }, index.h("slot", { key: '4cc5ec9d61f0b0dd63d273af23623434dae0b2c3' }), !this.composed && (index.h("div", { key: '2b64690c51959e71482603c530d954db0cf4186e', class: "text-wrapper" }, index.h("span", { key: '5c49245a50249f51ff023d33ccfe541b4684152a', "data-scope": "text" }, this.label))), this.selected && (index.h("nv-icon", { key: 'ca97f75940f804e5ac3a9152aaee38a9a69e10f8', name: "check", "aria-hidden": "true", "data-scope": "selected" }))));
     }
     get el() { return index.getElement(this); }
 };