@nova-design-system/nova-react 3.23.0 → 3.25.0

package/dist/cjs/{nv-fieldmultiselect.entry-DiqRreWh.js → nv-fieldmultiselect.entry-DSpQeiPx.js}

@@ -1,13 +1,13 @@
 'use strict';
 
-var index = require('./index-CtjeeUI-.js');
-var i18n_utilsDOZbXX2L = require('./i18n.utils-DOZbXX2L-BizoXo6c.js');
+var index = require('./index-DUlunl9a.js');
+var i18n_utilsIlwlcG9l = require('./i18n.utils-IlwlcG9l-ku0bScip.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-const nvFieldmultiselectCss = "nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldmultiselect[required]:not([required=false]) label::after,nv-fieldmultiselect[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect{position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:var(--form-field-padding-y) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}";
+const nvFieldmultiselectCss = () => `nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldmultiselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldmultiselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldmultiselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldmultiselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldmultiselect[required]:not([required=false]) label::after,nv-fieldmultiselect[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldmultiselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldmultiselect nv-popover{width:100%;display:block}nv-fieldmultiselect nv-popover [data-scope=popover]{min-width:100%;width:max-content;max-width:400px;padding:var(--list-dropdown-padding);border-radius:var(--list-dropdown-radius);background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border)}nv-fieldmultiselect nv-popover [slot=content]{gap:var(--list-dropdown-gap-y);display:flex;flex-direction:column}nv-fieldmultiselect nv-popover hr{color:var(--components-list-dropdown-separator)}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar{width:6px;height:6px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldmultiselect nv-popover div[slot=content]{max-height:calc(90vh - var(--list-dropdown-padding) * 2);overflow-y:auto;position:relative}nv-fieldmultiselect .input-wrapper-multiselect{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;width:100%}nv-fieldmultiselect .input-container-multiselect{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldmultiselect .input-container-multiselect:hover{border-color:var(--nv-field-border-hover)}nv-fieldmultiselect .input-container-multiselect:focus-within,nv-fieldmultiselect .input-container-multiselect:focus-within:hover,nv-fieldmultiselect .input-container-multiselect:focus,nv-fieldmultiselect .input-container-multiselect:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldmultiselect .input-container-multiselect:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldmultiselect .input-container-multiselect:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldmultiselect .input-container-multiselect{position:relative;width:100%;min-height:40px}nv-fieldmultiselect .input-container-multiselect>nv-badge{margin-left:var(--form-field-padding-x)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldmultiselect .input-container-multiselect input:focus,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text:focus{outline:none}nv-fieldmultiselect .input-container-multiselect input::placeholder,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{}nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-clear,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldmultiselect .input-container-multiselect input,nv-fieldmultiselect .input-container-multiselect p.non-filterable-text{width:100%;flex-grow:1;margin:0;min-height:100%;box-sizing:border-box}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton{border:0px;border-radius:0px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldmultiselect .input-container-multiselect>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldmultiselect .input-container-multiselect nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldmultiselect .non-filterable-text{display:block;border-radius:var(--form-field-radius);background-color:var(--nv-field-background);color:var(--components-form-field-content-text);font-size:var(--form-field-font-size);font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);box-sizing:border-box;cursor:pointer;height:100%;min-height:40px}nv-fieldmultiselect .non-filterable-text span{display:inline-block;width:100%;overflow:hidden;text-overflow:ellipsis}nv-fieldmultiselect .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldmultiselect .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}.no-results-message{cursor:not-allowed;background-color:unset;color:var(--components-menu-contextual-item-content-disabled);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x)}.multiselect-divider{display:block;width:100%;height:1px;background-color:var(--components-list-dropdown-separator);margin:var(--list-dropdown-item-padding-y) 0;border:0}.select-all-container{position:sticky;top:0;background-color:var(--components-list-dropdown-background);border-bottom:1px solid var(--components-list-dropdown-separator);padding:var(--list-dropdown-item-padding-y) var(--list-dropdown-item-padding-x);z-index:10;margin-bottom:0}.select-all-container .select-all-header{display:flex;align-items:center;gap:var(--form-field-gap)}.select-all-container .select-all-header nv-fieldcheckbox{flex:1;margin:0}.select-all-container .select-all-header nv-iconbutton,.select-all-container .select-all-header nv-button{flex-shrink:0;margin-left:auto}.select-all-container .select-all-header nv-button{justify-content:center}`;
 
 const NvFieldmultiselect = class {
     constructor(hostRef) {
@@ -512,13 +512,12 @@ const NvFieldmultiselect = class {
          * @returns {any} The JSX for options mode
          */
         this.renderOptionsMode = () => {
-            var _a, _b, _c, _d;
-            return (index.h(index.Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0, label: `${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (index.h("input", Object.assign({ type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
+            return (index.h(index.Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open, onOpenChanged: this.handleOpenChanged }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect" }, index.h("slot", { name: "leading-input" }), (this.value?.length || 0) > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (this.value?.length || 0) > 0, label: `${this.value?.length || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value?.length || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseOptions })), this.filterable || this.disabled || this.readonly ? (index.h("input", { type: "text", id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
                     ? this.required
-                    : undefined }, (this.getRequiredAttributes().ariaRequiredValue !==
-                undefined && {
-                'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-            }), { disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` }))) : (index.h(index.Fragment, null, index.h("input", { id: this.inputId, type: "text", style: {
+                    : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
+                    undefined && {
+                    'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
+                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputOptions, onFocus: this.handleInputFocusOptions, onBlur: this.handleInputBlurOptions, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (index.h(index.Fragment, null, index.h("input", { id: this.inputId, type: "text", style: {
                     position: 'absolute',
                     opacity: '0',
                     width: '0',
@@ -534,13 +533,12 @@ const NvFieldmultiselect = class {
          * @returns {any} The JSX for slots mode
          */
         this.renderSlotsMode = () => {
-            var _a, _b, _c, _d;
-            return (index.h(index.Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), (((_a = this.value) === null || _a === void 0 ? void 0 : _a.length) || 0) > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (((_b = this.value) === null || _b === void 0 ? void 0 : _b.length) || 0) > 0, label: `${((_c = this.value) === null || _c === void 0 ? void 0 : _c.length) || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${((_d = this.value) === null || _d === void 0 ? void 0 : _d.length) || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (index.h("input", Object.assign({ id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
+            return (index.h(index.Host, { "aria-label": this.label }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { htmlFor: this.inputId }, index.h("slot", { name: "label" }, this.label))), index.h("nv-popover", { ref: el => (this.popoverElement = el), triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { class: "input-wrapper-multiselect", slot: "trigger" }, index.h("slot", { name: "before-input" }), index.h("div", { class: "input-container-multiselect", onClick: this.handleInputContainerClickSlots }, index.h("slot", { name: "leading-input" }), (this.value?.length || 0) > 0 && (index.h("nv-badge", { slot: "leading-input", "prevent-auto-close": true, color: "10", dismissible: (this.value?.length || 0) > 0, label: `${this.value?.length || 0} ${this.badgeLabel}`, "aria-label": `Clear all ${this.value?.length || 0} ${this.badgeLabel} items`, onCloseClicked: this.handleBadgeCloseSlots })), this.filterable || this.disabled || this.readonly ? (index.h("input", { id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, value: this.filterText, required: this.getRequiredAttributes().useNativeRequired
                     ? this.required
-                    : undefined }, (this.getRequiredAttributes().ariaRequiredValue !==
-                undefined && {
-                'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
-            }), { disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` }))) : (index.h(index.Fragment, null, index.h("input", { id: this.inputId, type: "text", style: {
+                    : undefined, ...(this.getRequiredAttributes().ariaRequiredValue !==
+                    undefined && {
+                    'aria-required': String(this.getRequiredAttributes().ariaRequiredValue),
+                }), disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInputSlots, onFocus: this.handleInputFocusSlots, onBlur: this.handleInputBlurSlots, onKeyDown: this.handleKeyDown, "data-scope": "focusable", "aria-label": this.label, "aria-controls": `${this.inputId}-listbox` })) : (index.h(index.Fragment, null, index.h("input", { id: this.inputId, type: "text", style: {
                     position: 'absolute',
                     opacity: '0',
                     width: '0',
@@ -606,7 +604,6 @@ const NvFieldmultiselect = class {
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LISTENERS
-    /* eslint-disable nova/native-event-listener */
     /**
      * Listen for the `itemChecked` event emitted by child items.
      * @param {CustomEvent} event - The event object containing the selected value and its checked state.
@@ -644,7 +641,6 @@ const NvFieldmultiselect = class {
             console.warn('[Event:itemChecked] Received itemChecked event with undefined or null value'); // Warning log
         }
     }
-    /* eslint-enable nova/native-event-listener */
     // Add a listener for the slot content
     handleSlotChange(event) {
         // Check: we only want to reorder if it's the "content" slot
@@ -758,7 +754,6 @@ const NvFieldmultiselect = class {
      * Set the mode state and handle options change.
      */
     componentWillLoad() {
-        var _a;
         // Don't call handleOptionsChange if we are in slots mode
         if (this.options) {
             this.handleOptionsChange(this.options);
@@ -779,7 +774,7 @@ const NvFieldmultiselect = class {
         }
         // Initialize the sorted options array with the parsed options for initial rendering
         if (this.options) {
-            this.sortedOptions = [...((_a = this.options) !== null && _a !== void 0 ? _a : [])];
+            this.sortedOptions = [...(this.options ?? [])];
         }
         // Reset filter if needed
         if (!this.filterText) {
@@ -966,14 +961,13 @@ const NvFieldmultiselect = class {
      * Uses the search engine for optimized filtering with configurable modes.
      */
     async filterItems() {
-        var _a, _b;
         const ul = this.el.querySelector('ul');
         if (!ul)
             return;
-        this.effectiveFilterMode = i18n_utilsDOZbXX2L.getEffectiveFilterMode(this.filterMode);
+        this.effectiveFilterMode = i18n_utilsIlwlcG9l.getEffectiveFilterMode(this.filterMode);
         // Remove existing empty message and truncation message if any
-        (_a = ul.querySelector('[data-empty]')) === null || _a === void 0 ? void 0 : _a.remove();
-        (_b = ul.querySelector('[data-truncated]')) === null || _b === void 0 ? void 0 : _b.remove();
+        ul.querySelector('[data-empty]')?.remove();
+        ul.querySelector('[data-truncated]')?.remove();
         // Reset truncation state
         this.resultsTruncated = false;
         this.totalResults = 0;
@@ -981,7 +975,7 @@ const NvFieldmultiselect = class {
             this.filterText.length < this.startFilterAt) {
             // Reset display and apply maxResults limit
             const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
-            const effectiveMaxResults = i18n_utilsDOZbXX2L.clampMaxResults(this.maxResults);
+            const effectiveMaxResults = i18n_utilsIlwlcG9l.clampMaxResults(this.maxResults);
             let visibleCount = 0;
             items.forEach(item => {
                 if (visibleCount < effectiveMaxResults) {
@@ -1014,7 +1008,7 @@ const NvFieldmultiselect = class {
         const matchingIds = new Set(result.ids);
         let hasVisibleItems = false;
         const items = Array.from(ul.querySelectorAll('nv-fielddropdownitemcheck'));
-        const effectiveMaxResults = i18n_utilsDOZbXX2L.clampMaxResults(this.maxResults);
+        const effectiveMaxResults = i18n_utilsIlwlcG9l.clampMaxResults(this.maxResults);
         let visibleCount = 0;
         items.forEach(item => {
             const itemValue = item.getAttribute('value') || '';
@@ -1057,10 +1051,9 @@ const NvFieldmultiselect = class {
      * Rebuilds the search index from current items (options prop or slot items).
      */
     async rebuildSearchIndex() {
-        var _a;
         // Build raw items array for indexing
         this.rawItems = [];
-        if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.length) {
+        if (this.options?.length) {
             this.options.forEach((opt, index) => {
                 if (!opt.isDivider) {
                     this.rawItems.push({
@@ -1074,21 +1067,20 @@ const NvFieldmultiselect = class {
             // Use slot items
             const items = Array.from(this.el.querySelectorAll('nv-fielddropdownitemcheck'));
             items.forEach((item, index) => {
-                var _a;
                 this.rawItems.push({
                     id: item.getAttribute('value') || `item-${index}`,
-                    label: item.getAttribute('label') || ((_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '',
+                    label: item.getAttribute('label') || item.textContent?.trim() || '',
                 });
             });
         }
         // Build local index for main-thread search
-        this.indexedItems = i18n_utilsDOZbXX2L.buildIndex(this.rawItems);
+        this.indexedItems = i18n_utilsIlwlcG9l.buildIndex(this.rawItems);
         // Determine effective filter mode
-        this.effectiveFilterMode = i18n_utilsDOZbXX2L.getEffectiveFilterMode(this.filterMode);
+        this.effectiveFilterMode = i18n_utilsIlwlcG9l.getEffectiveFilterMode(this.filterMode);
         // Initialize worker if needed
         const itemCount = this.rawItems.length;
-        const threshold = i18n_utilsDOZbXX2L.clampWorkerThreshold(this.workerThreshold);
-        if (i18n_utilsDOZbXX2L.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold)) {
+        const threshold = i18n_utilsIlwlcG9l.clampWorkerThreshold(this.workerThreshold);
+        if (i18n_utilsIlwlcG9l.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold)) {
             await this.initSearchWorker();
         }
         else {
@@ -1101,12 +1093,12 @@ const NvFieldmultiselect = class {
      * Note: Fuzzy search now works on main thread with Fuse.js, so no mode change needed.
      */
     async initSearchWorker() {
-        if (!i18n_utilsDOZbXX2L.isWorkerSupported()) {
+        if (!i18n_utilsIlwlcG9l.isWorkerSupported()) {
             // Workers not supported - will use main thread (fuzzy still works with Fuse.js)
             return;
         }
         if (!this.workerClient) {
-            this.workerClient = new i18n_utilsDOZbXX2L.SearchWorkerClient();
+            this.workerClient = new i18n_utilsIlwlcG9l.SearchWorkerClient();
             // No fallback mode change needed - fuzzy works on main thread now
         }
         // Init will silently handle fallback if worker can't be created
@@ -1127,15 +1119,14 @@ const NvFieldmultiselect = class {
      * @returns {Promise<SearchResult>} Resolves with the search results.
      */
     async performAdvancedSearch() {
-        var _a;
         // Ensure index is built
         if (!this.indexedItems.length) {
             await this.rebuildSearchIndex();
         }
         const itemCount = this.rawItems.length;
-        const threshold = i18n_utilsDOZbXX2L.clampWorkerThreshold(this.workerThreshold);
-        const useWorker = i18n_utilsDOZbXX2L.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold);
-        if (useWorker && ((_a = this.workerClient) === null || _a === void 0 ? void 0 : _a.isReady)) {
+        const threshold = i18n_utilsIlwlcG9l.clampWorkerThreshold(this.workerThreshold);
+        const useWorker = i18n_utilsIlwlcG9l.shouldUseWorker(itemCount, this.effectiveFilterMode, threshold);
+        if (useWorker && this.workerClient?.isReady) {
             this.isSearching = true;
             try {
                 return await this.workerClient.search(this.filterText, this.effectiveFilterMode, this.maxResults, this.fuzzyThreshold);
@@ -1143,7 +1134,7 @@ const NvFieldmultiselect = class {
             catch (error) {
                 console.error('Worker search failed:', error);
                 // Fall back to main thread (fuzzy now works with Fuse.js)
-                return i18n_utilsDOZbXX2L.search(this.indexedItems, {
+                return i18n_utilsIlwlcG9l.search(this.indexedItems, {
                     query: this.filterText,
                     filterMode: this.effectiveFilterMode,
                     maxResults: this.maxResults,
@@ -1156,7 +1147,7 @@ const NvFieldmultiselect = class {
             }
         }
         // Use main thread search (fuzzy now works with Fuse.js)
-        return i18n_utilsDOZbXX2L.search(this.indexedItems, {
+        return i18n_utilsIlwlcG9l.search(this.indexedItems, {
             query: this.filterText,
             filterMode: this.effectiveFilterMode,
             maxResults: this.maxResults,
@@ -1171,15 +1162,14 @@ const NvFieldmultiselect = class {
      * @param {number} total - The total number of available items.
      */
     addTruncatedMessage(ul, shown, total) {
-        var _a;
         // Remove existing truncation message
-        (_a = ul.querySelector('[data-truncated]')) === null || _a === void 0 ? void 0 : _a.remove();
+        ul.querySelector('[data-truncated]')?.remove();
         // Get the text template: use provided text or auto-detect from locale
-        const textTemplate = this.truncatedResultsText || i18n_utilsDOZbXX2L.getTruncatedResultsText(this.locale);
+        const textTemplate = this.truncatedResultsText || i18n_utilsIlwlcG9l.getTruncatedResultsText(this.locale);
         const truncatedItem = document.createElement('li');
         truncatedItem.setAttribute('data-truncated', 'true');
         truncatedItem.className = 'truncated-message no-results-message';
-        truncatedItem.textContent = i18n_utilsDOZbXX2L.formatTruncatedResults(textTemplate, shown, total);
+        truncatedItem.textContent = i18n_utilsIlwlcG9l.formatTruncatedResults(textTemplate, shown, total);
         ul.appendChild(truncatedItem);
     }
     handleClickOutside(event) {
@@ -1474,11 +1464,17 @@ const NvFieldmultiselect = class {
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "options": ["handleOptionsChange"],
-        "value": ["watchValueHandler"],
-        "open": ["handleOpenChange"]
+        "options": [{
+                "handleOptionsChange": 0
+            }],
+        "value": [{
+                "watchValueHandler": 0
+            }],
+        "open": [{
+                "handleOpenChange": 0
+            }]
     }; }
 };
-NvFieldmultiselect.style = nvFieldmultiselectCss;
+NvFieldmultiselect.style = nvFieldmultiselectCss();
 
 exports.nv_fieldmultiselect = NvFieldmultiselect;

package/dist/cjs/nv-fieldnumber.entry-BwxR9sRr.js

@@ -0,0 +1,189 @@
+'use strict';
+
+var index = require('./index-DUlunl9a.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvFieldnumberCss = () => `nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range{background:var(--components-slider-track-filled-focus)}nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb{border-color:var(--components-slider-track-filled-focus)}nv-fieldslider[error] .slider-container .track-container .track .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:hover{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-handler-background-error)}nv-fieldslider[error] .slider-container .track-container .track .thumb:focus{border-color:var(--components-slider-track-filled-error);outline:calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);outline-offset:calc(var(--focus-outline-offset) * 1);background-color:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range{background:var(--components-slider-track-filled-error)}nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb{border-color:var(--components-slider-track-filled-error)}nv-fieldnumber{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box;max-width:480px}nv-fieldnumber[fluid]:not([fluid=false]){max-width:unset}nv-fieldnumber[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldnumber[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive-in-field)}nv-fieldnumber[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldnumber[required]:not([required=false]) label::after,nv-fieldnumber[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldnumber label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-label-line-height)}nv-fieldnumber .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldnumber .input-wrapper .input-container{display:flex;flex-grow:1;justify-content:center;align-items:center;align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default, 1);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldnumber .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldnumber .input-wrapper .input-container:focus-within,nv-fieldnumber .input-wrapper .input-container:focus-within:hover,nv-fieldnumber .input-wrapper .input-container:focus,nv-fieldnumber .input-wrapper .input-container:focus:hover{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldnumber .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldnumber .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldnumber .input-wrapper .input-container{container-type:inline-size;container-name:field-number-input-container;overflow:hidden;position:relative}nv-fieldnumber .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldnumber .input-wrapper .input-container input:focus{outline:none}nv-fieldnumber .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--form-field-line-height)}nv-fieldnumber .input-wrapper .input-container input{}nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldnumber .input-wrapper .input-container input{width:100%;appearance:textfield}nv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button,nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button{appearance:none;margin:0}nv-fieldnumber .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-field-gap)}nv-fieldnumber .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldnumber .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldnumber .input-wrapper .input-container>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldnumber .input-wrapper .input-container .stepper{display:flex;border-left:var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly)}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton{border:0px;border-radius:0px}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldnumber .input-wrapper .input-container .stepper>nv-iconbutton{border-radius:0px}@container field-number-input-container (width < 150px){nv-fieldnumber .input-wrapper .input-container .stepper-spacer{display:none}nv-fieldnumber .input-wrapper .input-container .stepper{display:none}}nv-fieldnumber .description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldnumber .error-description{display:flex;align-items:center;align-self:stretch;gap:var(--spacing-1);color:var(--components-form-text-description-default);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}`;
+
+const NvFieldnumber = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * 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
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4BdYh22OP.v4();
+        /**
+         * The disabled prop lets you turn off the input field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to#
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the input field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
+         */
+        this.required = false;
+        /**
+         * Marks the input field as required for accessibility purposes without triggering
+         * native HTML validation. Use this when implementing custom validation logic.
+         * @note When set, this uses `aria-required` instead of the native `required` attribute.
+         * This allows developers to implement custom validation while maintaining accessibility.
+         * @note If this prop is not explicitly set, the component will check for the HTML attribute
+         * 'aria-required' directly to determine if it should be applied.
+         */
+        this.ariaRequiredAttr = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * Define the increment value for the input field. It determines how much the
+         * value will increase or decrease when the user clicks the stepper buttons.
+         */
+        this.step = 1;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleInput = (event) => {
+            const input = event.target;
+            if (input.value === '') {
+                this.value = null;
+                return;
+            }
+            const nextValue = input.valueAsNumber;
+            if (Number.isNaN(nextValue)) {
+                return;
+            }
+            this.value = nextValue;
+        };
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.handlePlus = () => {
+            this.inputElement.stepUp();
+            this.value = Number(this.inputElement.value);
+        };
+        this.handleMinus = () => {
+            this.inputElement.stepDown();
+            this.value = Number(this.inputElement.value);
+        };
+        // prevents text selection when clicking the buttons multiple times
+        this.preventSelection = (event) => {
+            event.preventDefault();
+        };
+        this.isMinValueReached = () => {
+            return (this.min !== undefined &&
+                typeof this.value === 'number' &&
+                this.value <= this.min);
+        };
+        this.isMaxValueReached = () => {
+            return (this.max !== undefined &&
+                typeof this.value === 'number' &&
+                this.value >= this.max);
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    watchValueHandler(newValue) {
+        const normalized = typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;
+        if (this.lastEmittedValue === normalized) {
+            return;
+        }
+        this.lastEmittedValue = normalized;
+        this.valueChanged.emit(normalized);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        // Check aria-required from multiple sources:
+        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
+        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
+        // We use hasAttribute to determine if the attribute was explicitly set by the user,
+        // since the prop now defaults to false (to maintain Blazor compatibility)
+        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
+            this.el.hasAttribute('aria-required-attr');
+        const ariaRequiredFromAttr = hasAriaRequiredAttr
+            ? this.el.getAttribute('aria-required') ||
+                this.el.getAttribute('aria-required-attr')
+            : null;
+        // Use aria-required if the attribute was explicitly set
+        // With reflect: true, setting the prop will also set the attribute
+        const useAriaRequired = hasAriaRequiredAttr;
+        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
+        // If attribute doesn't exist, the prop was never set and we don't use aria-required
+        const ariaRequiredAttrValue = hasAriaRequiredAttr
+            ? ariaRequiredFromAttr
+            : null;
+        // Determine which attributes to use
+        // If aria-required HTML attribute is present, use it (convert string to boolean)
+        // If required is set and aria-required is not "false", use native required
+        // If aria-required is "false", don't use native required even if required is set
+        const ariaRequiredValue = useAriaRequired
+            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
+            : undefined;
+        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
+        return (index.h(index.Host, { key: '8923d44cca66a2540688650ababfeec76ea1ef37' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '56b80106201b70cb881df6051c6ef12694762cc3', htmlFor: this.inputId }, index.h("slot", { key: '864103e328f18ad16041f434856ee6b3c996aa86', name: "label" }, this.label))), index.h("div", { key: '83f62b35fa18c43b7825d1510e47b47151c007cd', class: "input-wrapper" }, index.h("slot", { key: 'c566e63d0e78c63ee1a3d42e44dfed04eb1bf442', name: "before-input" }), index.h("div", { key: '234a861d3bd801394ed529a96480616357d1be68', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'c1128d9b4cbe4b7c2c57117b8b86f8ae553df749', name: "leading-input" }), index.h("input", { key: 'b5d2a4a11e7a86be87bc43b2258352c427478f2e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: "number", autofocus: this.autofocus, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), max: this.max, min: this.min, step: this.step, value: typeof this.value === 'number' ? this.value : undefined, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), index.h("slot", { key: '37629423645755fdf53ea955ead6950752047ca4', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: 'a23fccf662246ac1f696942f96d632112644b103', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'b20933d5b749b3d3bc56ceb9acab8dc4a1a22c7b', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: '1b1eccecd0c62d1c8675b323e5e69df4321ab0b1', class: "stepper" }, index.h("nv-iconbutton", { key: '4065c40b5f1dcb35d4508741d24ec4e98b410e20', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '185fc575ffb4143b6f212831c0cfdb9467593a14', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '684f6fd512db5becf5a392d641583f3fde4b7ee1', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '731b758b37cf19b90ed83fc59ef071d758fa308c', class: "description" }, index.h("slot", { key: '6c5b91e259ec4f70353ff52297c5d9e3f5d4e830', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'ac5c52dc7f3ece9cb6c7fa19dfc537fbac307686', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'ce43bfc92428463267fccf376b580ab6794e9200', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": [{
+                "watchValueHandler": 0
+            }]
+    }; }
+};
+NvFieldnumber.style = nvFieldnumberCss();
+
+exports.nv_fieldnumber = NvFieldnumber;