@nova-design-system/nova-webcomponents 3.10.0 → 3.11.0

package/dist/collection/components/nv-alert/nv-alert.css

@@ -93,6 +93,7 @@ nv-alert > nv-icon.icon-neutral {
 nv-alert > .content {
   display: flex;
   padding: var(--alert-padding);
+  padding-right: calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));
   padding-left: 0;
   flex-direction: column;
   gap: var(--alert-gap-y);

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

@@ -17,6 +17,9 @@ export class NvFielddropdownitemcheck {
          * Disables the item, preventing any user interaction.
          */
         this.disabled = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
         /**
          * when the child <nv-fieldcheckbox> change its `checked` state,
          * update `this.checked` and emit `itemChecked`.
@@ -45,8 +48,11 @@ export class NvFielddropdownitemcheck {
             }
         };
     }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region RENDER
     render() {
-        return (h(Host, { key: '869eb969c0cff66f1947673e5aa3e0c677a07421', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: '4bbe45597bdd0f30c8e9a255e52d08be476fab1a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: 'f53f44e3fdb78894e9bb37fa455b1407efea17b1' }), h("slot", { key: 'aacd757c1fec541a4fc7b4f2683281aef31ee135', name: "main" }), h("slot", { key: 'ef2f761a3a1f05dcba6145efc89830ddc82af27d', name: "label" }), h("slot", { key: '610700f871b524f1f89538d03bd6c16167e3b24e', name: "description" }))));
+        return (h(Host, { key: 'cb922f0c0224c950ab5a87783028f2909eb1e39c', onClick: this.handleClick }, h("nv-fieldcheckbox", { key: '6f8748022131a8cd31b0f69851313f80c330172a', checked: this.checked, name: this.label || this.value, label: this.label || this.value, labelPlacement: "after", description: this.description, disabled: this.disabled, tabindex: "-1", onCheckedChanged: this.onFieldcheckboxChanged }, h("slot", { key: '20d1014accc6cfc00658703057b25037175287af' }), h("slot", { key: 'a7e61eed6bc72d3a14096cac2c195629a0ce2928', name: "main" }), h("slot", { key: '93f6bce370ac36f1ce3e0f2c1d9cdd598c14cb14', name: "label" }), h("slot", { key: '837359fc1fea49e0dea221039dc7466cdc86b757', name: "description" }))));
     }
     static get is() { return "nv-fielddropdownitemcheck"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-fielddropdownitemcheck.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,GACR,MAAM,eAAe,CAAC;AAEvB;;;;;GAKG;AAMH,MAAM,OAAO,wBAAwB;IALrC;QAQE,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEH,YAAO,GAAY,KAAK,CAAC;QA2BzB;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QA0BnC;;;;WAIG;QACK,2BAAsB,GAAG,CAAC,KAA2B,EAAE,EAAE;YAC/D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,6CAA6C;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,oBAAoB;YACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,2EAA2E;QACnE,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAC1B,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC;gBAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;KAuBH;IArBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW;YAC7B,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC/B,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB;gBAE7C,8DAAa;gBACb,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CACf,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  /** Make sure the checkbox is checked when clicked anywhere in the item. */\n  private handleClick = () => {\n    if (this.disabled) return;\n    if (this.el.querySelector('input').checked) {\n      this.checked = false;\n    } else {\n      this.checked = true;\n    }\n  };\n\n  render() {\n    return (\n      <Host onClick={this.handleClick}>\n        <nv-fieldcheckbox\n          checked={this.checked}\n          name={this.label || this.value}\n          label={this.label || this.value}\n          labelPlacement=\"after\"\n          description={this.description}\n          disabled={this.disabled}\n          tabindex=\"-1\"\n          onCheckedChanged={this.onFieldcheckboxChanged}\n        >\n          <slot></slot>\n          <slot name=\"main\"></slot>\n          <slot name=\"label\"></slot>\n          <slot name=\"description\"></slot>\n        </nv-fieldcheckbox>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"nv-fielddropdownitemcheck.js","sourceRoot":"","sources":["../../../src/components/nv-fielddropdownitemcheck/nv-fielddropdownitemcheck.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,IAAI,EACJ,CAAC,EACD,IAAI,EACJ,KAAK,EAEL,OAAO,GACR,MAAM,eAAe,CAAC;AAEvB;;;;;GAKG;AAMH,MAAM,OAAO,wBAAwB;IALrC;QAQE,8EAA8E;QAC9E,oBAAoB;QAEpB;;WAEG;QAEH,YAAO,GAAY,KAAK,CAAC;QA2BzB;;WAEG;QAEM,aAAQ,GAAY,KAAK,CAAC;QA0BnC,mBAAmB;QACnB,8EAA8E;QAC9E,iBAAiB;QAEjB;;;;WAIG;QACK,2BAAsB,GAAG,CAAC,KAA2B,EAAE,EAAE;YAC/D,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,6CAA6C;YAC7C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,oBAAoB;YACjD,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC;gBACpB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,KAAK,EAAE,IAAI,CAAC,KAAK;aAClB,CAAC,CAAC;QACL,CAAC,CAAC;QAEF,2EAA2E;QACnE,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,CAAC;gBAC3C,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACvB,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;YACtB,CAAC;QACH,CAAC,CAAC;KA8BH;IA5BC,oBAAoB;IACpB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,WAAW;YAC7B,yEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,IAAI,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC9B,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAC/B,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAC,IAAI,EACb,gBAAgB,EAAE,IAAI,CAAC,sBAAsB;gBAE7C,8DAAa;gBACb,6DAAM,IAAI,EAAC,MAAM,GAAQ;gBACzB,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBAC1B,6DAAM,IAAI,EAAC,aAAa,GAAQ,CACf,CACd,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAIF","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\n\n/**\n * @slot default - Next to the label and description.\n * @slot main - Replaces the label and description.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n */\n@Component({\n  tag: 'nv-fielddropdownitemcheck',\n  styleUrl: 'nv-fielddropdownitemcheck.scss',\n  shadow: false,\n})\nexport class NvFielddropdownitemcheck {\n  @Element() el: HTMLNvFielddropdownitemcheckElement;\n\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Indicates whether the checkbox is selected.\n   */\n  @Prop({ reflect: true, mutable: true })\n  checked: boolean = false;\n\n  /**\n   * The value associated with this item.\n   */\n  @Prop({ reflect: true })\n  readonly value?: string;\n\n  /**\n   * The label displayed alongside the checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly label?: string;\n\n  /**\n   * A description providing additional context or information about the\n   * checkbox.\n   */\n  @Prop({ reflect: true })\n  readonly description?: string;\n\n  /**\n   * The group this item belongs to, if applicable.\n   */\n  @Prop({ reflect: true })\n  readonly group?: string;\n\n  /**\n   * Disables the item, preventing any user interaction.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Event emitted when the checkbox is toggled.\n   * It provides details about the current state of the item.\n   */\n  @Event()\n  itemChecked: EventEmitter<{\n    /**\n     * The value associated with this item\n     */\n    value: string | undefined;\n    /**\n     * Whether the checkbox is currently checked\n     */\n    checked: boolean;\n    /**\n     * The group this item belongs to, if any\n     */\n    group?: string | undefined;\n  }>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * when the child <nv-fieldcheckbox> change its `checked` state,\n   * update `this.checked` and emit `itemChecked`.\n   * @param {CustomEvent<boolean>} event - The event emitted by the <nv-fieldcheckbox> component.\n   */\n  private onFieldcheckboxChanged = (event: CustomEvent<boolean>) => {\n    if (this.disabled) return;\n\n    // NvFieldcheckbox has emitted checkedChanged\n    this.checked = event.detail; // get the new state\n    this.itemChecked.emit({\n      value: this.value,\n      checked: this.checked,\n      group: this.group,\n    });\n  };\n\n  /** Make sure the checkbox is checked when clicked anywhere in the item. */\n  private handleClick = () => {\n    if (this.disabled) return;\n\n    if (this.el.querySelector('input').checked) {\n      this.checked = false;\n    } else {\n      this.checked = true;\n    }\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host onClick={this.handleClick}>\n        <nv-fieldcheckbox\n          checked={this.checked}\n          name={this.label || this.value}\n          label={this.label || this.value}\n          labelPlacement=\"after\"\n          description={this.description}\n          disabled={this.disabled}\n          tabindex=\"-1\"\n          onCheckedChanged={this.onFieldcheckboxChanged}\n        >\n          <slot></slot>\n          <slot name=\"main\"></slot>\n          <slot name=\"label\"></slot>\n          <slot name=\"description\"></slot>\n        </nv-fieldcheckbox>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n  /****************************************************************************/\n}\n"]}

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

@@ -11,6 +11,7 @@ import { v4 as uuidv4 } from "uuid";
  */
 export class NvFieldmultiselect {
     constructor() {
+        this.isBulkOperation = false;
         /**
          * Sets the ID for the input element and the for attribute of the associated
          * label. If no ID is provided, a random one will be automatically generated
@@ -118,6 +119,9 @@ export class NvFieldmultiselect {
         this.isSelectAllSectionVisible = true;
         // Add the flag to the class
         this.preventBlurClose = false;
+        this.handleMouseDownPreventBlur = () => {
+            this.preventBlurClose = true;
+        };
         /**
          * Handle badge close for options mode.
          */
@@ -304,6 +308,11 @@ export class NvFieldmultiselect {
          */
         this.handleInputBlurSlots = () => {
             setTimeout(() => {
+                // Honor preventBlurClose to avoid closing when interacting inside the popover
+                if (this.preventBlurClose) {
+                    this.preventBlurClose = false;
+                    return; // Don't close the popover
+                }
                 if (!this.el.contains(document.activeElement)) {
                     // Close the popover without affecting the divider
                     this.open = false;
@@ -340,24 +349,33 @@ export class NvFieldmultiselect {
         this.toggleSelectAllOptions = (selectAll) => {
             if (!this.options)
                 return;
-            // Get visible and enabled option values from DOM
-            const visibleOptionValues = this.getVisibleEnabledOptionItems();
-            console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
-            if (selectAll) {
-                // Select all visible options - merge with existing selections
-                this.value = [...new Set([...this.value, ...visibleOptionValues])];
+            this.isBulkOperation = true; // Set flag to suppress individual emissions
+            try {
+                // Get visible and enabled option values from DOM
+                const visibleOptionValues = this.getVisibleEnabledOptionItems();
+                console.info('[SelectAll][Options] toggleSelectAllOptions called. selectAll:', selectAll, 'visibleOptionValues:', visibleOptionValues, 'Current value:', this.value);
+                if (selectAll) {
+                    // Select all visible options - merge with existing selections
+                    this.value = [...new Set([...this.value, ...visibleOptionValues])];
+                }
+                else {
+                    // Deselect only the visible options, keep others that might be filtered out
+                    this.value = this.value.filter(val => !visibleOptionValues.includes(val));
+                }
+                console.info('[SelectAll][Options] New value after toggle:', this.value);
+                // Emit the change event
+                this.valueChanged.emit(this.value);
+                // Synchronize child components
+                this.syncChildComponents();
+                // Reorder content to move selected items to top
+                this.reorderOptionsContent();
             }
-            else {
-                // Deselect only the visible options, keep others that might be filtered out
-                this.value = this.value.filter(val => !visibleOptionValues.includes(val));
+            finally {
+                // Defer reset to next frame to ensure any async child emissions are ignored
+                requestAnimationFrame(() => {
+                    this.isBulkOperation = false; // Reset flag
+                });
             }
-            console.info('[SelectAll][Options] New value after toggle:', this.value);
-            // Emit the change event
-            this.valueChanged.emit(this.value);
-            // Synchronize child components
-            this.syncChildComponents();
-            // Reorder content to move selected items to top
-            this.reorderOptionsContent();
         };
         /**
          * Toggles the selection state of all non-disabled slot items.
@@ -366,31 +384,40 @@ export class NvFieldmultiselect {
         this.toggleSelectAllSlots = (selectAll) => {
             if (this.options)
                 return; // Only for slots mode
-            // Get visible and enabled items
-            const items = this.getVisibleEnabledSlotItems();
-            console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
-            if (selectAll) {
-                // Select all visible items
-                const allActiveValues = items
-                    .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
-                    .filter(value => value !== '');
-                this.value = [...new Set([...this.value, ...allActiveValues])];
+            this.isBulkOperation = true; // Set flag to suppress individual emissions
+            try {
+                // Get visible and enabled items
+                const items = this.getVisibleEnabledSlotItems();
+                console.info('[SelectAll][Slots] toggleSelectAllSlots called. selectAll:', selectAll, 'visible slot items:', items.map(item => item.getAttribute('value') || item.getAttribute('label')), 'Current value:', this.value);
+                if (selectAll) {
+                    // Select all visible items
+                    const allActiveValues = items
+                        .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
+                        .filter(value => value !== '');
+                    this.value = [...new Set([...this.value, ...allActiveValues])];
+                }
+                else {
+                    // Deselect only the visible items, keep others that might be filtered out
+                    const visibleValues = items
+                        .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
+                        .filter(value => value !== '');
+                    this.value = this.value.filter(val => !visibleValues.includes(val));
+                }
+                console.info('[SelectAll][Slots] New value after toggle:', this.value);
+                // Emit the change event
+                this.valueChanged.emit(this.value);
+                // Force synchronization with a small delay to ensure DOM is updated
+                requestAnimationFrame(() => {
+                    this.syncChildComponents();
+                    this.reorderSlotContent();
+                });
             }
-            else {
-                // Deselect only the visible items, keep others that might be filtered out
-                const visibleValues = items
-                    .map(item => item.getAttribute('value') || item.getAttribute('label') || '')
-                    .filter(value => value !== '');
-                this.value = this.value.filter(val => !visibleValues.includes(val));
+            finally {
+                // Defer reset to next frame to ensure any async child emissions are ignored
+                requestAnimationFrame(() => {
+                    this.isBulkOperation = false; // Reset flag
+                });
             }
-            console.info('[SelectAll][Slots] New value after toggle:', this.value);
-            // Emit the change event
-            this.valueChanged.emit(this.value);
-            // Force synchronization with a small delay to ensure DOM is updated
-            requestAnimationFrame(() => {
-                this.syncChildComponents();
-                this.reorderSlotContent();
-            });
         };
         /**
          * Handle click on the select all checkbox in options mode.
@@ -442,16 +469,10 @@ export class NvFieldmultiselect {
                     width: '0',
                     height: '0',
                     pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.clearFilterText })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllOptionsButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusOptions }), h("p", { id: this.inputId, class: "non-filterable-text", onClick: this.handleInputContainerClickOptions, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusOptions, "aria-label": this.label, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { "data-scope": "clear-filter", name: "x", size: "md", emphasis: "lower", "aria-label": "Clear filter text", tabindex: "-1", title: "Clear filter text", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverOptions })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllOptionsButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateOptions() === 'checked', indeterminate: this.getSelectAllCheckboxStateOptions() ===
                     'indeterminate', label: this.getSelectAllCheckboxStateOptions() === 'unchecked'
                     ? this.selectAllLabel
-                    : this.deselectAllLabel, onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.handleSelectAllCheckboxOptionsClick }))))), h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
+                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxOptionsClick }))))), h("ul", { role: "listbox", "aria-multiselectable": "true" }, this.options.map(option => (h("nv-fielddropdownitemcheck", { role: "option", label: option.label, description: option.description, value: option.value, checked: this.value.includes(option.value), disabled: option.disabled })))))), this.renderDescriptions()));
         };
         /**
          * Renders the component in slots mode
@@ -464,16 +485,10 @@ export class NvFieldmultiselect {
                     width: '0',
                     height: '0',
                     pointerEvents: 'none',
-                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {} }, this.shouldShowToggleAllSlotButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
+                }, tabIndex: -1, "aria-hidden": "true", autoComplete: this.autocomplete, name: this.name, onFocus: this.handleInputFocusSlots }), h("p", { id: this.inputId, class: "non-filterable-text", "aria-label": this.label, onClick: this.handleInputContainerClickSlots, tabIndex: 0, onKeyDown: this.handleKeyDown, onFocus: this.handleInputFocusSlots, "aria-controls": `${this.inputId}-listbox`, "data-scope": "focusable", role: "button" }, h("span", null, this.placeholder)))), this.error && (h("nv-icon", { name: "alert-circle", class: "validation", size: "md" })), this.filterable && this.filterText.length > 0 && (h("nv-iconbutton", { name: "x", size: "md", emphasis: "lower", tabindex: "-1", onMouseDown: this.handleMouseDownPreventBlur, onClick: this.clearFilterText, "aria-label": "Clear filter text" })), h("nv-iconbutton", { "data-scope": "toggle-dropdown", name: this.open ? 'chevron-top' : 'chevron-down', size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide dropdown' : 'Show dropdown', title: this.open ? 'Hide dropdown' : 'Show dropdown', onMouseDown: this.handleMouseDownPreventBlur, onClick: this.togglePopoverSlots })), h("slot", { name: "after-input" })), h("div", { id: `${this.inputId}-listbox`, slot: "content", style: this.maxHeight ? { maxHeight: this.maxHeight } : {}, onMouseDown: this.handleMouseDownPreventBlur }, this.shouldShowToggleAllSlotButton() && (h("div", { class: "select-all-container" }, h("div", { class: "select-all-header" }, this.isSelectAllSectionVisible && (h("nv-fieldcheckbox", { checked: this.getSelectAllCheckboxStateSlots() === 'checked', indeterminate: this.getSelectAllCheckboxStateSlots() ===
                     'indeterminate', label: this.getSelectAllCheckboxStateSlots() === 'unchecked'
                     ? this.selectAllLabel
-                    : this.deselectAllLabel, onMouseDown: () => {
-                    this.preventBlurClose = true;
-                }, onClick: this.handleSelectAllCheckboxSlotsClick }))))), h("slot", { name: "content" }))), this.renderDescriptions()));
+                    : this.deselectAllLabel, onMouseDown: this.handleMouseDownPreventBlur, onClick: this.handleSelectAllCheckboxSlotsClick }))))), h("slot", { name: "content" }))), this.renderDescriptions()));
         };
     }
     //#endregion EVENTS
@@ -502,7 +517,12 @@ export class NvFieldmultiselect {
         this.reorderOptionsContent();
     }
     watchValueHandler() {
-        console.info('[Watch:value] Value changed:', this.value);
+        console.info('[Watch:value] Value changed:', this.value, 'isBulkOperation:', this.isBulkOperation);
+        // Skip processing during bulk operations
+        if (this.isBulkOperation) {
+            console.info('[Watch:value] Skipping syncChildComponents and options update due to bulk operation');
+            return;
+        }
         // Synchronize child components when value changes programmatically
         if (this.el && this.el.isConnected) {
             this.syncChildComponents();
@@ -547,7 +567,9 @@ export class NvFieldmultiselect {
      * @param {CustomEvent} event - The event object containing the selected value and its checked state.
      */
     handleItemChecked(event) {
-        if (this.disabled || this.readonly) {
+        if (this.disabled || this.readonly || this.isBulkOperation) {
+            // Skip processing itemChecked events during bulk operations
+            console.info('[Event:itemChecked] Skipped due to bulk operation or disabled/readonly', event.detail);
             return;
         }
         const { value, checked } = event.detail;
@@ -555,21 +577,23 @@ export class NvFieldmultiselect {
         if (value !== undefined && value !== null) {
             const newValue = [...this.value];
             const valueIndex = newValue.indexOf(value);
+            let hasChanged = false;
             if (checked && valueIndex === -1) {
                 newValue.push(value);
+                hasChanged = true;
             }
             else if (!checked && valueIndex > -1) {
                 newValue.splice(valueIndex, 1);
+                hasChanged = true;
             }
             console.info('[Event:itemChecked] newValue after update:', newValue);
-            // Always update the state and emit the event when an item is checked/unchecked
-            this.value = newValue;
-            this.valueChanged.emit(this.value);
-            // Update the checked state of all items to ensure consistency
-            this.syncChildComponents();
+            if (hasChanged) {
+                this.value = newValue;
+                this.valueChanged.emit(this.value);
+                this.syncChildComponents();
+            }
             // Preserve the filter text in the input
             if (this.filterable && this.inputElement) {
-                // Keep the current filter text in the input
                 this.inputElement.value = this.filterText;
             }
         }
@@ -597,7 +621,11 @@ export class NvFieldmultiselect {
      */
     connectedCallback() {
         console.info('[Lifecycle] connectedCallback - value:', this.value);
-        document.addEventListener('click', this.handleClickOutside.bind(this));
+        // Bind once and reuse the same reference for add/remove to avoid leaks
+        if (!this._boundHandleClickOutside) {
+            this._boundHandleClickOutside = this.handleClickOutside.bind(this);
+        }
+        document.addEventListener('click', this._boundHandleClickOutside);
     }
     /**
      * Set the mode state and handle options change.
@@ -655,7 +683,9 @@ export class NvFieldmultiselect {
      */
     disconnectedCallback() {
         console.info('[Lifecycle] disconnectedCallback - value:', this.value);
-        document.removeEventListener('click', this.handleClickOutside.bind(this));
+        if (this._boundHandleClickOutside) {
+            document.removeEventListener('click', this._boundHandleClickOutside);
+        }
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
@@ -1184,13 +1214,23 @@ export class NvFieldmultiselect {
             const itemValue = item.getAttribute('value') || item.getAttribute('label') || '';
             const shouldBeChecked = this.value.includes(itemValue);
             console.info('[syncChildComponents] itemValue:', itemValue, 'shouldBeChecked:', shouldBeChecked, 'item.checked(before):', item.checked);
-            if (shouldBeChecked) {
-                item.setAttribute('checked', '');
-                item.checked = true;
-            }
-            else {
-                item.removeAttribute('checked');
-                item.checked = false;
+            // Only update if the checked state differs to avoid triggering unnecessary events
+            if (item.checked !== shouldBeChecked) {
+                // Set attribute and property, but avoid triggering itemChecked during bulk
+                if (this.isBulkOperation) {
+                    // Directly update the DOM attribute to avoid triggering the setter
+                    if (shouldBeChecked) {
+                        item.setAttribute('checked', '');
+                    }
+                    else {
+                        item.removeAttribute('checked');
+                    }
+                    // Update internal state without emitting events (assumes nv-fielddropdownitemcheck respects this)
+                    item.checked = shouldBeChecked;
+                }
+                else {
+                    item.checked = shouldBeChecked;
+                }
             }
             console.info('[syncChildComponents] itemValue:', itemValue, 'item.checked(after):', item.checked);
         });