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

package/dist/cjs/{nv-fielddaterange.entry-CjVVPEK_.js → nv-fielddaterange.entry-BORwYJ-k.js}

@@ -1,33 +1,33 @@
 'use strict';
 
-var index = require('./index-WPRkQD3O.js');
-var inputmaskEdcad3c1 = require('./inputmask-edcad3c1-B9Omti4z.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-CtjeeUI-.js');
+var inputmaskCSo292ul = require('./inputmask-CSo292ul-DlvupPk6.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
-require('./_commonjsHelpers-1789f0cf-BJu3ubxk.js');
+require('./_commonjsHelpers-B85MJLTf-CFO10eej.js');
 
-const nvFielddaterangeCss = "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-fielddaterange{--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-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .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%;width:100%}nv-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .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-fielddaterange .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)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}";
-const NvFielddaterangeStyle0 = nvFielddaterangeCss;
+const nvFielddaterangeCss = "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-fielddaterange{--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-fielddaterange[fluid]:not([fluid=false]){max-width:unset}nv-fielddaterange[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-fielddaterange[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-fielddaterange[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-fielddaterange[required]:not([required=false]) label::after,nv-fielddaterange[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddaterange 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-fielddaterange nv-popover{width:100%;display:block}nv-fielddaterange nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto;z-index:2}nv-fielddaterange nv-popover [slot=content]{display:block;width:100%}nv-fielddaterange .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch;display:flex;align-items:center;gap:8px}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container:focus-within,nv-fielddaterange .input-wrapper .input-container:focus-within:hover,nv-fielddaterange .input-wrapper .input-container:focus,nv-fielddaterange .input-wrapper .input-container:focus:hover{box-shadow:none;border-color:var(--nv-field-border-default)}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container input:focus{outline:none}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container input{}nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddaterange .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddaterange .input-wrapper .input-container input{width:100%}nv-fielddaterange .input-wrapper .input-container input:focus-within,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover,nv-fielddaterange .input-wrapper .input-container input:focus,nv-fielddaterange .input-wrapper .input-container input:focus:hover{outline:var(--focus-outline-stroke) solid var(--nv-field-border-focus);outline-offset:0px}nv-fielddaterange .input-wrapper .input-container input:focus-within~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus-within:hover~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus~.range-separator,nv-fielddaterange .input-wrapper .input-container input:focus:hover~.range-separator{background-color:transparent}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddaterange .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddaterange .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-fielddaterange .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddaterange .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-fielddaterange .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)}nv-fielddaterange .range-inputs{display:flex;align-items:center;gap:0;width:100%}nv-fielddaterange .range-inputs:focus-within{z-index:1}nv-fielddaterange .range-inputs input{flex:1;border:none;outline:none;padding:0;font-size:var(--form-field-font-size);color:var(--components-form-field-content-text);background:transparent;min-width:0}nv-fielddaterange .range-inputs input::placeholder{color:var(--components-form-field-content-placeholder)}nv-fielddaterange .range-inputs input:disabled{cursor:not-allowed;color:var(--components-form-field-content-text);background-color:var(--components-form-field-background-disabled)}nv-fielddaterange .range-inputs .range-separator{width:1px;height:1.5rem;background-color:var(--color-content-medium-border)}";
 
 const NvFielddaterange = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dateRangeChange = index.createEvent(this, "dateRangeChange");
-        this.valueChanged = index.createEvent(this, "valueChanged");
-        this.popoverId = v4A79185f4.v4();
+        this.dateRangeChange = index.createEvent(this, "dateRangeChange", 3);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        this.popoverId = v4BdYh22OP.v4();
         /****************************************************************************/
         //#region PROPERTIES
         /**
          * Sets the ID for the start input element and the for attribute of the associated
          * label. If no ID is provided, a random one will be automatically generated.
          */
-        this.startInputId = v4A79185f4.v4();
+        this.startInputId = v4BdYh22OP.v4();
         /**
          * Sets the ID for the end input element and the for attribute of the associated
          * label. If no ID is provided, a random one will be automatically generated.
          */
-        this.endInputId = v4A79185f4.v4();
+        this.endInputId = v4BdYh22OP.v4();
         /**
          * Disables both input fields.
          */
@@ -38,8 +38,18 @@ const NvFielddaterange = class {
         this.readonly = false;
         /**
          * Marks both input fields as required.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
          */
         this.required = false;
+        /**
+         * Marks both input fields 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;
         /**
          * Indicates an error state.
          */
@@ -286,7 +296,7 @@ const NvFielddaterange = class {
         inputs.forEach((input) => {
             var _a, _b;
             (_b = (_a = input.inputmask) === null || _a === void 0 ? void 0 : _a.remove) === null || _b === void 0 ? void 0 : _b.call(_a);
-            const inputMask = new inputmaskEdcad3c1.Inputmask({
+            const inputMask = new inputmaskCSo292ul.Inputmask({
                 alias: 'datetime',
                 inputFormat: this.convertToInputmaskFormat(this.dateFormat),
                 placeholder: this.convertToInputmaskFormat(this.dateFormat),
@@ -330,6 +340,82 @@ const NvFielddaterange = class {
             inputMask.mask(input);
         });
     }
+    /**
+     * Handles the reset event from the calendar's cancel button
+     * @param {CustomEvent} event - The event emitted by the calendar
+     */
+    handleCancelDateChange(event) {
+        let isResetSingle = false;
+        let isResetRange = false;
+        if (event.type === 'singleDateChange' && event.detail === '') {
+            isResetSingle = true;
+        }
+        if (event.type === 'rangeDateChange' &&
+            typeof event.detail === 'object' &&
+            event.detail.start === '' &&
+            event.detail.end === '') {
+            isResetRange = true;
+        }
+        if (isResetSingle || isResetRange) {
+            this.startValue = '';
+            this.endValue = '';
+            // Update unified value prop
+            this.value = '';
+            this.valueChanged.emit('');
+            const inputs = this.el.querySelectorAll('.input-wrapper input');
+            inputs.forEach((input) => {
+                input.value = '';
+            });
+            // Legacy support (deprecated)
+            this.dateRangeChange.emit({ start: '', end: '' });
+        }
+    }
+    /**
+     * Handles the range date selection event from nv-calendar.
+     * @param {CustomEvent} event - The custom event
+     */
+    handleRangeDateChange(event) {
+        // Check for cancel events
+        this.handleCancelDateChange(event);
+        // Check that both dates are defined
+        const { start, end } = event.detail || {};
+        if (start && end) {
+            this.startValue = start;
+            this.endValue = end;
+            // Update unified value prop (like nv-calendar)
+            const newValue = `${start},${end}`;
+            if (this.value !== newValue) {
+                this.value = newValue;
+                this.valueChanged.emit(this.value);
+            }
+            // Legacy support (deprecated)
+            this.dateRangeChange.emit({
+                start: this.startValue,
+                end: this.endValue,
+            });
+            if (!this.showActions) {
+                this.open = false;
+            }
+        }
+    }
+    /**
+     * Handles the unified value change event from nv-calendar
+     * @param {CustomEvent} event - The custom event
+     */
+    handleCalendarValueChanged(event) {
+        const newValue = event.detail || '';
+        if (newValue !== this.value) {
+            this.value = newValue;
+            this.valueChanged.emit(newValue);
+            // Parse and update internal state
+            this.parseUnifiedValue(newValue);
+            // Legacy support - emit dateRangeChange
+            this.dateRangeChange.emit({
+                start: this.startValue,
+                end: this.endValue,
+            });
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -383,90 +469,15 @@ const NvFielddaterange = class {
     disconnectedCallback() {
         document.removeEventListener('click', this.handleClickOutside);
     }
-    /**
-     * Handles the range date selection event from nv-calendar.
-     * Stops propagation to prevent duplicate events with handleCalendarValueChanged.
-     * @param {CustomEvent<DateRange>} event - The custom event
-     */
-    handleRangeDateChange(event) {
-        // Stop propagation to prevent this from being handled by handleCalendarValueChanged
-        event.stopPropagation();
-        const { start, end } = event.detail || {};
-        // Check that both dates are defined
-        if (start && end) {
-            this.startValue = start;
-            this.endValue = end;
-            // Update unified value prop (like nv-calendar)
-            const newValue = `${start},${end}`;
-            if (this.value !== newValue) {
-                this.value = newValue;
-                this.valueChanged.emit(this.value);
-            }
-            // Legacy support (deprecated)
-            this.dateRangeChange.emit({
-                start: this.startValue,
-                end: this.endValue,
-            });
-            if (!this.showActions) {
-                this.open = false;
-            }
-        }
-    }
-    /**
-     * Handles the unified value change event from nv-calendar
-     * Note: This might not be called if rangeDateChange stops propagation first.
-     * @param {CustomEvent<string>} event - The custom event
-     */
-    handleCalendarValueChanged(event) {
-        // Only handle events from the calendar, not from self
-        if (event.target === this.el) {
-            return;
-        }
-        // Stop propagation to prevent parent components from receiving calendar events
+    /* eslint-disable nova/native-event-listener */
+    handleClosePopover(event) {
         event.stopPropagation();
-        const newValue = event.detail || '';
-        if (newValue !== this.value) {
-            this.value = newValue;
-            this.valueChanged.emit(newValue);
-            // Parse and update internal state
-            this.parseUnifiedValue(newValue);
-            // Legacy support - emit dateRangeChange
-            this.dateRangeChange.emit({
-                start: this.startValue,
-                end: this.endValue,
-            });
-        }
-    }
-    handleClosePopover() {
         this.open = false;
     }
-    handleApplyDateRange() {
-        this.open = false;
-    }
-    /**
-     * Handles the reset event from the calendar's cancel button
-     * @param {CustomEvent} event - The event emitted by the calendar
-     */
-    handleDateReset(event) {
-        const isResetSingle = event.type === 'singleDateChange' && event.detail === '';
-        const isResetRange = event.type === 'rangeDateChange' &&
-            event.detail &&
-            event.detail.start === '' &&
-            event.detail.end === '';
-        if (isResetSingle || isResetRange) {
-            this.startValue = '';
-            this.endValue = '';
-            // Update unified value prop
-            this.value = '';
-            this.valueChanged.emit('');
-            const inputs = this.el.querySelectorAll('.input-wrapper input');
-            inputs.forEach((input) => {
-                input.value = '';
-            });
-            // Legacy support (deprecated)
-            this.dateRangeChange.emit({ start: '', end: '' });
-        }
-    }
+    /* eslint-enable nova/native-event-listener */
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LISTENERS
     /**
      * Handles keyboard events.
      * @param {KeyboardEvent} event - The keyboard event
@@ -489,6 +500,9 @@ const NvFielddaterange = class {
             return;
         }
     }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region WATCHERS
     handleValueChange(newValue) {
         // Use the unified parsing method instead of JSON.parse
         this.parseUnifiedValue(newValue);
@@ -516,16 +530,51 @@ const NvFielddaterange = class {
             }
         }
     }
-    //#endregion EVENTS
+    //#endregion WATCHERS
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '9f0ce8b2e6579ea6225dfbac7cb75cf78ea0c5f5' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '9adfefaeda1116c4b3dfa297529aa77a48b66cfe', htmlFor: this.startInputId }, index.h("slot", { key: '819fcfcf8ee7b649e3271d9c8ae24a4b70a60c81', name: "label" }, this.label))), index.h("nv-popover", { key: 'f689f4796b739ca1651cb812c428663e5935fa64', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: 'c5f3174c497a74205a4ab5e289ededbc2ab6ca3f', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '08e0703992304fe911a2ff4eef74023c8832629b', name: "before-input" }), index.h("div", { key: '9bc9c65f34a2de1c9f8054ccc038258982033e1b', class: "input-container" }, index.h("slot", { key: '47dbf93940e9c452d20b67b81fb7abd9b807af0d', name: "leading-input" }), index.h("div", { key: 'ea4587f7c5013cbd8d7e093aa85532438c18b5ab', class: "range-inputs" }, index.h("input", { key: '544297b36fb3646178c663d6aaa22c2cd3e0616b', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" }), index.h("div", { key: '15862aa6acde78f9da8433ded18b5a9ca8508ff5', class: "range-separator" }), index.h("input", { key: 'f481feb34af3f5581f2d97bafaa126f306aae12b', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: this.required, value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" })), this.error && (index.h("nv-icon", { key: '9a4a155d4e6ab389406ad14cc29e8fa25e578ce9', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '19969e5286a666fceb583de8901191595329f380', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '76a17a3d44ce189128467997434e34e82d607363', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '53c374d1628c396015f7006ad63c294932d5e78e', name: "after-input" })), index.h("div", { key: 'f5d53344987a39a54ac933cc94c802212b98c651', slot: "content" }, index.h("nv-calendar", { key: '4992731905d118e806a9a22df0413bdfb350f61e', ref: el => (this.calendarElement = el), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '396e2f1e53b4e7cd6233993c10aac1b1001d6a3c', class: "description" }, index.h("slot", { key: 'fccf3a987ed03560d8eb8a3657ca3ce9f291493c', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'e76e336e460ed64a05fd1748859f159ce3b74120', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'be76d31f0eeaf50e589f0ab317e04bd3be3d9ba4' })));
+        // 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: 'abeb5c6969e02768b3fbba9753c2aa85685ca958' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6dc69f4c166320ecc57785b00bcf5e6975087714', htmlFor: this.startInputId }, index.h("slot", { key: '5d7f90e45558da0fcf41714363f03fd74eaaf63f', name: "label" }, this.label))), index.h("nv-popover", { key: '852501449970e9f35436c3599cf20b06ac9755a8', ref: el => (this.popoverElement = el), id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '83777c5799d396067e4e0b3a07ff9b5ba43f70d6', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: 'ad184b5c254bab33ee9e4e11ce20d45ee55b38b2', name: "before-input" }), index.h("div", { key: '3b2248f8c6926663b4b7a0168033e8bb0d765271', class: "input-container" }, index.h("slot", { key: '8672068b75e2f917c23fd02bfa7d747673fa4b15', name: "leading-input" }), index.h("div", { key: 'f2d28c0a323265deda2e8827c87ef2a6cfc3c774', class: "range-inputs" }, index.h("input", Object.assign({ key: '7a57639656687a670d92063cb6c1c6567e71d51f', id: this.startInputId, type: "text", placeholder: this.startPlaceholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.startName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
+            'aria-required': String(ariaRequiredValue),
+        }), { autofocus: this.autofocus, value: this.startValue, onInput: this.handleStartInput, onFocus: this.handleFocus, "data-scope": "date-range" })), index.h("div", { key: '40691aa8f641ba34f332cf855da0681f658bff5c', class: "range-separator" }), index.h("input", Object.assign({ key: '823a9a193de464ad5d2ace079b5574dee17d68d1', id: this.endInputId, type: "text", placeholder: this.endPlaceholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.endName, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
+            'aria-required': String(ariaRequiredValue),
+        }), { value: this.endValue, onInput: this.handleEndInput, onFocus: this.handleFocus, "data-scope": "date-range" }))), this.error && (index.h("nv-icon", { key: 'fbff1d8e5007f1b3bd102e85100adec87cc5a4b5', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'e57548aa7d3615aba4f9dae0243a8efab6be818f', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '484831782c4f2b27e551b7e93427f83b4a325d87', class: "toggle-calendar-icon", name: "calendar", size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '5afc9d71242c07ea6a8033d6dccaf51fb4a3d240', name: "after-input" })), index.h("div", { key: '943e048da70ac45f71de8aca9023e087d09ce436', slot: "content" }, index.h("nv-calendar", { key: '0d0cf579fd1926be7d22e50bad7835139ce8e11e', ref: el => (this.calendarElement = el), onRangeDateChange: this.handleRangeDateChange.bind(this), onValueChanged: this.handleCalendarValueChanged.bind(this), onSingleDateChange: this.handleCancelDateChange.bind(this), dateFormat: this.dateFormat, value: this.value, firstDayOfWeek: this.firstDayOfWeek, numberOfCalendars: this.numberOfCalendars, min: this.min, max: this.max, locale: this.locale, shortcutsPlacement: this.shortcutsPlacement, showActions: this.showActions, shortcuts: this.shortcuts, showWeekNumbers: this.showWeekNumbers, disabledDates: this.disabledDates, selectionType: "range", "data-prevent-navigation": "true" }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '1831df19b0b27d2bfca5ed30988b3f6c8149cec7', class: "description" }, index.h("slot", { key: 'aca234536e992e3407bf77ae3a90eff177a906dc', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'efcc3f81f5e11295bb647eb2e624c3a49177cfba', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'e5299276cb361bfaa252ac6f8a05c45151c539f0' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -533,6 +582,6 @@ const NvFielddaterange = class {
         "open": ["onOpenChanged"]
     }; }
 };
-NvFielddaterange.style = NvFielddaterangeStyle0;
+NvFielddaterange.style = nvFielddaterangeCss;
 
 exports.nv_fielddaterange = NvFielddaterange;