npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (792) hide show

package/dist/esm/nv-fieldnumber.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CasQushP.js';
 import { v as v4 } from './v4-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 = class {
     constructor(hostRef) {
@@ -165,11 +165,11 @@ const NvFieldnumber = class {
             ? 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 getElement(this); }

package/dist/esm/nv-fieldnumber.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldnumber.entry.js","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"],"names":["uuidv4"],"mappings":"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"}
1	+ {"version":3,"file":"nv-fieldnumber.entry.js","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"],"names":["uuidv4"],"mappings":"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"}

package/dist/esm/nv-fieldpassword.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CasQushP.js';
 import { v as v4 } from './v4-BdYh22OP.js';
-const nvFieldpasswordCss = "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-fieldpassword{--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-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after,nv-fieldpassword[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container{position:relative}nv-fieldpassword .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: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-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input{}nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .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 nvFieldpasswordCss = "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-fieldpassword{--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-fieldpassword[fluid]:not([fluid=false]){max-width:unset}nv-fieldpassword[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-fieldpassword[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-fieldpassword[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-fieldpassword[required]:not([required=false]) label::after,nv-fieldpassword[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldpassword 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-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within,nv-fieldpassword .input-wrapper .input-container:focus-within:hover,nv-fieldpassword .input-wrapper .input-container:focus,nv-fieldpassword .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-fieldpassword .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container{position:relative}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container input{}nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fieldpassword .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldpassword .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-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldpassword .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-fieldpassword .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 NvFieldpassword = class {
     constructor(hostRef) {
@@ -143,11 +143,11 @@ const NvFieldpassword = class {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '60a0ea5a2a308b07725e1f6cac4bf5b14884b612' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'dba2ed01ea7d589cac016366ac040eadf8be3273', htmlFor: this.inputId }, h("slot", { key: 'a4617929a60fad4c7d4b877b5f1df631feae564b', name: "label" }, this.label))), h("div", { key: 'ac06769432b47f3776c82f69ed9506c2fb372562', class: "input-wrapper" }, h("slot", { key: '634f17a5a855a1885a88a10ce93b2c59ce5445e4', name: "before-input" }), h("div", { key: '3ef0775ba8fd49de1378b35eccb369140423985f', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '371fd528098cccc6f49d528b1e63d72ee9c59857', name: "leading-input" }), h("input", Object.assign({ key: '59b23106ca2a72c970c081dc96c3d7fbb6df2936', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput })), (this.success || this.error) && (h("nv-icon", { key: 'c915ecb888e68ef49ce3a9d184c482080f486598', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: '7b12c5dfd426324cccfefb9397ba83fb7158ae16', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: 'd9d16cb4f4e4a2c680abdd47344b6684013b1397', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f97b09dd44a01907980b8851f8512c8c3ddf6b35', class: "description" }, h("slot", { key: 'cb56e7f526773fc7097a14b4d17b1f0320a5be07', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'b70de76a94325a0e781c34daa3e8c8633d739da6', hidden: !this.error, class: "error-description" }, h("slot", { key: '5673d14dec750e64e1a7536ec68139c49b5881ca', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '187f0ebbf10b6fc51015e35bf3906eebb4009877' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'bf48decdda3cb09bdc3bb66777d9681ca7fe000d', htmlFor: this.inputId }, h("slot", { key: '115f1c66b1b6daa01e5677f83129044244b79a02', name: "label" }, this.label))), h("div", { key: 'bb1f612364948b42c1e46c0e068f0fae46200ba8', class: "input-wrapper" }, h("slot", { key: '2d7a1398a3a72bf4d30fee5b15f0d4f82671f1de', name: "before-input" }), h("div", { key: '900aab152e49d7071c3c886decc7d18d2d04f6ca', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '0ff288dbda29b8b9b19a535f5ef0d9b96e7a7c3a', name: "leading-input" }), h("input", { key: 'ef08440e8ac74bbe6d7af446317d1a1baa632770', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (h("nv-icon", { key: '3f17aa2d7e3f2a05663b952ea104adbc193100bd', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: 'f2c5ba947f6284877a4a67b82fac2e66ef722ab2', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: '1c12ce6f14e1dd8dbc5cc22620688d92c275ba15', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0432c059f5a3c9eacdcde93177a398f4b27b8a88', class: "description" }, h("slot", { key: '4a5b18c7a1df0e8d7e6435ebf731a3025ccd5861', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ba4986e81220fa41481dc699a52d05ad0b22adc4', hidden: !this.error, class: "error-description" }, h("slot", { key: 'af1b29bb3575f3985f788769a97d5ae38ab26fd9', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-fieldpassword.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldpassword.entry.js","sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@use '../../styles/form-field' as forms;\n\nnv-fieldpassword {\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 position: relative;\n\n input {\n @include forms.form-field-input();\n }\n > nv-iconbutton {\n @include forms.form-field-action();\n }\n\n nv-icon.validation {\n @include forms.form-field-icon();\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}\n","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n State,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/*\n @slot leading-input - Content to be placed before 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-fieldpassword',\n styleUrl: 'nv-fieldpassword.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldpassword {\n @Element() el: HTMLNvFieldpasswordElement;\n private inputElement!: HTMLInputElement;\n\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 // eslint-disable-next-line @stencil-community/strict-mutable\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 Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: 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 })\n readonly error: boolean = false;\n\n /\n A description that appears when there is an error related to the password\n * field.\n * @validator message\n /\n @Prop({ reflect: true })\n readonly 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 Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n /\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /\n Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n /\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /\n Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input on form submission.\n * the rules are applied to the input value via regexes.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n Defines the type of the input.\n * @default 'text'\n /\n @Prop({ reflect: true })\n readonly mode: 'text' \| 'number' = 'text';\n\n /\n The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n /\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n /\n Hide the button to show/hide the password.\n /\n @Prop({ reflect: true })\n readonly hidePasswordIcon: boolean = false;\n\n /\n Show/hide the password programmatically.\n /\n @Prop({ reflect: true })\n readonly showPassword: boolean = false;\n\n /\n Defines whether the password is visible or not.\n /\n @State()\n showPasswordState: boolean;\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 @Event({ bubbles: false })\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n @Watch('showPassword')\n handleShowPasswordChange(newValue: boolean) {\n this.showPasswordState = newValue;\n }\n\n private togglePasswordVisibility = () => {\n this.showPasswordState = !this.showPasswordState;\n };\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value; // Update the input value without worrying about the space\n this.valueChanged.emit(input.value);\n };\n\n //#endregion METHODS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.showPasswordState = this.showPassword;\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n // Check aria-required from multiple sources:\n // 1. JavaScript prop (most reliable)\n // 2. HTML attribute 'aria-required' (direct HTML)\n // 3. HTML attribute 'aria-required-attr' (from JSX kebab-case conversion)\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 autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n type={this.showPasswordState ? 'text' : 'password'}\n inputMode={this.mode}\n value={this.value}\n required={useNativeRequired ? this.required : undefined}\n {...(ariaRequiredValue !== undefined && {\n 'aria-required': String(ariaRequiredValue),\n })}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n {(this.success \|\| this.error) && (\n <nv-icon\n name={this.success ? 'circle-check' : 'alert-circle'}\n class=\"validation\"\n size=\"md\"\n />\n )}\n\n {!this.hidePasswordIcon && (\n <nv-iconbutton\n name={this.showPasswordState ? 'eye' : 'eye-off'}\n size=\"md\"\n emphasis=\"lower\"\n onClick={this.togglePasswordVisibility}\n aria-label={\n this.showPasswordState ? 'Hide password' : 'Show password'\n }\n aria-pressed={this.showPasswordState.toString()}\n />\n )}\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"],"names":["uuidv4"],"mappings":"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"}
1	+ {"version":3,"file":"nv-fieldpassword.entry.js","sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@use '../../styles/form-field' as forms;\n\nnv-fieldpassword {\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 position: relative;\n\n input {\n @include forms.form-field-input();\n }\n > nv-iconbutton {\n @include forms.form-field-action();\n }\n\n nv-icon.validation {\n @include forms.form-field-icon();\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}\n","import {\n Component,\n Prop,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n State,\n Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/*\n @slot leading-input - Content to be placed before 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-fieldpassword',\n styleUrl: 'nv-fieldpassword.scss',\n shadow: false,\n formAssociated: true,\n})\nexport class NvFieldpassword {\n @Element() el: HTMLNvFieldpasswordElement;\n private inputElement!: HTMLInputElement;\n\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 // eslint-disable-next-line @stencil-community/strict-mutable\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 Specifies the value of the input field, which determines the text displayed\n * within the field. This prop is typically used in controlled components\n * where the input’s value is managed by the component’s state.\n /\n @Prop({ reflect: true, mutable: true })\n value: 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 })\n readonly error: boolean = false;\n\n /\n A description that appears when there is an error related to the password\n * field.\n * @validator message\n /\n @Prop({ reflect: true })\n readonly 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 Limits how many characters users can type into the input field. It’s\n * helpful for making sure users don’t enter too much information, keeping\n * their input within the allowed limit.\n /\n @Prop({ reflect: true })\n readonly maxlength: number;\n\n /\n Ensures that users type at least a certain number of characters into the\n * input field. It’s a way to make sure users provide enough information\n * before moving on.\n /\n @Prop({ reflect: true })\n readonly minlength: number;\n\n /\n Set rules for how the input should be formatted. For example, you can\n * require that a phone number includes only digits or that an email address\n * has the correct format. If users don’t follow these rules, they’ll get a\n * prompt to correct their input on form submission.\n * the rules are applied to the input value via regexes.\n /\n @Prop({ reflect: true })\n readonly pattern: string;\n\n /\n Defines the type of the input.\n * @default 'text'\n /\n @Prop({ reflect: true })\n readonly mode: 'text' \| 'number' = 'text';\n\n /\n The autocomplete prop helps users fill out the input field faster by\n * suggesting entries they’ve used before, like their email or address.\n * You can turn it on to make forms more convenient or off to ensure users\n * always type in fresh data.\n /\n @Prop({ reflect: true })\n readonly autocomplete: `${TextInputAutocomplete}` = 'off';\n\n /\n Hide the button to show/hide the password.\n /\n @Prop({ reflect: true })\n readonly hidePasswordIcon: boolean = false;\n\n /\n Show/hide the password programmatically.\n /\n @Prop({ reflect: true })\n readonly showPassword: boolean = false;\n\n /\n Defines whether the password is visible or not.\n /\n @State()\n showPasswordState: boolean;\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 @Event({ bubbles: false })\n valueChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region METHODS\n\n private handleInputContainerClick = () => {\n this.inputElement.focus();\n };\n\n @Watch('showPassword')\n handleShowPasswordChange(newValue: boolean) {\n this.showPasswordState = newValue;\n }\n\n private togglePasswordVisibility = () => {\n this.showPasswordState = !this.showPasswordState;\n };\n\n private handleInput = (event: Event) => {\n const input = event.target as HTMLInputElement;\n this.value = input.value; // Update the input value without worrying about the space\n this.valueChanged.emit(input.value);\n };\n\n //#endregion METHODS\n /************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.showPasswordState = this.showPassword;\n }\n\n //#endregion LIFECYCLE\n /**************************************************************************/\n //#region RENDER\n\n render() {\n // Check aria-required from multiple sources:\n // 1. JavaScript prop (most reliable)\n // 2. HTML attribute 'aria-required' (direct HTML)\n // 3. HTML attribute 'aria-required-attr' (from JSX kebab-case conversion)\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 autofocus={this.autofocus}\n autocomplete={this.autocomplete}\n placeholder={this.placeholder}\n name={this.name}\n type={this.showPasswordState ? 'text' : 'password'}\n inputMode={this.mode}\n value={this.value}\n required={useNativeRequired ? this.required : undefined}\n {...(ariaRequiredValue !== undefined && {\n 'aria-required': String(ariaRequiredValue),\n })}\n maxlength={this.maxlength}\n minlength={this.minlength}\n pattern={this.pattern}\n disabled={this.disabled}\n readOnly={this.readonly}\n onInput={this.handleInput}\n />\n\n {(this.success \|\| this.error) && (\n <nv-icon\n name={this.success ? 'circle-check' : 'alert-circle'}\n class=\"validation\"\n size=\"md\"\n />\n )}\n\n {!this.hidePasswordIcon && (\n <nv-iconbutton\n name={this.showPasswordState ? 'eye' : 'eye-off'}\n size=\"md\"\n emphasis=\"lower\"\n onClick={this.togglePasswordVisibility}\n aria-label={\n this.showPasswordState ? 'Hide password' : 'Show password'\n }\n aria-pressed={this.showPasswordState.toString()}\n />\n )}\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"],"names":["uuidv4"],"mappings":"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"}

package/dist/esm/nv-fieldradio.entry.js CHANGED Viewed

@@ -70,7 +70,7 @@ const NvFieldradio = class {
      */
     handleChange(event) {
         const target = event.target;
-        if ((target === null || target === void 0 ? void 0 : target.type) === 'radio') {
+        if (target?.type === 'radio') {
             Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(element => {
                 if (element.name === this.name) {
                     element.checked = false;
@@ -83,9 +83,9 @@ const NvFieldradio = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'c41b30e8ef1cb1571f5b5343803121556967c616', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '32c7fbd51351df01cd3ccddea785d53604a78c04', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: 'bf576a4ce2be056bcc862c13da85e5af91fd5cb1', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '041dd4f586598b79ddf460f97895a753eff1aaa8', htmlFor: this.inputId }, h("slot", { key: '6c0881f1da0accd31b4c011ff3351d7f8e185c8f', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'b7b0c84a81c55340dddd0645199122c1789c0053', class: "description" }, h("slot", { key: '5ba50f1eaef357ee7c581a791ccd69e7ee4fcd67', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'ac8093ddba1e8bbd78f3791c30876b00d56d98c7', hidden: !this.error, class: "error-description" }, h("slot", { key: '93324ca047fb2a205ec71e35a7bc0fd9e92d81f5', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: '3fceb787d8e778b5724361f0a240a63375117941', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: 'a61213ca3fb3251cd02a3716859a0182a07428d7', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '4faca6c7d131897671d307053e28ade9e5f398f8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ab93b19fa1fd36d6d0fdae08ac4f935c82d0f355', htmlFor: this.inputId }, h("slot", { key: 'f914379ab7738b7ce2856be0738796da23c130c6', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fc0d08ba7178252f8ba0c8f958a080f44b8e8a19', class: "description" }, h("slot", { key: '2d7936a1322ea9798998900fa92cfac1f574685c', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '39e27f0156df7ec64324012dc815cba251992d6f', hidden: !this.error, class: "error-description" }, h("slot", { key: '1d408d03c05c3eeba238aea59c5e6393c3befd82', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-fieldradio.entry.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-fieldradio.entry.js","sources":["src/components/nv-fieldradio/styles/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@use './mixins' as ;\n\nnv-fieldradio {\n @include fieldradio-variables();\n @include root-styles();\n\n &.error {\n @include fieldradio-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n\n label {\n @include label-styles();\n }\n\n input[type=\"radio\"] {\n @include input-styles();\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/\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-fieldradio',\n shadow: false,\n styleUrl: 'styles/nv-fieldradio.scss',\n formAssociated: true,\n})\nexport class NvFieldradio {\n @Element() el: HTMLNvFieldradioElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Adds a helpful hint message below the label\n * @deprecated use description instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Set the label placement to before the input\n * @deprecated use labelPlacement instead.\n /\n @Prop({ reflect: true })\n readonly labelBefore: boolean = false;\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Use this to assign a group name to your radio buttons. When you have\n * multiple radio buttons with the same name, users will be able to select\n * only one option within that group, making your forms more organized and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Defines what data will be sent when the radio button is selected.\n * This helps you identify which option the user has chosen in your form,\n * ensuring accurate data collection. When the form is submitted, the data\n * will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value: string;\n\n /\n Sets the text content that is rendered next to the input element of type\n * radio. This label is essential for accessibility and user clarity, as it\n * describes the purpose or option of the radio button.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Defines the position of the label relative to the radio button.\n /\n @Prop({ mutable: true, reflect: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Adds a helpful hint message below the label. This description provides\n * extra information or context about the radio button option, assisting users\n * in making more informed choices.\n /\n @Prop({ mutable: true, reflect: true })\n description: string;\n\n /\n Highlight the radio button with error styling. It helps users quickly\n * identify which option needs attention, improving their form-filling\n * experience by making issues more visible.\n * @validator error\n /\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /\n A description that appears when there is an error related to the radio\n * button.\n * @validator message\n /\n @Prop({ reflect: true })\n readonly errorDescription: string;\n\n /\n Controls whether the radio button is selected.\n /\n @Prop({ mutable: true, reflect: true })\n checked: boolean = false;\n\n /\n Disables the radio button, making it un-selectable.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\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 //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event({ bubbles: false })\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n handleCheckedChange(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /\n Listens for the change event on the radio button input element and controls\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target?.type === 'radio') {\n Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n element => {\n if (element.name === this.name) {\n element.checked = false;\n }\n },\n );\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <input\n type=\"radio\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n />\n\n <div class=\"text-container\">\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 {(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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"names":["uuidv4"],"mappings":"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"}
1	+ {"version":3,"file":"nv-fieldradio.entry.js","sources":["src/components/nv-fieldradio/styles/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@use './mixins' as ;\n\nnv-fieldradio {\n @include fieldradio-variables();\n @include root-styles();\n\n &.error {\n @include fieldradio-error-variables();\n }\n\n &.label-placement-before {\n @include label-before-styles();\n }\n\n &[disabled] {\n // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n opacity: 0.5;\n }\n\n label {\n @include label-styles();\n }\n\n input[type=\"radio\"] {\n @include input-styles();\n }\n\n .description {\n @include description-styles();\n }\n\n .error-description {\n @include error-description-styles();\n }\n\n .text-container {\n @include text-container-styles();\n }\n}\n","import {\n Component,\n Host,\n h,\n Prop,\n Event,\n EventEmitter,\n Listen,\n Watch,\n Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/\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-fieldradio',\n shadow: false,\n styleUrl: 'styles/nv-fieldradio.scss',\n formAssociated: true,\n})\nexport class NvFieldradio {\n @Element() el: HTMLNvFieldradioElement;\n\n /*************************************************************************/\n //#region DEPRECATED\n\n /\n * Adds a helpful hint message below the label\n * @deprecated use description instead.\n /\n @Prop({ reflect: true })\n readonly message: string;\n\n /\n Set the label placement to before the input\n * @deprecated use labelPlacement instead.\n /\n @Prop({ reflect: true })\n readonly labelBefore: boolean = false;\n\n componentWillRender() {\n if (this.message) {\n this.description = this.message;\n }\n\n if (this.labelBefore) {\n this.labelPlacement = 'before';\n }\n }\n\n //#endregion DEPRECATED\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Sets the ID for the radio button’s input element and the for attribute of\n * the associated label. If no ID is provided, a random one will be\n * automatically generated to ensure unique identification, facilitating\n * proper label association and accessibility.\n /\n @Prop({ reflect: true })\n readonly inputId: string = uuidv4();\n\n /\n Use this to assign a group name to your radio buttons. When you have\n * multiple radio buttons with the same name, users will be able to select\n * only one option within that group, making your forms more organized and\n * user-friendly.\n /\n @Prop({ reflect: true })\n readonly name: string;\n\n /\n Defines what data will be sent when the radio button is selected.\n * This helps you identify which option the user has chosen in your form,\n * ensuring accurate data collection. When the form is submitted, the data\n * will consist of a name=value pair.\n /\n @Prop({ reflect: true })\n readonly value: string;\n\n /\n Sets the text content that is rendered next to the input element of type\n * radio. This label is essential for accessibility and user clarity, as it\n * describes the purpose or option of the radio button.\n /\n @Prop({ reflect: true })\n readonly label: string;\n\n /\n Defines the position of the label relative to the radio button.\n /\n @Prop({ mutable: true, reflect: true })\n labelPlacement: `${LabelPlacement}`;\n\n /\n Adds a helpful hint message below the label. This description provides\n * extra information or context about the radio button option, assisting users\n * in making more informed choices.\n /\n @Prop({ mutable: true, reflect: true })\n description: string;\n\n /\n Highlight the radio button with error styling. It helps users quickly\n * identify which option needs attention, improving their form-filling\n * experience by making issues more visible.\n * @validator error\n /\n @Prop({ reflect: true })\n readonly error: boolean = false;\n\n /\n A description that appears when there is an error related to the radio\n * button.\n * @validator message\n /\n @Prop({ reflect: true })\n readonly errorDescription: string;\n\n /\n Controls whether the radio button is selected.\n /\n @Prop({ mutable: true, reflect: true })\n checked: boolean = false;\n\n /\n Disables the radio button, making it un-selectable.\n /\n @Prop({ reflect: true })\n readonly disabled: boolean = false;\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 //#endregion PROPERTIES\n /*************************************************************************/\n //#region EVENTS\n\n /\n * Emits when the checked state changes.\n * @bind checked\n /\n @Event({ bubbles: false })\n checkedChanged: EventEmitter<boolean>;\n\n //#endregion EVENTS\n /*************************************************************************/\n //#region WATCHERS\n\n /\n * Watches for changes to the checked state and emits the new value.\n * @param {boolean} checked - The new value of the checked state.\n /\n @Watch('checked')\n handleCheckedChange(checked: boolean) {\n this.checkedChanged.emit(checked);\n }\n\n /\n Listens for the change event on the radio button input element and controls\n * the checked state of the host elements.\n * @param {Event} event - The change event.\n /\n @Listen('change')\n handleChange(event: Event) {\n const target = event.target as HTMLInputElement;\n\n if (target?.type === 'radio') {\n Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n element => {\n if (element.name === this.name) {\n element.checked = false;\n }\n },\n );\n\n this.checked = target.checked;\n }\n }\n\n //#endregion WATCHERS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n class={clsx(\n this.labelPlacement === 'before' && 'label-placement-before',\n this.error && 'error',\n )}\n >\n <input\n type=\"radio\"\n id={this.inputId}\n name={this.name}\n autofocus={this.autofocus}\n autocomplete=\"off\"\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n />\n\n <div class=\"text-container\">\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 {(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 </div>\n </Host>\n );\n }\n\n //#endregion RENDER\n}\n"],"names":["uuidv4"],"mappings":"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"}

package/dist/esm/nv-fieldselect.entry.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-CasQushP.js';
 import { v as v4 } from './v4-BdYh22OP.js';
-const nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after,nv-fieldselect[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box;background-color:var(--color-level-05-background);border-radius:var(--form-field-radius)}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldselect .select-wrapper .select-container input{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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input{}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height, 24px);background-color:var(--color-level-05-background);color:var(--components-form-field-content-text)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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 nvFieldselectCss = "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-fieldselect{--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-fieldselect[fluid]:not([fluid=false]){max-width:unset}nv-fieldselect[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-fieldselect[display-value]:not([display-value=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-fieldselect[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-fieldselect[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-fieldselect[required]:not([required=false]) label::after,nv-fieldselect[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>.select-icons{top:var(--form-field-padding-y);right:var(--form-field-padding-x)}nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper>.select-container>select{height:100%;box-sizing:border-box;background-color:var(--color-level-05-background);border-radius:var(--form-field-radius)}nv-fieldselect 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-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{position:relative;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);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container>.select-icons{position:absolute;right:0;top:0;pointer-events:none}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton{border:0px;border-radius:0px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fieldselect .select-wrapper .select-container>.select-icons>nv-iconbutton:last-of-type{border-top-right-radius:var(--form-field-radius);border-bottom-right-radius:var(--form-field-radius)}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-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-fieldselect .select-wrapper .select-container input{}nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear,nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);height:var(--form-field-line-height);padding:var(--form-field-padding-y) var(--form-field-padding-x);box-sizing:content-box;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::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-fieldselect .select-wrapper .select-container select option{font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height, 24px);background-color:var(--color-level-05-background);color:var(--components-form-field-content-text)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .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-fieldselect .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 NvFieldselect = class {
     constructor(hostRef) {
@@ -368,15 +368,15 @@ const NvFieldselect = class {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '19dc919c517b20e9271019c3c035a5d3965ac500' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd490a55c4c2bbea30ea5474906e16ac1e0ebf09d', htmlFor: this.inputId }, h("slot", { key: 'eaa51f927cc6c16899f806832afe5807948e5aed', name: "label" }, this.label))), h("div", { key: '04ee5ad2797e3f315c21359b09a9350c9c69789b', class: "select-wrapper" }, h("slot", { key: '7b63bc1fdf20a286635c36f7a1d865365284dd68', name: "before-input" }), h("div", { key: 'a98eb2c006fe321bc6f2e28d18afe24641cd4227', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '2946fafe902e662c5fa37c8a238cd98a04b9e2f5', name: "leading-input" }), this.internalReadonly && (h("input", { key: '7512f2cca62e6f4e86bd32b370730e5b630bd8c1', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (h(Host, { key: '40714f4af41b7d652d1a468e56849fe1debe8d60' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3cbb3c5d86df0272ae035e4d55137b2abceed7df', htmlFor: this.inputId }, h("slot", { key: '91c991cc47389ff46346df6616733e205a5cbea7', name: "label" }, this.label))), h("div", { key: '42dfb725f9ff9caf8c00f4b1189f22d229269156', class: "select-wrapper" }, h("slot", { key: 'bbe11ade568532183c52ec56c9d2b8ab667e9d5c', name: "before-input" }), h("div", { key: '8cfe703cd711c2f4831655d616345f06a6f358b0', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '1c4194d8e9d98467e7c37400cf0434993e8ea91e', name: "leading-input" }), this.internalReadonly && (h("input", { key: '2c2caf1d45e6d68a644539ded3c7add991abf300', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), h("select", Object.assign({ key: '6f6c473e866a81ff53baa1c647d3563033d8d71e', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), h("select", { key: '744913ecd27a2d33996b13f685679467fc837c30', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }), this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '11ace2d1d554e07071441a92b751f9f1e40c41b9', class: "select-icons" }, this.error && (h("nv-icon", { key: '5fe0c48e595e4e51fd88a1cf3b593349eb8b6880', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '992b8433aa0430828910e9b0d7a5b5bb9cbdde02', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'a1c89dc4437e96680a6d1ddf4db85b478ad52b28', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: 'fe76b1d3caa6addb556d6743626c6bc160d77d53', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '50bd8a56780a1b722d38279bb9f51860bf36e8b6', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '3bfc2999c532ec0c8e192a5e442a0294e70cfc8d', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5e807d931efdd9d3a69c90dee42497234f7c2cda', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '48db0766450942d8d8ce4cdfa3f80a46d7c18a77', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '891676c5a9d755b49fd375fba8f193c990d41cfa', class: "select-icons" }, this.error && (h("nv-icon", { key: '2d4528dba1eccbc1acc39d2bfb54a13d03913b9b', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '035768470154e3e529921741802ae74f1b56b29c', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: '23a1006cc1f1dfa9862af41e64d5d57539bff127', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '5f899c5426e304c1d83b046317eaf732d919cb55', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0f78de9aa808a625dc6a8f0148a43450992b787e', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '72d96f2909d0b793dcd24fe939b58ebc5e9c7de1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c10fdcc3592d36fea37f283835abcf8790a99010', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'c8783f8f94d1c9f082e60e38b061dae49e5b5584', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }