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

package/dist/components/nv-alert.js

@@ -7,7 +7,7 @@ import './p-09cdd71f.js';
 import { t as timeline } from './p-15aeab4d.js';
 import { d as defineCustomElement$2 } from './p-a1fe0a5d.js';
 
-const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
+const nvAlertCss = "nv-alert{display:flex !important;align-items:flex-start;position:relative;gap:var(--alert-gap-x);border-radius:var(--alert-radius);font-family:\"TT Norms Pro\", \"Montserrat\", sans-serif}nv-alert>nv-icon{margin-left:var(--alert-icon-position-x);margin-top:var(--alert-icon-position-y)}nv-alert.hidden{display:none !important}nv-alert.feedback-information{background-color:var(--components-alert-information-background);border:1px solid var(--components-alert-information-border) !important}nv-alert.feedback-information>.close:focus,nv-alert.feedback-information>.close:focus-within{outline:none}nv-alert.feedback-information>.close:focus-visible,nv-alert.feedback-information>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-information-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-warning{background-color:var(--components-alert-warning-background);border:1px solid var(--components-alert-warning-border) !important}nv-alert.feedback-warning>.close:focus,nv-alert.feedback-warning>.close:focus-within{outline:none}nv-alert.feedback-warning>.close:focus-visible,nv-alert.feedback-warning>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-warning-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-error{background-color:var(--components-alert-error-background);border:1px solid var(--components-alert-error-border) !important}nv-alert.feedback-error>.close:focus,nv-alert.feedback-error>.close:focus-within{outline:none}nv-alert.feedback-error>.close:focus-visible,nv-alert.feedback-error>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-error-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-success{background-color:var(--components-alert-success-background);border:1px solid var(--components-alert-success-border) !important}nv-alert.feedback-success>.close:focus,nv-alert.feedback-success>.close:focus-within{outline:none}nv-alert.feedback-success>.close:focus-visible,nv-alert.feedback-success>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-success-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert.feedback-neutral{background-color:var(--components-alert-neutral-background);border:1px solid var(--components-alert-neutral-border) !important}nv-alert.feedback-neutral>.close:focus,nv-alert.feedback-neutral>.close:focus-within{outline:none}nv-alert.feedback-neutral>.close:focus-visible,nv-alert.feedback-neutral>.close:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-alert-neutral-border);outline-offset:calc(var(--focus-outline-offset) * 1);z-index:111}nv-alert>nv-icon.icon-information{color:var(--components-alert-information-icon)}nv-alert>nv-icon.icon-warning{color:var(--components-alert-warning-icon)}nv-alert>nv-icon.icon-error{color:var(--components-alert-error-icon)}nv-alert>nv-icon.icon-success{color:var(--components-alert-success-icon)}nv-alert>nv-icon.icon-neutral{color:var(--components-alert-neutral-icon)}nv-alert>.content{display:flex;padding:var(--alert-padding);padding-right:calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));padding-left:0;flex-direction:column;gap:var(--alert-gap-y)}nv-alert>.content>.heading{color:var(--components-alert-content-title);font-size:var(--alert-heading-font-size);line-height:var(--alert-heading-line-height);font-weight:var(--alert-heading-font-weight)}nv-alert>.content>.message{color:var(--components-alert-content-description);font-size:var(--alert-message-font-size);line-height:var(--alert-message-line-height)}nv-alert>.close{border-radius:var(--alert-radius);position:absolute;display:flex;top:var(--alert-icon-position-y);right:var(--alert-icon-position-x);padding:0;border:none;background:none;cursor:pointer}";
 const NvAlertStyle0 = nvAlertCss;
 
 const NvAlert$1 = /*@__PURE__*/ proxyCustomElement(class NvAlert extends H {

package/dist/components/nv-alert.js.map

@@ -1 +1 @@
-{"file":"nv-alert.js","mappings":"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","names":["NvAlert"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * Controls the visibility of the alert. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.ref.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.ref.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}
+{"file":"nv-alert.js","mappings":";;;;;;;;;AAAA,MAAM,UAAU,GAAG,46HAA46H,CAAC;AACh8H,sBAAe,UAAU;;MCyBZA,SAAO;IALpB;;;;;;;;;;;;QA4CE,aAAQ,GAAwB,aAAa,CAAC;;;;;QA0BrC,gBAAW,GAAY,KAAK,CAAC;;;;;QAO7B,qBAAgB,GAAY,KAAK,CAAC;;;;QAM3C,WAAM,GAAY,KAAK,CAAC;;;;QAMf,oBAAe,GAAY,KAAK,CAAC;;;;;;;;;QAoDlC,kBAAa,GAAG;YACtB,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE;gBAC1B,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;aACpB;YAED,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;SAC1B,CAAC;;;;;QAMM,mBAAc,GAAG;YACvB,QAAQ,IAAI,CAAC,QAAQ;gBACnB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,WAAW;oBAC7B,OAAO,aAAa,CAAC;gBACvB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,KAAK;oBACvB,OAAO,cAAc,CAAC;gBACxB,KAAK,cAAc,CAAC,OAAO;oBACzB,OAAO,MAAM,CAAC;gBAChB;oBACE,OAAO,aAAa,CAAC;aACxB;SACF,CAAC;KAyFH;IA/OC,mBAAmB;QACjB,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QAAQ,IAAI,CAAC,KAAK;gBAChB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;aAChD;SACF;KACF;;;;;;;;;IA2FD,MAAM,kBAAkB,CAAC,MAAe;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAEhC,MAAM,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QACpC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;KACzC;;;;;IA4CO,MAAM,gBAAgB,CAAC,MAAe;QAC5C,IAAI,IAAI,CAAC,eAAe,EAAE;YACxB,IAAI,CAAC,iBAAiB,CAAC,MAAM,CAAC,CAAC;YAC/B,OAAO;SACR;QAED,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,OAAO,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QACjE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,WAAW,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;QAEtE,IAAI,MAAM,EAAE;YACV,MAAM,QAAQ,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,KAAK,EAAE,CAAC;YAC1C,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC;SAC9B;aAAM;YACL,IAAI,CAAC,iBAAiB,CAAC,KAAK,CAAC,CAAC;YAC9B,MAAM,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC,KAAK,EAAE,CAAC;SACxC;KACF;;;;;IAMO,iBAAiB,CAAC,MAAe;QACvC,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;KAC7C;;;;IAMD,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,QAAQ,IAAI,CAAC,KAAK;gBAChB,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,SAA2B,CAAC;oBAC5C,MAAM;gBACR,KAAK,WAAuC;oBAC1C,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR,KAAK,SAAqC;oBACxC,IAAI,CAAC,QAAQ,GAAG,aAA+B,CAAC;oBAChD,MAAM;gBACR;oBACE,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,KAAuB,CAAC;aAChD;SACF;QAED,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;SAClC;KACF;;;;IAMD,MAAM;;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,YAAY,IAAI,CAAC,QAAQ,EAAE,CAAC,IACjE,gEACE,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,CAAC,cAAc,EAAE,EACxC,KAAK,EAAE,QAAQ,IAAI,CAAC,QAAQ,EAAE,EAC9B,IAAI,EAAC,IAAI,GACA,EAEX,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,OAAO,IAAI,0DAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EAErD,IAAI,CAAC,OAAO,IAAI,0DAAG,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,OAAO,CAAK,EAEtD,8DAAa,CACT,EAEL,IAAI,CAAC,WAAW,KACf,+DAAQ,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC7D,gEAAS,IAAI,EAAC,GAAG,EAAC,IAAI,EAAC,IAAI,GAAG,CACvB,CACV,CACI,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["NvAlert"],"sources":["src/components/nv-alert/nv-alert.scss?tag=nv-alert","src/components/nv-alert/nv-alert.tsx"],"sourcesContent":["@use \"sass:map\";\n@import \"../../styles/focus-ring\";\n\n/* Variants */\n$alert-feedback: (\"information\", \"warning\", \"error\", \"success\", \"neutral\");\n\n/* Define maps for feedback-related variables */\n$components-alert-background: (\n  \"information\": var(--components-alert-information-background),\n  \"warning\": var(--components-alert-warning-background),\n  \"error\": var(--components-alert-error-background),\n  \"success\": var(--components-alert-success-background),\n  \"neutral\": var(--components-alert-neutral-background)\n);\n\n$components-alert-border: (\n  \"information\": var(--components-alert-information-border),\n  \"warning\": var(--components-alert-warning-border),\n  \"error\": var(--components-alert-error-border),\n  \"success\": var(--components-alert-success-border),\n  \"neutral\": var(--components-alert-neutral-border)\n);\n\n$components-alert-icon: (\n  \"information\": var(--components-alert-information-icon),\n  \"warning\": var(--components-alert-warning-icon),\n  \"error\": var(--components-alert-error-icon),\n  \"success\": var(--components-alert-success-icon),\n  \"neutral\": var(--components-alert-neutral-icon)\n);\n\n@mixin root-styles() {\n  display: flex !important; // override the display: none in [hidden] css\n  align-items: flex-start;\n  position: relative;\n  gap: var(--alert-gap-x);\n  border-radius: var(--alert-radius);\n  font-family: \"TT Norms Pro\", \"Montserrat\", sans-serif;\n}\n\n@mixin content-styles() {\n  display: flex;\n  padding: var(--alert-padding);\n  padding-right: calc(var(--alert-padding) + var(--icon-md) + var(--spacing-1));\n  padding-left: 0;\n  flex-direction: column;\n  gap: var(--alert-gap-y);\n}\n\n@mixin feedback-color($feedback-type) {\n  background-color: map.get($components-alert-background, $feedback-type);\n  border: 1px solid map.get($components-alert-border, $feedback-type) !important;\n}\n\n@mixin icon-color($feedback-type) {\n  color: map.get($components-alert-icon, $feedback-type);\n}\n\n@mixin icon-position {\n  margin-left: var(--alert-icon-position-x);\n  margin-top: var(--alert-icon-position-y);\n}\n\nnv-alert {\n  @include root-styles();\n\n  & > nv-icon {\n    @include icon-position();\n  }\n\n  &.hidden {\n    display: none!important;\n  }\n\n  @each $feedback in $alert-feedback {\n    &.feedback-#{$feedback} {\n      @include feedback-color($feedback);\n      & > .close {\n        @include focus-ring(map.get($components-alert-border, $feedback));\n      }\n    }\n  }\n\n  @each $feedback in $alert-feedback {\n    & > nv-icon.icon-#{$feedback} {\n      @include icon-color($feedback);\n    }\n  }\n\n  & > .content {\n    @include content-styles();\n\n    & > .heading {\n      color: var(--components-alert-content-title);\n      font-size: var(--alert-heading-font-size);\n      line-height: var(--alert-heading-line-height);\n      font-weight: var(--alert-heading-font-weight);\n    }\n    & > .message {\n      color: var(--components-alert-content-description);\n      font-size: var(--alert-message-font-size);\n      line-height: var(--alert-message-line-height);\n    }\n  }\n  & > .close {\n    border-radius: var(--alert-radius);\n    position: absolute;\n    display: flex;\n    top: var(--alert-icon-position-y);\n    right: var(--alert-icon-position-x);\n    padding: 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n  }\n}\n","import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\n\nimport {\n  DeprecatedSemanticColors,\n  FeedbackColors,\n} from '../../utils/constants';\nimport { useCollapse, useFade, timeline } from '../../animations';\n\n/**\n * @slot default - Use this slot to insert HTML into the alert content.\n */\n@Component({\n  tag: 'nv-alert',\n  styleUrl: 'nv-alert.scss',\n  shadow: false,\n})\nexport class NvAlert {\n  @Element() ref: HTMLNvAlertElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Defines color of the alert.\n   * @deprecated use feedback instead.\n   */\n  @Prop({ reflect: true })\n  readonly color: `${DeprecatedSemanticColors}`;\n\n  componentWillRender() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Specifies the alert type which determines the color and default icon.\n   */\n  @Prop({ reflect: true, mutable: true })\n  feedback: `${FeedbackColors}` = 'information';\n\n  /**\n   * Main content of the alert. For more complex content, use the default slot\n   * instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Short and concise text for the alert title.\n   */\n  @Prop({ reflect: true })\n  readonly heading: string;\n\n  /**\n   * Icon associated with the alert, defaults vary based on the feedback type.\n   */\n  @Prop({ reflect: true })\n  readonly icon: string;\n\n  /**\n   * Allows the alert to be dismissed via a close button (x). The alert is not\n   * dismissible unless explicitly enabled.\n   */\n  @Prop({ reflect: true })\n  readonly dismissible: boolean = false;\n\n  /**\n   * When true, the alert does not automatically close upon dismissing.\n   * Useful for externally controlled component behavior.\n   */\n  @Prop({ reflect: true })\n  readonly preventAutoClose: boolean = false;\n\n  /**\n   * Controls the visibility of the alert. Will animate with fade and collapse.\n   */\n  @Prop({ reflect: true, mutable: true })\n  hidden: boolean = false; // eslint-disable-line @stencil-community/reserved-member-names\n\n  /**\n   * When true, the alert will not animate when it is hidden or shown.\n   */\n  @Prop({ reflect: true })\n  readonly hasNoAnimations: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the 'hidden' prop changes, reflecting a change in visibility.\n   * Passes hidden value to the detail.\n   * @bind hidden\n   */\n  @Event()\n  hiddenChanged: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the animations complete, detail includes the hidden value.\n   */\n  @Event()\n  hiddenChangedComplete: EventEmitter<boolean>;\n\n  /**\n   * Emitted when the close button is clicked.\n   */\n  @Event()\n  closeClicked: EventEmitter<void>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Used for 2 way binding with the hidden property.\n   * Triggers open and close animations.\n   * @param {boolean} hidden - The visibility state of the alert.\n   */\n  @Watch('hidden')\n  async handleHiddenChange(hidden: boolean) {\n    this.hiddenChanged.emit(hidden);\n\n    await this.updateVisibility(hidden);\n    this.hiddenChangedComplete.emit(hidden);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the dismissal of the alert, considering the preventAutoClose prop.\n   * Passes the original event from the close button to the close event detail.\n   * @param {MouseEvent} originalEvent - The original event from the close button.\n   */\n  private handleDismiss = () => {\n    if (!this.preventAutoClose) {\n      this.hidden = true;\n    }\n\n    this.closeClicked.emit();\n  };\n\n  /**\n   * By default an icon is linked to the feedback type\n   * @returns {string} - The default icon name.\n   */\n  private getDefaultIcon = () => {\n    switch (this.feedback) {\n      case FeedbackColors.Warning:\n        return 'alert-circle';\n      case FeedbackColors.Information:\n        return 'info-circle';\n      case FeedbackColors.Success:\n        return 'circle-check';\n      case FeedbackColors.Error:\n        return 'alert-circle';\n      case FeedbackColors.Neutral:\n        return 'help';\n      default:\n        return 'info-circle';\n    }\n  };\n\n  /**\n   * Updates the visibility state of the alert with optional animations\n   * @param {boolean} hidden - Whether the alert should be hidden\n   */\n  private async updateVisibility(hidden: boolean) {\n    if (this.hasNoAnimations) {\n      this.toggleHiddenClass(hidden);\n      return;\n    }\n\n    const { fadeIn, fadeOut } = useFade(this.ref, { duration: 150 });\n    const { collapse, expand } = useCollapse(this.ref, { duration: 150 });\n\n    if (hidden) {\n      await timeline(fadeOut, collapse).start();\n      this.toggleHiddenClass(true);\n    } else {\n      this.toggleHiddenClass(false);\n      await timeline(expand, fadeIn).start();\n    }\n  }\n\n  /**\n   * Toggles the 'hidden' class on the element\n   * @param {boolean} hidden - Whether to add or remove the hidden class\n   */\n  private toggleHiddenClass(hidden: boolean) {\n    this.ref.classList.toggle('hidden', hidden);\n  }\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillLoad() {\n    if (this.color) {\n      switch (this.color) {\n        case 'primary' as DeprecatedSemanticColors:\n          this.feedback = 'warning' as FeedbackColors;\n          break;\n        case 'secondary' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        case 'neutral' as DeprecatedSemanticColors:\n          this.feedback = 'information' as FeedbackColors;\n          break;\n        default:\n          this.feedback = this.color as FeedbackColors;\n      }\n    }\n\n    if (this.hidden) {\n      this.ref.classList.add('hidden');\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host role=\"alert\" class={clsx('root', `feedback-${this.feedback}`)}>\n        <nv-icon\n          name={this.icon ?? this.getDefaultIcon()}\n          class={`icon-${this.feedback}`}\n          size=\"md\"\n        ></nv-icon>\n\n        <div class=\"content\">\n          {this.heading && <p class=\"heading\">{this.heading}</p>}\n\n          {this.message && <p class=\"message\">{this.message}</p>}\n\n          <slot></slot>\n        </div>\n\n        {this.dismissible && (\n          <button class=\"close\" type=\"button\" onClick={this.handleDismiss}>\n            <nv-icon name=\"x\" size=\"sm\" />\n          </button>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/nv-breadcrumb.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-aff3ed68.js';
 import { c as clsx } from './p-8a1a6e56.js';
 import { d as defineCustomElement$3 } from './p-195f46f3.js';
-import { d as defineCustomElement$2 } from './p-2ef4fb88.js';
+import { d as defineCustomElement$2 } from './p-f47a1e1e.js';
 
 const nvBreadcrumbCss = "nv-breadcrumb{display:flex;align-items:center;color:var(--components-breadcrumb-text);font-size:var(--font-size-sm);font-style:normal;font-weight:500;line-height:var(--line-height-sm)}nv-breadcrumb.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-breadcrumb ul{display:flex;flex-direction:column;gap:var(--spacing-1-5);padding:var(--spacing-1)}nv-breadcrumb ul a,nv-breadcrumb ul button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb ul a:focus,nv-breadcrumb ul a:focus-within,nv-breadcrumb ul button:focus,nv-breadcrumb ul button:focus-within{outline:none}nv-breadcrumb ul a:focus-visible,nv-breadcrumb ul a:has(:focus-visible),nv-breadcrumb ul button:focus-visible,nv-breadcrumb ul button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb ul a:hover,nv-breadcrumb ul button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb>a,nv-breadcrumb>button{display:inline-flex;align-self:center;color:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;text-decoration:none}nv-breadcrumb>a:focus,nv-breadcrumb>a:focus-within,nv-breadcrumb>button:focus,nv-breadcrumb>button:focus-within{outline:none}nv-breadcrumb>a:focus-visible,nv-breadcrumb>a:has(:focus-visible),nv-breadcrumb>button:focus-visible,nv-breadcrumb>button:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 0.5) solid var(--components-breadcrumb-text-hover);outline-offset:calc(var(--focus-outline-offset) * 0.3);z-index:111}nv-breadcrumb>a:hover,nv-breadcrumb>button:hover{text-decoration:underline;color:var(--components-breadcrumb-text-hover)}nv-breadcrumb span[data-scope=separator]{display:inline-flex;padding-left:var(--breadcrumb-padding-y)}";
 const NvBreadcrumbStyle0 = nvBreadcrumbCss;

package/dist/components/nv-fielddropdownitemcheck.js

@@ -1,4 +1,4 @@
-import { N as NvFielddropdownitemcheck$1, d as defineCustomElement$1 } from './p-51a156ff.js';
+import { N as NvFielddropdownitemcheck$1, d as defineCustomElement$1 } from './p-ec4558aa.js';
 
 const NvFielddropdownitemcheck = NvFielddropdownitemcheck$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/nv-fieldmultiselect.js

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, F as Fragment, d as Host } from './p-aff3ed68.js';
 import { d as defineCustomElement$8 } from './p-8011513c.js';
 import { d as defineCustomElement$7 } from './p-a5002d14.js';
-import { d as defineCustomElement$6 } from './p-51a156ff.js';
+import { d as defineCustomElement$6 } from './p-ec4558aa.js';
 import { d as defineCustomElement$5 } from './p-a1fe0a5d.js';
 import { d as defineCustomElement$4 } from './p-50d0db7b.js';
 import { d as defineCustomElement$3 } from './p-fda58a76.js';
@@ -17,6 +17,7 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         this.__registerHost();
         this.valueChanged = createEvent(this, "valueChanged", 7);
         this.filterTextChanged = createEvent(this, "filterTextChanged", 7);
+        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
@@ -124,6 +125,9 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         this.isSelectAllSectionVisible = true;
         // Add the flag to the class
         this.preventBlurClose = false;
+        this.handleMouseDownPreventBlur = () => {
+            this.preventBlurClose = true;
+        };
         /**
          * Handle badge close for options mode.
          */
@@ -310,6 +314,11 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
          */
         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;
@@ -346,24 +355,33 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         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.
@@ -372,31 +390,40 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         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.
@@ -448,16 +475,10 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
                     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
@@ -470,16 +491,10 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
                     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
@@ -508,7 +523,12 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         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();
@@ -553,7 +573,9 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      * @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;
@@ -561,21 +583,23 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
         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;
             }
         }
@@ -603,7 +627,11 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      */
     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.
@@ -661,7 +689,9 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
      */
     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
     /****************************************************************************/
@@ -1190,13 +1220,23 @@ const NvFieldmultiselect$1 = /*@__PURE__*/ proxyCustomElement(class NvFieldmulti
             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);
         });