@nova-design-system/nova-react 3.21.1-beta.0 → 3.23.0

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

@@ -0,0 +1,187 @@
+'use strict';
+
+var index = require('./index-CtjeeUI-.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+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 NvFieldnumber = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4BdYh22OP.v4();
+        /**
+         * The disabled prop lets you turn off the input field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to#
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the input field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
+         */
+        this.required = false;
+        /**
+         * Marks the input field as required for accessibility purposes without triggering
+         * native HTML validation. Use this when implementing custom validation logic.
+         * @note When set, this uses `aria-required` instead of the native `required` attribute.
+         * This allows developers to implement custom validation while maintaining accessibility.
+         * @note If this prop is not explicitly set, the component will check for the HTML attribute
+         * 'aria-required' directly to determine if it should be applied.
+         */
+        this.ariaRequiredAttr = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * Define the increment value for the input field. It determines how much the
+         * value will increase or decrease when the user clicks the stepper buttons.
+         */
+        this.step = 1;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleInput = (event) => {
+            const input = event.target;
+            if (input.value === '') {
+                this.value = null;
+                return;
+            }
+            const nextValue = input.valueAsNumber;
+            if (Number.isNaN(nextValue)) {
+                return;
+            }
+            this.value = nextValue;
+        };
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.handlePlus = () => {
+            this.inputElement.stepUp();
+            this.value = Number(this.inputElement.value);
+        };
+        this.handleMinus = () => {
+            this.inputElement.stepDown();
+            this.value = Number(this.inputElement.value);
+        };
+        // prevents text selection when clicking the buttons multiple times
+        this.preventSelection = (event) => {
+            event.preventDefault();
+        };
+        this.isMinValueReached = () => {
+            return (this.min !== undefined &&
+                typeof this.value === 'number' &&
+                this.value <= this.min);
+        };
+        this.isMaxValueReached = () => {
+            return (this.max !== undefined &&
+                typeof this.value === 'number' &&
+                this.value >= this.max);
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    watchValueHandler(newValue) {
+        const normalized = typeof newValue === 'number' && !Number.isNaN(newValue) ? newValue : null;
+        if (this.lastEmittedValue === normalized) {
+            return;
+        }
+        this.lastEmittedValue = normalized;
+        this.valueChanged.emit(normalized);
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        // Check aria-required from multiple sources:
+        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
+        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
+        // We use hasAttribute to determine if the attribute was explicitly set by the user,
+        // since the prop now defaults to false (to maintain Blazor compatibility)
+        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
+            this.el.hasAttribute('aria-required-attr');
+        const ariaRequiredFromAttr = hasAriaRequiredAttr
+            ? this.el.getAttribute('aria-required') ||
+                this.el.getAttribute('aria-required-attr')
+            : null;
+        // Use aria-required if the attribute was explicitly set
+        // With reflect: true, setting the prop will also set the attribute
+        const useAriaRequired = hasAriaRequiredAttr;
+        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
+        // If attribute doesn't exist, the prop was never set and we don't use aria-required
+        const ariaRequiredAttrValue = hasAriaRequiredAttr
+            ? ariaRequiredFromAttr
+            : null;
+        // Determine which attributes to use
+        // If aria-required HTML attribute is present, use it (convert string to boolean)
+        // If required is set and aria-required is not "false", use native required
+        // If aria-required is "false", don't use native required even if required is set
+        const ariaRequiredValue = useAriaRequired
+            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
+            : undefined;
+        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
+        return (index.h(index.Host, { key: '833d2fcd7ce9e5830e23af4cbec9c88f90b9f713' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '2d82bda22e559e3be9efb605575d8a765e22f387', htmlFor: this.inputId }, index.h("slot", { key: '68b48a69abc483f46d6c5e185e45929225835892', name: "label" }, this.label))), index.h("div", { key: '7d5b44f27b15c0601f6939c37cd19ac7c4a76a09', class: "input-wrapper" }, index.h("slot", { key: '7e63527ab0971cbd3f8477859a2ffeb81e7f2faf', name: "before-input" }), index.h("div", { key: 'edcb992ec9e2f444394bbde848ca0f0a796e416b', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '0a5e5989ed32ea9a902c48747ab0a149802be5f2', name: "leading-input" }), index.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 })), index.h("slot", { key: 'b43af40093151a83ed9ecfe8c01d3c7af45a36fb', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '2ae24ccce0dfbff99699df2c0a3c281461892d19', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '8eecbdf7d7186a85baafba08fe30b60c891b30c4', name: "circle-check", class: "validation", size: "md" })), index.h("div", { key: 'a13aab8d9ee7c7725e26d72fd8a63db5ccf6a18c', class: "stepper" }, index.h("nv-iconbutton", { key: 'd261e26c85949fa00a9b74320414b632ec561050', size: "md", name: "minus", emphasis: "lower", onClick: this.handleMinus, disabled: this.isMinValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }), index.h("nv-iconbutton", { key: '906849c512788f68f269fd73fc79399a45b394f0', size: "md", name: "plus", emphasis: "lower", onClick: this.handlePlus, disabled: this.isMaxValueReached(), onMouseDown: this.preventSelection, tabindex: "-1" }))), index.h("slot", { key: '718cc5b63756c8f6dfa188287c6ba9530ad7c26e', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '213a9c560a4775f92e1b8e63e81ee5b14212e8b5', class: "description" }, index.h("slot", { key: '22855ff95f5d692ea2182c50ddedb946f324ba0d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'eb0ecdd74dce469c17af4d0a65fcdcad1ebac0f9', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '00703e149d25d51a7daf8bb2fe764cf68672f96c', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "value": ["watchValueHandler"]
+    }; }
+};
+NvFieldnumber.style = nvFieldnumberCss;
+
+exports.nv_fieldnumber = NvFieldnumber;

package/dist/cjs/nv-fieldpassword.entry-BfVJNT0A.js

@@ -0,0 +1,165 @@
+'use strict';
+
+var index = require('./index-CtjeeUI-.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+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 NvFieldpassword = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4BdYh22OP.v4();
+        /**
+         * The disabled prop lets you turn off the input field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to#
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the input field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
+         */
+        this.required = false;
+        /**
+         * Marks the input field as required for accessibility purposes without triggering
+         * native HTML validation. Use this when implementing custom validation logic.
+         * @note When set, this uses `aria-required` instead of the native `required` attribute.
+         * This allows developers to implement custom validation while maintaining accessibility.
+         * @note If this prop is not explicitly set, the component will check for the HTML attribute
+         * 'aria-required' directly to determine if it should be applied.
+         */
+        this.ariaRequiredAttr = false;
+        /**
+         * Alters the input field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * Defines the type of the input.
+         * @default 'text'
+         */
+        this.mode = 'text';
+        /**
+         * The autocomplete prop helps users fill out the input field faster by
+         * suggesting entries they’ve used before, like their email or address.
+         * You can turn it on to make forms more convenient or off to ensure users
+         * always type in fresh data.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Hide the button to show/hide the password.
+         */
+        this.hidePasswordIcon = false;
+        /**
+         * Show/hide the password programmatically.
+         */
+        this.showPassword = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+        this.togglePasswordVisibility = () => {
+            this.showPasswordState = !this.showPasswordState;
+        };
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = input.value; // Update the input value without worrying about the space
+            this.valueChanged.emit(input.value);
+        };
+    }
+    handleShowPasswordChange(newValue) {
+        this.showPasswordState = newValue;
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillLoad() {
+        this.showPasswordState = this.showPassword;
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        // Check aria-required from multiple sources:
+        // 1. JavaScript prop (most reliable)
+        // 2. HTML attribute 'aria-required' (direct HTML)
+        // 3. HTML attribute 'aria-required-attr' (from JSX kebab-case conversion)
+        // Check aria-required from multiple sources:
+        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
+        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
+        // We use hasAttribute to determine if the attribute was explicitly set by the user,
+        // since the prop now defaults to false (to maintain Blazor compatibility)
+        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
+            this.el.hasAttribute('aria-required-attr');
+        const ariaRequiredFromAttr = hasAriaRequiredAttr
+            ? this.el.getAttribute('aria-required') ||
+                this.el.getAttribute('aria-required-attr')
+            : null;
+        // Use aria-required if the attribute was explicitly set
+        // With reflect: true, setting the prop will also set the attribute
+        const useAriaRequired = hasAriaRequiredAttr;
+        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
+        // If attribute doesn't exist, the prop was never set and we don't use aria-required
+        const ariaRequiredAttrValue = hasAriaRequiredAttr
+            ? ariaRequiredFromAttr
+            : null;
+        // Determine which attributes to use
+        // If aria-required HTML attribute is present, use it (convert string to boolean)
+        // If required is set and aria-required is not "false", use native required
+        // If aria-required is "false", don't use native required even if required is set
+        const ariaRequiredValue = useAriaRequired
+            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
+            : undefined;
+        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
+        return (index.h(index.Host, { key: '60a0ea5a2a308b07725e1f6cac4bf5b14884b612' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'dba2ed01ea7d589cac016366ac040eadf8be3273', htmlFor: this.inputId }, index.h("slot", { key: 'a4617929a60fad4c7d4b877b5f1df631feae564b', name: "label" }, this.label))), index.h("div", { key: 'ac06769432b47f3776c82f69ed9506c2fb372562', class: "input-wrapper" }, index.h("slot", { key: '634f17a5a855a1885a88a10ce93b2c59ce5445e4', name: "before-input" }), index.h("div", { key: '3ef0775ba8fd49de1378b35eccb369140423985f', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '371fd528098cccc6f49d528b1e63d72ee9c59857', name: "leading-input" }), index.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) && (index.h("nv-icon", { key: 'c915ecb888e68ef49ce3a9d184c482080f486598', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (index.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() }))), index.h("slot", { key: 'd9d16cb4f4e4a2c680abdd47344b6684013b1397', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'f97b09dd44a01907980b8851f8512c8c3ddf6b35', class: "description" }, index.h("slot", { key: 'cb56e7f526773fc7097a14b4d17b1f0320a5be07', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'b70de76a94325a0e781c34daa3e8c8633d739da6', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '5673d14dec750e64e1a7536ec68139c49b5881ca', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "showPassword": ["handleShowPasswordChange"]
+    }; }
+};
+NvFieldpassword.style = nvFieldpasswordCss;
+
+exports.nv_fieldpassword = NvFieldpassword;

package/dist/cjs/{nv-fieldradio.entry-2hb1Ur40.js → nv-fieldradio.entry-CG22oETM.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-CtjeeUI-.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvFieldradioCss = "nv-fieldradio{--nv-fieldradio-border-default:var(--components-form-field-border-default);--nv-fieldradio-border-hover:var(--components-form-field-border-hover);--nv-fieldradio-border-focus:var(--components-form-field-border-default);--nv-fieldradio-background-default:var(--components-form-field-background-default);--nv-fieldradio-background-checked:var(--components-form-field-background-checked);--nv-fieldradio-background-disabled:var(--components-form-field-background-disabled);--nv-fieldradio-focus-box-shadow:var(--color-focus-brand);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-shape-foreground-disabled);--nv-fieldradio-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x)}nv-fieldradio:not([disabled]) input,nv-fieldradio:not([disabled]) label,nv-fieldradio[disabled=false] input,nv-fieldradio[disabled=false] label{cursor:pointer}nv-fieldradio.error{--nv-fieldradio-border-default:var(--components-form-field-border-error);--nv-fieldradio-border-hover:var(--nv-fieldradio-border-default);--nv-fieldradio-border-focus:var(--components-form-field-border-error);--nv-fieldradio-background-checked:var(--components-form-field-background-error);--nv-fieldradio-focus-box-shadow:var(--color-focus-destructive);--nv-fieldradio-dot-color-checked:var(--components-form-shape-foreground-default);--nv-fieldradio-dot-color-disabled:var(--components-form-field-border-error);--nv-fieldradio-outline-color:var(--color-focus-destructive)}nv-fieldradio.label-placement-before{flex-direction:row-reverse}nv-fieldradio[disabled]{opacity:0.5}nv-fieldradio label{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(--form-label-font-weight);line-height:var(--form-label-line-height)}nv-fieldradio input[type=radio]{appearance:none;position:relative;display:flex;width:var(--form-radio-size);height:var(--form-radio-size);padding:var(--form-radio-inner-circle-padding);flex-direction:column;align-items:flex-start;border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-default)}nv-fieldradio input[type=radio]:hover{border-color:var(--nv-fieldradio-border-hover)}nv-fieldradio input[type=radio]:focus{border-color:var(--nv-fieldradio-border-focus)}nv-fieldradio input[type=radio]:focus,nv-fieldradio input[type=radio]:focus-within{outline:none}nv-fieldradio input[type=radio]:focus-visible,nv-fieldradio input[type=radio]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldradio-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldradio input[type=radio]:checked{background:var(--nv-fieldradio-background-checked);border-color:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked:hover,nv-fieldradio input[type=radio]:checked:focus{border-color:var(--nv-fieldradio-background-checked);background:var(--nv-fieldradio-background-checked)}nv-fieldradio input[type=radio]:checked::before{content:\"\";position:absolute;top:50%;right:50%;transform:translate(50%, -50%);left:0;width:var(--form-radio-inner-circle-size);height:var(--form-radio-inner-circle-size);flex-shrink:0;border-radius:var(--radius-rounded-full);background:var(--nv-fieldradio-dot-color-checked)}nv-fieldradio input[type=radio]:disabled{border-radius:var(--radius-rounded-full);border-width:var(--form-radio-border-width);border-style:solid;border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio input[type=radio]:disabled:checked::before{background:var(--nv-fieldradio-dot-color-disabled)}nv-fieldradio input[type=radio]:disabled:hover{border-color:var(--nv-fieldradio-border-default);background:var(--nv-fieldradio-background-disabled)}nv-fieldradio .description{align-self:stretch;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;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height)}nv-fieldradio .error-description{align-self:stretch;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;font-weight:var(--form-description-font-weight);line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldradio .text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}";
-const NvFieldradioStyle0 = nvFieldradioCss;
 
 const NvFieldradio = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.checkedChanged = index.createEvent(this, "checkedChanged");
+        this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
         /**
          * Set the label placement to before the input
          * @deprecated use labelPlacement instead.
@@ -27,7 +27,7 @@ const NvFieldradio = class {
          * automatically generated to ensure unique identification, facilitating
          * proper label association and accessibility.
          */
-        this.inputId = v4A79185f4.v4();
+        this.inputId = v4BdYh22OP.v4();
         /**
          * Highlight the radio button with error styling. It helps users quickly
          * identify which option needs attention, improving their form-filling
@@ -88,9 +88,9 @@ const NvFieldradio = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '87387e9a81489927ca78ffc05e2ebeb13dc900c1', class: clsx297c1ffe.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("input", { key: '4aece4c1213ef2af2af42baf24c29a5285685e95', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), index.h("div", { key: '289eb1becce793d9da96c3792b53fe82cc2ec4b3', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '5315f69fb91a06437f67cc7a1b664a091f87f114', htmlFor: this.inputId }, index.h("slot", { key: '23364a4093a0b4f5a5ab76cad224049464a41aa2', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'd17ff8b61c9a085f36ccd7f4846ff4da6e8e506f', class: "description" }, index.h("slot", { key: '1915dd4d305fbcff26c38fa3b0fbc56ceec23db4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '2b7c1817fb7a0d26ec7aaece07f8da6851b8d0cc', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '8d9fafceba1a6dafa30ed695c01e26dc956ff51b', name: "error-description" }, this.errorDescription))))));
+        return (index.h(index.Host, { key: 'c41b30e8ef1cb1571f5b5343803121556967c616', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.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 }), index.h("div", { key: 'bf576a4ce2be056bcc862c13da85e5af91fd5cb1', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '041dd4f586598b79ddf460f97895a753eff1aaa8', htmlFor: this.inputId }, index.h("slot", { key: '6c0881f1da0accd31b4c011ff3351d7f8e185c8f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b7b0c84a81c55340dddd0645199122c1789c0053', class: "description" }, index.h("slot", { key: '5ba50f1eaef357ee7c581a791ccd69e7ee4fcd67', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'ac8093ddba1e8bbd78f3791c30876b00d56d98c7', hidden: !this.error, class: "error-description" }, index.h("slot", { key: '93324ca047fb2a205ec71e35a7bc0fd9e92d81f5', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -98,6 +98,6 @@ const NvFieldradio = class {
         "checked": ["handleCheckedChange"]
     }; }
 };
-NvFieldradio.style = NvFieldradioStyle0;
+NvFieldradio.style = nvFieldradioCss;
 
 exports.nv_fieldradio = NvFieldradio;

package/dist/cjs/{nv-fieldselect.entry-D-eYQpAv.js → nv-fieldselect.entry-BPQEtrv2.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-CtjeeUI-.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
-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{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[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 NvFieldselectStyle0 = nvFieldselectCss;
+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 NvFieldselect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged");
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
         //#endregion DEPRECATED
         /****************************************************************************/
         //#region STATES
@@ -26,7 +26,7 @@ const NvFieldselect = class {
          * to ensure unique identification, facilitating proper label association and
          * accessibility.
          */
-        this.inputId = v4A79185f4.v4();
+        this.inputId = v4BdYh22OP.v4();
         /**
          * The disabled prop lets you turn off the select field so that users can’t
          * choose something. When disabled, the field is grayed out and won’t respond to
@@ -42,10 +42,20 @@ const NvFieldselect = class {
         /**
          * Marks the select field as required, ensuring that the user must fill it out
          * before submitting the form.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
          */
         this.required = false;
         /**
-         * Alters the select field’s appearance to indicate an error, helping users
+         * Marks the select field as required for accessibility purposes without triggering
+         * native HTML validation. Use this when implementing custom validation logic.
+         * @note When set, this uses `aria-required` instead of the native `required` attribute.
+         * This allows developers to implement custom validation while maintaining accessibility.
+         * @note If this prop is not explicitly set, the component will check for the HTML attribute
+         * 'aria-required' directly to determine if it should be applied.
+         */
+        this.ariaRequiredAttr = false;
+        /**
+         * Alters the select field's appearance to indicate an error, helping users
          * identify fields that need correction.
          * @validator error
          */
@@ -336,13 +346,42 @@ const NvFieldselect = class {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (index.h(index.Host, { key: '040baa5db03e243169e5ee148cc30d29c4e89984' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'a27e960afe3d71920ba9deacacd74617dfb32941', htmlFor: this.inputId }, index.h("slot", { key: 'd8cd4638a03d8d1efe10c869ae7682f1f983bd72', name: "label" }, this.label))), index.h("div", { key: 'e28b6548efb4b7e8e0837165e0d427574dc31948', class: "select-wrapper" }, index.h("slot", { key: 'caafe9ac5b61ebf8a956363e643c5af43104de3e', name: "before-input" }), index.h("div", { key: '89cd9c355f6620a0d081c04e7785621712de54fe', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: 'e59c29a8b301f804d8a93437bd540b3100d27dba', name: "leading-input" }), this.internalReadonly && (index.h("input", { key: '57aa8ee14544dd181cf438a8e2e8d355fc6946b7', 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
+        // Check aria-required from multiple sources:
+        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
+        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
+        // We use hasAttribute to determine if the attribute was explicitly set by the user,
+        // since the prop now defaults to false (to maintain Blazor compatibility)
+        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
+            this.el.hasAttribute('aria-required-attr');
+        const ariaRequiredFromAttr = hasAriaRequiredAttr
+            ? this.el.getAttribute('aria-required') ||
+                this.el.getAttribute('aria-required-attr')
+            : null;
+        // Use aria-required if the attribute was explicitly set
+        // With reflect: true, setting the prop will also set the attribute
+        const useAriaRequired = hasAriaRequiredAttr;
+        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
+        // If attribute doesn't exist, the prop was never set and we don't use aria-required
+        const ariaRequiredAttrValue = hasAriaRequiredAttr
+            ? ariaRequiredFromAttr
+            : null;
+        // Determine which attributes to use
+        // If aria-required HTML attribute is present, use it (convert string to boolean)
+        // If required is set and aria-required is not "false", use native required
+        // If aria-required is "false", don't use native required even if required is set
+        const ariaRequiredValue = useAriaRequired
+            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
+            : undefined;
+        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
+        return (index.h(index.Host, { key: '19dc919c517b20e9271019c3c035a5d3965ac500' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'd490a55c4c2bbea30ea5474906e16ac1e0ebf09d', htmlFor: this.inputId }, index.h("slot", { key: 'eaa51f927cc6c16899f806832afe5807948e5aed', name: "label" }, this.label))), index.h("div", { key: '04ee5ad2797e3f315c21359b09a9350c9c69789b', class: "select-wrapper" }, index.h("slot", { key: '7b63bc1fdf20a286635c36f7a1d865365284dd68', name: "before-input" }), index.h("div", { key: 'a98eb2c006fe321bc6f2e28d18afe24641cd4227', class: "select-container", onClick: this.handleSelectContainerClick }, index.h("slot", { key: '2946fafe902e662c5fa37c8a238cd98a04b9e2f5', name: "leading-input" }), this.internalReadonly && (index.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
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), index.h("select", { key: '55bf13d94976c1ceff668d76e463629555ffea55', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), index.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}-error`
-                : `${this.inputId}-description` }, this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: 'd810fd3665c88c377b065c40da8ff462294af21f', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '94b6cedfdae5afb932e74e08080365935514e36c', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'a5184b762837e228aaf3aaf033381a9d757beed5', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: '3e08d45401ac8c50a2c4c52f88cd1324e49be636', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: 'b5b10982bb38fe509929b99ebd0a92d8b6687db1', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '3b673b645dcc175d70928390c721536d3271ab3c', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '296795070aa2679e53ebb0bc0ec056d5eebfaaac', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '73b434da2fa2537468a78e8ae15591688f30c49d', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '992015d9a5646bb9baad79f74af46b34bd8f0388', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }), this.options && this.options.length > 0 ? (this.options.map(option => (index.h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (index.h("slot", null))), index.h("div", { key: '11ace2d1d554e07071441a92b751f9f1e40c41b9', class: "select-icons" }, this.error && (index.h("nv-icon", { key: '5fe0c48e595e4e51fd88a1cf3b593349eb8b6880', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '992b8433aa0430828910e9b0d7a5b5bb9cbdde02', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (index.h("nv-iconbutton", { key: 'a1c89dc4437e96680a6d1ddf4db85b478ad52b28', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), index.h("slot", { key: 'fe76b1d3caa6addb556d6743626c6bc160d77d53', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '50bd8a56780a1b722d38279bb9f51860bf36e8b6', class: "description", id: `${this.inputId}-description` }, index.h("slot", { key: '3bfc2999c532ec0c8e192a5e442a0294e70cfc8d', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '5e807d931efdd9d3a69c90dee42497234f7c2cda', class: "error-description", id: `${this.inputId}-error` }, index.h("slot", { key: '48db0766450942d8d8ce4cdfa3f80a46d7c18a77', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
@@ -353,6 +392,6 @@ const NvFieldselect = class {
         "options": ["handleOptionsChange"]
     }; }
 };
-NvFieldselect.style = NvFieldselectStyle0;
+NvFieldselect.style = nvFieldselectCss;
 
 exports.nv_fieldselect = NvFieldselect;