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

package/dist/components/{p--iYGZN4R.js → p-D6APFL6N.js}

@@ -1,10 +1,10 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-C63Xpg9a.js';
-import { d as defineCustomElement$3 } from './p-CBOuqJTb.js';
-import { d as defineCustomElement$2 } from './p-DaiLIZ8f.js';
-import { d as defineCustomElement$1 } from './p-DzUXTCUy.js';
+import { d as defineCustomElement$3 } from './p-nfYynlVq.js';
+import { d as defineCustomElement$2 } from './p-DvapDVBj.js';
+import { d as defineCustomElement$1 } from './p-COnt5ux_.js';
 import { v as v4 } from './p-BdYh22OP.js';
 
-const nvFieldnumberCss = "/* TODO: integrate this logic in the proper structure */\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {\n  background: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {\n  border-color: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {\n  background: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {\n  border-color: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider[error] .slider-container .track-container .track .track-range {\n  background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb {\n  border-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:hover {\n  border-color: var(--components-slider-track-filled-error);\n  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n  outline-offset: calc(var(--focus-outline-offset) * 1);\n  background-color: var(--components-slider-handler-background-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:focus {\n  border-color: var(--components-slider-track-filled-error);\n  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n  outline-offset: calc(var(--focus-outline-offset) * 1);\n  background-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {\n  background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {\n  border-color: var(--components-slider-track-filled-error);\n}\n\nnv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n  max-width: 480px;\n}\nnv-fieldnumber[fluid]:not([fluid=false]) {\n  max-width: unset;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after, nv-fieldnumber[aria-required=true] label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: var(--font-weight-high-emphasis);\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-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 {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container {\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: var(--form-field-padding-y) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  line-height: var(--form-field-line-height);\n  width: 100%;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: var(--font-weight-low-emphasis);\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  /* Hide Edge built-in password reveal and clear icons */\n}\nnv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:last-of-type {\n  border-top-right-radius: var(--form-field-radius);\n  border-bottom-right-radius: var(--form-field-radius);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:last-of-type {\n  border-top-right-radius: var(--form-field-radius);\n  border-bottom-right-radius: var(--form-field-radius);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border-radius: 0px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
+const nvFieldnumberCss = "/* TODO: integrate this logic in the proper structure */\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {\n  background: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {\n  border-color: var(--components-slider-track-filled-hover);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {\n  background: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {\n  border-color: var(--components-slider-track-filled-focus);\n}\nnv-fieldslider[error] .slider-container .track-container .track .track-range {\n  background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb {\n  border-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:hover {\n  border-color: var(--components-slider-track-filled-error);\n  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n  outline-offset: calc(var(--focus-outline-offset) * 1);\n  background-color: var(--components-slider-handler-background-error);\n}\nnv-fieldslider[error] .slider-container .track-container .track .thumb:focus {\n  border-color: var(--components-slider-track-filled-error);\n  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);\n  outline-offset: calc(var(--focus-outline-offset) * 1);\n  background-color: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {\n  background: var(--components-slider-track-filled-error);\n}\nnv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {\n  border-color: var(--components-slider-track-filled-error);\n}\n\nnv-fieldnumber {\n  --nv-field-border-default: var(--components-form-field-border-default);\n  --nv-field-border-hover: var(--components-form-field-border-hover);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--components-form-field-border-default);\n  --nv-field-border-readonly: var(--components-form-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-brand);\n  --nv-field-background: var(--components-form-field-background-default);\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: var(--form-gap-y);\n  box-sizing: border-box;\n  max-width: 480px;\n}\nnv-fieldnumber[fluid]:not([fluid=false]) {\n  max-width: unset;\n}\nnv-fieldnumber[readonly]:not([readonly=false]) {\n  --nv-field-border-default: var(--components-form-field-border-readonly);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--components-form-field-border-focus);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-background: var(--components-form-field-background-readonly);\n}\nnv-fieldnumber[error]:not([error=false]) {\n  --nv-field-border-default: var(--components-form-field-border-error);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);\n}\nnv-fieldnumber[success]:not([success=false]) {\n  --nv-field-border-default: var(--components-form-field-border-success);\n  --nv-field-border-hover: var(--nv-field-border-default);\n  --nv-field-border-focus: var(--nv-field-border-default);\n  --nv-field-border-disabled: var(--nv-field-border-default);\n  --nv-field-border-readonly: var(--nv-field-border-default);\n  --nv-field-focus-box-shadow: var(--color-focus-success);\n}\nnv-fieldnumber[required]:not([required=false]) label::after, nv-fieldnumber[aria-required=true] label::after {\n  content: \"*\";\n  color: var(--components-form-text-required);\n  font-weight: var(--font-weight-high-emphasis);\n}\nnv-fieldnumber label {\n  display: flex;\n  align-items: center;\n  gap: var(--form-label-gap);\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  line-height: var(--form-label-line-height);\n}\nnv-fieldnumber .input-wrapper {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--form-gap-x);\n  align-items: stretch;\n  align-self: stretch;\n}\nnv-fieldnumber .input-wrapper .input-container {\n  display: flex;\n  flex-grow: 1;\n  justify-content: center;\n  align-items: center;\n  align-self: stretch;\n  border-radius: var(--form-field-radius);\n  border-width: 1px;\n  border-style: solid;\n  border-color: var(--nv-field-border-default);\n  opacity: var(--components-form-opacity-default, 1);\n  background: var(--nv-field-background);\n  transition: all 150ms ease-out;\n}\nnv-fieldnumber .input-wrapper .input-container:hover {\n  border-color: var(--nv-field-border-hover);\n}\nnv-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 {\n  border-color: var(--nv-field-border-focus);\n  box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:read-only) {\n  background-color: var(--components-form-field-background-readonly);\n  border-color: var(--nv-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container:has(input:disabled) {\n  opacity: 0.5;\n  background-color: var(--components-form-field-background-disabled);\n  border-color: var(--nv-field-border-disabled);\n}\nnv-fieldnumber .input-wrapper .input-container {\n  container-type: inline-size;\n  container-name: field-number-input-container;\n  overflow: hidden;\n  position: relative;\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  display: flex;\n  align-items: center;\n  flex: 1 0 0;\n  overflow: hidden;\n  background-color: transparent;\n  color: var(--components-form-field-content-text);\n  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: var(--font-weight-medium-emphasis);\n  line-height: var(--form-field-line-height);\n  width: 100%;\n}\nnv-fieldnumber .input-wrapper .input-container input:focus {\n  outline: none;\n}\nnv-fieldnumber .input-wrapper .input-container input::placeholder {\n  overflow: hidden;\n  color: var(--components-form-field-content-placeholder);\n  text-overflow: ellipsis;\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-field-font-size);\n  font-style: normal;\n  font-weight: var(--font-weight-low-emphasis);\n  line-height: var(--form-field-line-height);\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  /* Hide Edge built-in password reveal and clear icons */\n}\nnv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal {\n  display: none;\n  width: 0;\n  height: 0;\n}\nnv-fieldnumber .input-wrapper .input-container input {\n  width: 100%;\n  appearance: textfield;\n}\nnv-fieldnumber .input-wrapper .input-container input::-webkit-inner-spin-button, nv-fieldnumber .input-wrapper .input-container input::-webkit-outer-spin-button {\n  appearance: none;\n  margin: 0;\n}\nnv-fieldnumber .input-wrapper .input-container nv-icon.validation {\n  color: var(--nv-field-border-default);\n  margin-right: var(--form-field-gap);\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container > nv-iconbutton:last-of-type {\n  border-top-right-radius: var(--form-field-radius);\n  border-bottom-right-radius: var(--form-field-radius);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper {\n  display: flex;\n  border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border: 0px;\n  border-radius: 0px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:focus-visible {\n  border-radius: var(--button-md-border-radius);\n  outline-offset: -3px;\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton:last-of-type {\n  border-top-right-radius: var(--form-field-radius);\n  border-bottom-right-radius: var(--form-field-radius);\n}\nnv-fieldnumber .input-wrapper .input-container .stepper > nv-iconbutton {\n  border-radius: 0px;\n}\n@container field-number-input-container (width < 150px) {\n  nv-fieldnumber .input-wrapper .input-container .stepper-spacer {\n    display: none;\n  }\n  nv-fieldnumber .input-wrapper .input-container .stepper {\n    display: none;\n  }\n}\nnv-fieldnumber .description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n}\nnv-fieldnumber .error-description {\n  display: flex;\n  align-items: center;\n  align-self: stretch;\n  gap: var(--spacing-1);\n  color: var(--components-form-text-description-default);\n  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  line-height: var(--form-description-line-height);\n  color: var(--components-form-text-description-error);\n}";
 
 const NvFieldnumber = /*@__PURE__*/ proxyCustomElement(class NvFieldnumber extends H {
     constructor(registerHost) {
@@ -171,11 +171,11 @@ const NvFieldnumber = /*@__PURE__*/ proxyCustomElement(class NvFieldnumber exten
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '833d2fcd7ce9e5830e23af4cbec9c88f90b9f713' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '2d82bda22e559e3be9efb605575d8a765e22f387', htmlFor: this.inputId }, h("slot", { key: '68b48a69abc483f46d6c5e185e45929225835892', name: "label" }, this.label))), h("div", { key: '7d5b44f27b15c0601f6939c37cd19ac7c4a76a09', class: "input-wrapper" }, h("slot", { key: '7e63527ab0971cbd3f8477859a2ffeb81e7f2faf', name: "before-input" }), h("div", { key: 'edcb992ec9e2f444394bbde848ca0f0a796e416b', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '0a5e5989ed32ea9a902c48747ab0a149802be5f2', name: "leading-input" }), h("input", Object.assign({ key: 'ec63e0bacfffacedd2878498f0260699585adfba', 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 })), h("slot", { key: 'b43af40093151a83ed9ecfe8c01d3c7af45a36fb', name: "trailing-input" }), this.error && (h("nv-icon", { key: '2ae24ccce0dfbff99699df2c0a3c281461892d19', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '8eecbdf7d7186a85baafba08fe30b60c891b30c4', name: "circle-check", class: "validation", size: "md" })), h("div", { key: 'a13aab8d9ee7c7725e26d72fd8a63db5ccf6a18c', class: "stepper" }, h("nv-iconbutton", { key: 'd261e26c85949fa00a9b74320414b632ec561050', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: '906849c512788f68f269fd73fc79399a45b394f0', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: '718cc5b63756c8f6dfa188287c6ba9530ad7c26e', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '213a9c560a4775f92e1b8e63e81ee5b14212e8b5', class: "description" }, h("slot", { key: '22855ff95f5d692ea2182c50ddedb946f324ba0d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'eb0ecdd74dce469c17af4d0a65fcdcad1ebac0f9', hidden: !this.error, class: "error-description" }, h("slot", { key: '00703e149d25d51a7daf8bb2fe764cf68672f96c', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '7c0ae66de24ba187965d6ea628f79665e6a39ca4' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8a8ee8f77c938e5edecacf154624f1e5c34d189f', htmlFor: this.inputId }, h("slot", { key: 'ff042aa89476fc7be75480fc91c0d7183c897d61', name: "label" }, this.label))), h("div", { key: '16fb554a86165d869c9807fed9a1743e91ea06c1', class: "input-wrapper" }, h("slot", { key: '6527ebde85fc47e7d372e28748c69bab20876e2b', name: "before-input" }), h("div", { key: '1f3a79c7f4071c6b28e961d0283bd2d95c698579', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'a7456a7eef8cb9bb314c5b502fced765c66b1ac1', name: "leading-input" }), h("input", { key: '8e1d243b578068c2a05cb2f041aa3b08e4dcf2f5', 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 }), h("slot", { key: '09f8e9e4947efbd1f860d3e84bf55fa4aabfe57a', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'e568ab2afbc8634baa4b1b86fcb54e624cb4f69f', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'd55e850ecd077269bc072732e84b98bfe2f888f2', name: "circle-check", class: "validation", size: "md" })), h("div", { key: 'd28da44ee36f534274369ec5b7db274bd6a3d2a4', class: "stepper" }, h("nv-iconbutton", { key: 'efafb0710346313e9cfaaba3b671031bdc9d3fe8', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), h("nv-iconbutton", { key: '20d7e4c1db26bab4d0edfc6e8a322db5def9ff98', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), h("slot", { key: '121da9bfad7ac46e4fe88d7cc0581d787f827b3a', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b42f0a5399cda2b5f048d90cc9016bbf1e77f55a', class: "description" }, h("slot", { key: '0349b6591850a2d21a6e1a740fb40a0ef35a7a5c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cff9902d3c6d1b70ffbc24b739151ddbdc9d4970', hidden: !this.error, class: "error-description" }, h("slot", { key: 'f461d3362d4b61b7431a8de73d723ba05f0ed16b', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return this; }
@@ -238,6 +238,6 @@ function defineCustomElement() {
 defineCustomElement();
 
 export { NvFieldnumber as N, defineCustomElement as d };
-//# sourceMappingURL=p--iYGZN4R.js.map
+//# sourceMappingURL=p-D6APFL6N.js.map
 
-//# sourceMappingURL=p--iYGZN4R.js.map
+//# sourceMappingURL=p-D6APFL6N.js.map

package/dist/components/p-D6APFL6N.js.map

@@ -0,0 +1 @@
+{"file":"p-D6APFL6N.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/nv-fieldnumber/nv-fieldnumber.scss?tag=nv-fieldnumber","src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"sourcesContent":["@use '../../styles/form-field' as forms;\n\nnv-fieldnumber {\n  @include forms.form-field-variables();\n  @include forms.form-field-root();\n\n  &[fluid]:not([fluid=\"false\"]) {\n    @include forms.form-field-fluid();\n  }\n\n  &[readonly]:not([readonly='false']) {\n    @include forms.form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include forms.form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include forms.form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label,\n  &[aria-required=\"true\"] label {\n    @include forms.form-field-label-required();\n  }\n\n  label {\n    @include forms.form-field-label();\n  }\n\n  .input-wrapper {\n    @include forms.form-field-input-wrapper();\n\n    .input-container {\n      @include forms.form-field-input-container();\n\n      container-type: inline-size;\n      container-name: field-number-input-container;\n      overflow: hidden;\n      position: relative;\n\n      input {\n        @include forms.form-field-input();\n\n        width: 100%;\n        appearance: textfield;\n\n        &::-webkit-inner-spin-button,\n        &::-webkit-outer-spin-button {\n          appearance: none;\n          margin: 0;\n        }\n      }\n\n      nv-icon.validation {\n        @include forms.form-field-icon();\n        margin-right: var(--form-field-gap);\n      }\n\n      > nv-iconbutton {\n        @include forms.form-field-action();\n      }\n\n      .stepper {\n        display: flex;\n        border-left: var(--notification-border-width-low-emphasis) solid var(--components-form-field-border-readonly);\n        > nv-iconbutton {\n          @include forms.form-field-action();\n          border-radius: 0px;\n        }\n      }\n\n      // container query to remove .stepper and and the spacer when the container is less than 150px\n      // .. this needs to be an absolute value because container queries do not accept variables\n      // .. using relative width (cqw) compared to a parent container would not work\n      // .. because the parent container follows the child's width\n      @container field-number-input-container (width < 150px) {\n        .stepper-spacer {\n          display: none;\n        }\n\n        .stepper {\n          display: none;\n        }\n      }\n    }\n  }\n\n  .description {\n    @include forms.form-field-description();\n  }\n\n  .error-description {\n    @include forms.form-field-error-description();\n  }\n}","import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   * @note This uses the native HTML `required` attribute, which triggers browser validation.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Marks the input field as required for accessibility purposes without triggering\n   * native HTML validation. Use this when implementing custom validation logic.\n   * @note When set, this uses `aria-required` instead of the native `required` attribute.\n   * This allows developers to implement custom validation while maintaining accessibility.\n   * @note If this prop is not explicitly set, the component will check for the HTML attribute\n   * 'aria-required' directly to determine if it should be applied.\n   */\n  @Prop({ reflect: true, attribute: 'aria-required' })\n  readonly ariaRequiredAttr: boolean = false;\n\n  /**\n   * Alters the input field's appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number | null;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  // eslint-disable-next-line nova/bind-event-naming, nova/event-inline-interfaces\n  @Event({ bubbles: false })\n  valueChanged: EventEmitter<number | null>; // eslint-disable-line nova/event-inline-interfaces\n\n  /**\n   * Tracks the last emitted value to avoid double firing for normalized nulls.\n   */\n  private lastEmittedValue?: number | null;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number | null | undefined) {\n    const normalized =\n      typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;\n\n    if (this.lastEmittedValue === normalized) {\n      return;\n    }\n\n    this.lastEmittedValue = normalized;\n    this.valueChanged.emit(normalized);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    if (input.value === '') {\n      this.value = null;\n      return;\n    }\n\n    const nextValue = input.valueAsNumber;\n\n    if (Number.isNaN(nextValue)) {\n      return;\n    }\n\n    this.value = nextValue;\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  // prevents text selection when clicking the buttons multiple times\n  private preventSelection = (event: Event) => {\n    event.preventDefault();\n  };\n\n  private isMinValueReached = (): boolean => {\n    return (\n      this.min !== undefined &&\n      typeof this.value === 'number' &&\n      this.value <= this.min\n    );\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return (\n      this.max !== undefined &&\n      typeof this.value === 'number' &&\n      this.value >= this.max\n    );\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    // Check aria-required from multiple sources:\n    // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n    // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n    // We use hasAttribute to determine if the attribute was explicitly set by the user,\n    // since the prop now defaults to false (to maintain Blazor compatibility)\n    const hasAriaRequiredAttr =\n      this.el.hasAttribute('aria-required') ||\n      this.el.hasAttribute('aria-required-attr');\n\n    const ariaRequiredFromAttr = hasAriaRequiredAttr\n      ? this.el.getAttribute('aria-required') ||\n        this.el.getAttribute('aria-required-attr')\n      : null;\n\n    // Use aria-required if the attribute was explicitly set\n    // With reflect: true, setting the prop will also set the attribute\n    const useAriaRequired = hasAriaRequiredAttr;\n\n    // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n    // If attribute doesn't exist, the prop was never set and we don't use aria-required\n    const ariaRequiredAttrValue = hasAriaRequiredAttr\n      ? ariaRequiredFromAttr\n      : null;\n\n    // Determine which attributes to use\n    // If aria-required HTML attribute is present, use it (convert string to boolean)\n    // If required is set and aria-required is not \"false\", use native required\n    // If aria-required is \"false\", don't use native required even if required is set\n    const ariaRequiredValue = useAriaRequired\n      ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''\n      : undefined;\n\n    const useNativeRequired =\n      this.required && (!useAriaRequired || ariaRequiredValue === true);\n\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              autofocus={this.autofocus}\n              required={useNativeRequired ? this.required : undefined}\n              {...(ariaRequiredValue !== undefined && {\n                'aria-required': String(ariaRequiredValue),\n              })}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={typeof this.value === 'number' ? this.value : undefined}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            <slot name=\"trailing-input\"></slot>\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n\n            <div class=\"stepper\">\n              <nv-iconbutton\n                size=\"md\"\n                name=\"minus\"\n                emphasis=\"lower\"\n                onClick={this.handleMinus}\n                disabled={this.isMinValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              ></nv-iconbutton>\n              <nv-iconbutton\n                size=\"md\"\n                name=\"plus\"\n                emphasis=\"lower\"\n                onClick={this.handlePlus}\n                disabled={this.isMaxValueReached()}\n                onMouseDown={this.preventSelection}\n                tabindex=\"-1\"\n              />\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"],"version":3}

package/dist/components/{p-DstpaOhw.js → p-DZJHk4fr.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './p-Dk8ekxr_.js';
+import { g as getDefaultExportFromCjs } from './p-B7VlEQVW.js';
 
 var inputmask$1 = {exports: {}};
 
@@ -3754,6 +3754,6 @@ var inputmaskExports = requireInputmask();
 var Inputmask = /*@__PURE__*/getDefaultExportFromCjs(inputmaskExports);
 
 export { Inputmask as I };
-//# sourceMappingURL=p-DstpaOhw.js.map
+//# sourceMappingURL=p-DZJHk4fr.js.map
 
-//# sourceMappingURL=p-DstpaOhw.js.map
+//# sourceMappingURL=p-DZJHk4fr.js.map