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

package/dist/cjs/{nv-dialog.entry-J6Xwi6z1.js → nv-dialog.entry-O47Eol_7.js}

@@ -1,13 +1,14 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
-var grow_animation24ad5cf8 = require('./grow.animation-24ad5cf8-LUp_ITEx.js');
-var fade_animation9b939939 = require('./fade.animation-9b939939-DV--bM4S.js');
-require('./style-value-types.es-f5d10b79-D0QCM8OB.js');
-var timeline_animation79215cd4 = require('./timeline.animation-79215cd4-KteJaZPb.js');
-var clsx297c1ffe = require('./clsx-297c1ffe-BtxeOLZW.js');
-var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
-var v4A79185f4 = require('./v4-a79185f4-2n0dOd_Y.js');
+var index = require('./index-CtjeeUI-.js');
+var grow_animationCvHGHBL4 = require('./grow.animation-CvHGHBL4-DDIEYBK-.js');
+var fade_animationDcRL9lcm = require('./fade.animation-DcRL9lcm-DAZeHoKN.js');
+require('./style-value-types.es-xlgmw4x8-B1vLqX9m.js');
+var timeline_animationCgHCo_Ho = require('./timeline.animation-CgHCo_Ho-KteJaZPb.js');
+var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
@@ -545,13 +546,12 @@ var tabbable = function tabbable(container, options) {
   return sortByOrder(candidates);
 };
 
-const nvDialogCss = "nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}";
-const NvDialogStyle0 = nvDialogCss;
+const nvDialogCss = "nv-dialog dialog{width:100vw;height:100svh;margin:0;max-height:unset;max-width:unset;padding:0;background:color-mix(in srgb, var(--components-overlay-background) 70%, transparent);backdrop-filter:blur(4px)}nv-dialog dialog.full .content{min-width:90vw;width:90vw;max-width:90vw}nv-dialog .backdrop{display:flex;min-height:100%;padding:var(--spacing-3);box-shadow:0px var(--shadow-y-axis-2xl) var(--shadow-blur-2xl) var(--shadow-spread-2xl) var(--shadow-color-opacity-3) var(--shadow-color-opacity-3)}nv-dialog .backdrop .content{border-radius:var(--radius-rounded-2xl);background:var(--color-level-00-background);min-width:min(90vw, 400px);width:fit-content;max-width:clamp(90vw, min(90vw, 960px), 960px);margin:auto;display:flex;flex-direction:column;align-items:flex-start;height:fit-content;position:relative}nv-dialog .backdrop .content nv-button.close-button{position:absolute;top:var(--dialog-dismissible-position-top);right:var(--dialog-dismissible-position-right);display:flex;padding:var(--button-sm-icon-button-padding);justify-content:flex-end;align-items:flex-start;gap:10px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar{width:6px;height:6px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-dialog .backdrop .content .content-body::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-dialog .backdrop .content .content-body{box-sizing:border-box;padding:var(--dialog-body-padding-y) var(--dialog-body-padding-x);scrollbar-gutter:stable both-edges;font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-md);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-base);color:var(--color-content-medium-text);width:100%}";
 
 const NvDialog = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.openChanged = index.createEvent(this, "openChanged");
+        this.openChanged = index.createEvent(this, "openChanged", 3);
         this.eventsAttached = false;
         this.triggerClickEvents = [
             ['click', this.show],
@@ -649,18 +649,18 @@ const NvDialog = class {
         /** It is recommended to use the .show() or .showModal() method to render
          * dialogs, rather than the open attribute. If a <dialog> is opened using
          * the open attribute, it is non-modal. */
-        const { setFadeOut } = fade_animation9b939939.useFade(this.dialogElement);
+        const { setFadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement);
         setFadeOut();
         this.dialogElement.showModal();
-        const { setGrowIn, growIn } = grow_animation24ad5cf8.useGrow(this.contentElement, {
+        const { setGrowIn, growIn } = grow_animationCvHGHBL4.useGrow(this.contentElement, {
             duration: 100,
             amount: 0.9,
         });
-        const { fadeIn } = fade_animation9b939939.useFade(this.dialogElement, {
+        const { fadeIn } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
             duration: 100,
         });
         setGrowIn();
-        await timeline_animation79215cd4.parallel(fadeIn, growIn).start();
+        await timeline_animationCgHCo_Ho.parallel(fadeIn, growIn).start();
     }
     /**
      * Call this method to hide the dialog, making it disappear from view.
@@ -668,14 +668,14 @@ const NvDialog = class {
     async close() {
         this.open = false;
         this.allowScroll();
-        const { growOut } = grow_animation24ad5cf8.useGrow(this.contentElement, {
+        const { growOut } = grow_animationCvHGHBL4.useGrow(this.contentElement, {
             duration: 150,
             amount: 0.85,
         });
-        const { fadeOut } = fade_animation9b939939.useFade(this.dialogElement, {
+        const { fadeOut } = fade_animationDcRL9lcm.useFade(this.dialogElement, {
             duration: 150,
         });
-        await timeline_animation79215cd4.parallel(growOut, fadeOut).start();
+        await timeline_animationCgHCo_Ho.parallel(growOut, fadeOut).start();
         this.dialogElement.close();
     }
     /**
@@ -705,7 +705,7 @@ const NvDialog = class {
      */
     attachEventListeners() {
         if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            grow_animation24ad5cf8.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            grow_animationCvHGHBL4.addEventListeners(this.triggerClickEvents, this.triggerElement, this);
             this.eventsAttached = true;
         }
     }
@@ -731,7 +731,7 @@ const NvDialog = class {
     }
     ensureFormId(formElement) {
         if (!formElement.id) {
-            formElement.id = `dialog-form-${v4A79185f4.v4()}`;
+            formElement.id = `dialog-form-${v4BdYh22OP.v4()}`;
         }
         return formElement.id;
     }
@@ -810,7 +810,7 @@ const NvDialog = class {
     }
     disconnectedCallback() {
         if (this.triggerElement && !this.eventsAttached && !this.controlled) {
-            grow_animation24ad5cf8.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
+            grow_animationCvHGHBL4.removeEventListeners(this.triggerClickEvents, this.triggerElement, this);
             this.eventsAttached = false;
         }
         this.allowScroll();
@@ -820,13 +820,13 @@ const NvDialog = class {
     //#region RENDER
     render() {
         const hasForm = this.form || this.el.querySelector('form');
-        return (index.h(index.Host, { key: '91b36e5daac0251997c7a6794166794f1e89087f' }, index.h("slot", { key: 'abeef317af74093c9b09fa6f2d300c23bbde54a6', name: "trigger" }), index.h("dialog", { key: '1eb417dc921bca7837aa05aad9c252fba7d9d920', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsx297c1ffe.clsx({ full: this.full }) }, index.h("div", { key: '8ec55c461a747ebb4556fbf791ee1d66d3bcc51a', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '373beedad09464f3473935e0464b3f51133e0372', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: '5e94d056687837b017991f54df6cf350159addcc', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '98db7848b9796589b9e7670c62a26417228a15d6', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: '611eb7914b65d5a27513f91eb458a578dbc63734', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'caf21876e6a33e997eccdc577fb43d6e63fcfc90' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constants69bafca2.ButtonType.Submit : constants69bafca2.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
+        return (index.h(index.Host, { key: 'e1837ebe65fcf0e56880438b59a5e8c4b5873926' }, index.h("slot", { key: '543e69780f3dad15a91b4bcb1f4199153bbce1b3', name: "trigger" }), index.h("dialog", { key: 'ef1600f73c8d25744b3b69356e1c4a98e605be1e', ref: el => (this.dialogElement = el), onClose: this.handleDialogClose, onClick: this.handleDialogClick, role: "dialog", "aria-modal": "true", "aria-labelledby": "dialog-header", "aria-describedby": "dialog-content", class: clsxChV9xqsO.clsx({ full: this.full }) }, index.h("div", { key: '894e91291a5ee2a1c26a658e1ca7aaf237d71069', class: "backdrop", ref: el => (this.backdropElement = el) }, index.h("div", { key: '78700c26d1ec553d67a8e62f3f3628fab8deb49a', class: "content", ref: el => (this.contentElement = el) }, !this.undismissable && (index.h("nv-button", { key: 'd042c828bc6886091128425ea3e5c73035a0cea1', class: "close-button", emphasis: "lower", size: "sm", onClick: this.handleDialogClose, "aria-label": "Close dialog" }, index.h("nv-icon", { key: '035273dd23255883a7a5feb354d230242683e00e', name: "x", size: "sm" }))), this.headerElement ? (index.h("slot", { name: "header" })) : (index.h("nv-dialogheader", { id: "dialog-header" })), index.h("div", { key: 'd86417aae675f8611312495d31ca8d0b58c2caaf', class: "content-body", id: "dialog-content" }, index.h("slot", { key: 'cb48b94b846097d04ffd98c6689cd4116e8cd9f9' })), this.footerElement ? (index.h("slot", { name: "footer" })) : (index.h("nv-dialogfooter", { form: this.form, primaryButtonType: hasForm ? constantsBReL3Lsa.ButtonType.Submit : constantsBReL3Lsa.ButtonType.Button, onDialogCanceled: this.handleDialogClose, undismissable: this.undismissable })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
         "open": ["handleDialogOpenChange"]
     }; }
 };
-NvDialog.style = NvDialogStyle0;
+NvDialog.style = nvDialogCss;
 
 exports.nv_dialog = NvDialog;

package/dist/cjs/{nv-dialogfooter_2.entry-DOlhqDTh.js → nv-dialogfooter_2.entry-Dn16bI8a.js}

@@ -1,18 +1,18 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.js');
-var constants69bafca2 = require('./constants-69bafca2-DpB_ghPF.js');
+var index = require('./index-CtjeeUI-.js');
+var constantsBReL3Lsa = require('./constants-BReL3Lsa-DpB_ghPF.js');
+require('@stencil/react-output-target/runtime');
 require('react');
 require('react-dom');
 
 const nvDialogfooterCss = "nv-dialogfooter{display:flex;padding:var(--dialog-footer-padding-top) var(--dialog-footer-padding-x) var(--dialog-footer-padding-bottom) var(--dialog-footer-padding-x);justify-content:flex-end;align-items:flex-end;gap:var(--dialog-footer-gap-y);align-self:stretch}";
-const NvDialogfooterStyle0 = nvDialogfooterCss;
 
 const NvDialogfooter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.dialogCanceled = index.createEvent(this, "dialogCanceled");
-        this.dialogPrimaryClicked = index.createEvent(this, "dialogPrimaryClicked");
+        this.dialogCanceled = index.createEvent(this, "dialogCanceled", 3);
+        this.dialogPrimaryClicked = index.createEvent(this, "dialogPrimaryClicked", 3);
         if (hostRef.$hostElement$["s-ei"]) {
             this.internals = hostRef.$hostElement$["s-ei"];
         }
@@ -86,22 +86,21 @@ const NvDialogfooter = class {
         // Set the default button type based on the form property
         this.primaryButtonType =
             this.primaryButtonType || this.form
-                ? constants69bafca2.ButtonType.Submit
-                : constants69bafca2.ButtonType.Button;
+                ? constantsBReL3Lsa.ButtonType.Submit
+                : constantsBReL3Lsa.ButtonType.Button;
     }
     //#endregion LIFECYCLE
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '908abbe8e2e9aa215641dd056c70dc16f36c3ac3' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
+        return (index.h(index.Host, { key: '0048aeb5ba7d8919e94f3dff06dddd1bdff813bb' }, !this.hasSlot ? (index.h(index.Fragment, null, !this.undismissable && (index.h("nv-button", { onClick: this.handleCancel, emphasis: "low", size: "sm" }, this.cancelLabel)), index.h("nv-button", { onClick: this.handlePrimary, disabled: this.disabled, danger: this.danger, size: "sm", emphasis: "high", form: this.form, type: this.primaryButtonType }, this.leadingIcon && (index.h("nv-icon", { slot: "leading-icon", name: this.leadingIcon, size: "sm" })), this.primaryLabel, this.trailingIcon && (index.h("nv-icon", { slot: "trailing-icon", name: this.trailingIcon, size: "sm" }))))) : (index.h("slot", null))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
 };
-NvDialogfooter.style = NvDialogfooterStyle0;
+NvDialogfooter.style = nvDialogfooterCss;
 
 const nvDialogheaderCss = "nv-dialogheader{padding:var(--dialog-header-padding-top) var(--dialog-header-padding-x) var(--dialog-header-padding-bottom) var(--dialog-header-padding-x);justify-content:space-between;align-items:flex-start;align-self:stretch}nv-dialogheader .heading{color:var(--color-content-high-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-lg);font-style:normal;font-weight:var(--font-weight-medium-emphasis);padding-right:var(--spacing-7);line-height:var(--leading-px-6);letter-spacing:var(--letter-spacing-heading-xs)}nv-dialogheader .subheading{color:var(--color-content-low-text);font-family:var(--font-family-default), var(--font-family-fallback), sans-serif;font-size:var(--font-size-sm);font-style:normal;font-weight:var(--font-weight-low-emphasis);line-height:var(--line-height-sm);}";
-const NvDialogheaderStyle0 = nvDialogheaderCss;
 
 const NvDialogheader = class {
     constructor(hostRef) {
@@ -132,7 +131,7 @@ const NvDialogheader = class {
     }
     get el() { return index.getElement(this); }
 };
-NvDialogheader.style = NvDialogheaderStyle0;
+NvDialogheader.style = nvDialogheaderCss;
 
 exports.nv_dialogfooter = NvDialogfooter;
 exports.nv_dialogheader = NvDialogheader;

package/dist/cjs/nv-fieldcheckbox.entry-Bx6ArV_b.js

@@ -0,0 +1,177 @@
+'use strict';
+
+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 nvFieldcheckboxCss = "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-fieldcheckbox{--nv-fieldcheckbox-border-default:var(\n    --components-form-field-border-default\n  );--nv-fieldcheckbox-border-hover:var(--components-form-field-border-hover);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-default);--nv-fieldcheckbox-background-default:var(\n    --components-form-field-background-default\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-checked\n  );--nv-fieldcheckbox-background-disabled:var(\n    --components-form-field-background-disabled\n  );--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-brand);--nv-fieldcheckbox-color-checked:var(\n    --components-form-shape-foreground-default\n  );--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-brand);display:inline-flex;align-items:flex-start;gap:var(--form-gap-x);position:relative}nv-fieldcheckbox:not([disabled],[readonly]) input,nv-fieldcheckbox:not([disabled],[readonly]) label{cursor:pointer}nv-fieldcheckbox.error>.input-container{--nv-fieldcheckbox-border-default:var(--components-form-field-border-error);--nv-fieldcheckbox-border-hover:var(--nv-fieldcheckbox-border-default);--nv-fieldcheckbox-border-focus:var(--components-form-field-border-error);--nv-fieldcheckbox-focus-box-shadow:var(--color-focus-destructive);--nv-fieldcheckbox-color-disabled:var(\n    --components-form-shape-foreground-disabled-error\n  );--nv-fieldcheckbox-background-checked:var(\n    --components-form-field-background-error\n  );--nv-fieldcheckbox-outline-color:var(--color-focus-destructive)}nv-fieldcheckbox.label-placement-before{flex-direction:row-reverse}nv-fieldcheckbox[disabled]:not([disabled=false]){opacity:0.5}nv-fieldcheckbox>.input-container{position:relative;color:var(--nv-fieldcheckbox-color-checked)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container:has(input[type=checkbox]:disabled:not([readonly])){color:var(--nv-fieldcheckbox-color-disabled)}nv-fieldcheckbox>.input-container input[type=checkbox]{appearance:none;position:relative;display:flex;width:var(--form-checkbox-size);height:var(--form-checkbox-size);flex-direction:column;align-items:flex-start;border-radius:var(--form-checkbox-radius);border-width:var(--form-checkbox-border-width);border-style:solid;border-color:var(--nv-fieldcheckbox-border-default);background:var(--nv-fieldcheckbox-background-default)}nv-fieldcheckbox>.input-container input[type=checkbox]:hover{border-color:var(--nv-fieldcheckbox-border-hover)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus{border-color:var(--nv-fieldcheckbox-border-focus)}nv-fieldcheckbox>.input-container input[type=checkbox]:focus,nv-fieldcheckbox>.input-container input[type=checkbox]:focus-within{outline:none}nv-fieldcheckbox>.input-container input[type=checkbox]:focus-visible,nv-fieldcheckbox>.input-container input[type=checkbox]:has(:focus-visible){outline:calc(var(--focus-outline-stroke) * 1) solid var(--nv-fieldcheckbox-outline-color);outline-offset:calc(var(--focus-outline-offset) * 1)}nv-fieldcheckbox>.input-container input[type=checkbox]:checked,nv-fieldcheckbox>.input-container input[type=checkbox]:indeterminate{background:var(--nv-fieldcheckbox-background-checked);border-color:var(--nv-fieldcheckbox-background-checked)}nv-fieldcheckbox>.input-container input[type=checkbox]:disabled:not([readonly]){background:var(--nv-fieldcheckbox-background-disabled);border-color:var(--nv-fieldcheckbox-border-default)}nv-fieldcheckbox>.input-container input[type=checkbox][readonly]{opacity:0.5}nv-fieldcheckbox>.input-container .icon{pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center}nv-fieldcheckbox>.input-container .icon svg{width:var(--form-checkbox-icon-size);height:var(--form-checkbox-icon-size);fill:none;stroke:currentcolor;stroke-width:var(--form-checkbox-icon-stroke);flex-shrink:0}nv-fieldcheckbox[required]:not([required=false])>.text-container label::after,nv-fieldcheckbox[aria-required=true]>.text-container label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldcheckbox>.text-container{display:flex;flex-direction:column;align-items:flex-start;flex:1 0 0}nv-fieldcheckbox>.text-container label{align-self:stretch;text-align:left;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-fieldcheckbox>.text-container label.visually-hidden{position:absolute;padding:0;border:0;overflow:hidden;white-space:nowrap;width:1px;height:1px;margin:-1px;clip:rect(0, 0, 0, 0)}nv-fieldcheckbox>.text-container .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-fieldcheckbox>.text-container .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)}";
+
+const NvFieldcheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.checkedChanged = index.createEvent(this, "checkedChanged", 3);
+        /**
+         * When true, the label will be placed before the checkbox.
+         * @deprecated Use `labelPlacement = end` instead.
+         * */
+        this.labelBefore = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the radio button’s 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();
+        /**
+         * Hides the label visually while still keeping it available for screen
+         * readers.
+         */
+        this.hideLabel = false;
+        /**
+         * Signals that there is an error associated with the checkbox, which can
+         * trigger visual cues.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Indicates whether the checkbox is checked or not.
+         */
+        this.checked = false;
+        /**
+         * Indicates whether the checkbox is in an indeterminate state, typically used
+         * for hierarchical checkboxes.
+         */
+        this.indeterminate = false;
+        /**
+         * Disables the checkbox, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Sets the checkbox to read-only, preventing user changes but still allowing
+         * focus and selection of text.
+         */
+        this.readonly = false;
+        /**
+         * Marks the checkbox as required, indicating that it must be checked for
+         * form submission.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
+         */
+        this.required = false;
+        /**
+         * Marks the checkbox 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;
+        /**
+         * 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;
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region LISTENERS
+    /**
+     * Listens for the change event on the checkbox input element and updates the
+     * checked state.
+     * @param {Event} event - The change event.
+     */
+    handleChange(event) {
+        const target = event.target;
+        if (target.type === 'checkbox' && target.id === this.inputId) {
+            if (this.readonly || this.disabled) {
+                event.preventDefault();
+                return;
+            }
+            if (this.indeterminate) {
+                this.indeterminate = false;
+            }
+            this.checked = target.checked;
+        }
+    }
+    //#endregion LISTENERS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * Watches for changes to the checked state and emits the new value.
+     * @param {boolean} checked - The new value of the checked state.
+     */
+    onCheckedChanged(checked) {
+        this.checkedChanged.emit(checked);
+    }
+    //#endregion WATCHERS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.labelBefore) {
+            this.labelPlacement = 'before';
+        }
+        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: 'f3048e237f3e1b4007ed4b3a885aa3743d97f944', class: clsxChV9xqsO.clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, index.h("div", { key: '294e57442ee4d4529ecd68e515f508c753b2710f', class: "input-container" }, index.h("input", Object.assign({ key: '9c0f7ded57a973da45f12768e5a6e0dcb62ce259', type: "checkbox", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly && !useNativeRequired, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
+            'aria-required': String(ariaRequiredValue),
+        }), { indeterminate: this.indeterminate, ref: el => {
+                if (el) {
+                    el.indeterminate = this.indeterminate;
+                }
+            } })), index.h("span", { key: '223c55fdf2a6f903983cc3d3864e1e39d4e7ec04', class: "icon" }, this.checked && !this.indeterminate && (index.h("slot", { key: '336e037d31cb2b52745977a54ca997af5e45304b', name: "checked-icon" }, index.h("svg", { key: '08e6e90c23787f057c3bf0aa6cfbc9a45b5122b9', xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: 'b14e12fec6247aa3aa8da36bcaa0dab6edabaa96', d: "M11.6667 3.5L5.25004 9.91667L2.33337 7", "stroke-linecap": "round", "stroke-linejoin": "round" })))), this.indeterminate && (index.h("slot", { key: 'b5c30541e74b920ec41a1fe5c35805cea134d336', name: "indeterminate-icon" }, index.h("svg", { key: '54bcb60835d919f4a7b4897fc567c9adab4e05c1', class: "indeterminate-svg", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 14 14", fill: "none" }, index.h("path", { key: '62ade78b9f33727aba129e6e4d5c219d4bbd03f1', d: "M2.9165 7H11.0832", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), index.h("slot", { key: 'cb6cc3dbcf226dcf5ddb1fa871d43ca19726a3a8' }), index.h("div", { key: '44634c846b5d09d71b6c27a8c9934acf12261105', class: "text-container" }, index.h("slot", { key: '2aa6f2e956088f5856f56888def6f728c815293c', name: "main" }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'e417e4cb783a1076b35f5566f2f25ab06063d8d5', htmlFor: this.inputId, class: clsxChV9xqsO.clsx(this.hideLabel && 'visually-hidden') }, index.h("slot", { key: '61eaf3fd5ca61d0cba524786c288d6b3836bb947', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '43fdb9fb7a6af7c1d2bac659c3195e1b1988d083', class: "description" }, index.h("slot", { key: '7e332245bbefe3686fc71560010ab237217bb8f8', name: "description" }, this.description)))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'a2dc29465f01262b147345fa8897dbcca7b77458', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'e696d1fe9d833fec7b779bf0b5191dd0eab2908e', name: "error-description" }, this.errorDescription))))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChanged"]
+    }; }
+};
+NvFieldcheckbox.style = nvFieldcheckboxCss;
+
+exports.nv_fieldcheckbox = NvFieldcheckbox;

package/dist/cjs/{nv-fielddate.entry-xWi3GpLl.js → nv-fielddate.entry-B4P0U8QG.js}

@@ -1,27 +1,27 @@
 'use strict';
 
-var index = require('./index-CEKdYnmK.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 nvFielddateCss = "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-fielddate{--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-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[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-fielddate[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-fielddate[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-fielddate[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddate 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-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .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-fielddate .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-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .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-fielddate .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-fielddate .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-fielddate .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%;font-feature-settings:\"tnum\";font-family:\"TTNorms Pro Mono\", monospace}nv-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .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-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .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-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .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-fielddate .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 NvFielddateStyle0 = nvFielddateCss;
+const nvFielddateCss = "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-fielddate{--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-fielddate[fluid]:not([fluid=false]){max-width:unset}nv-fielddate[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-fielddate[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-fielddate[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-fielddate[required]:not([required=false]) label::after,nv-fielddate[aria-required=true] label::after{content:\"*\";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fielddate 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-fielddate nv-popover{width:100%;display:block}nv-fielddate nv-popover [data-scope=popover]{padding:0;background-color:var(--components-list-dropdown-background);border:1px solid var(--components-list-dropdown-border);width:auto}nv-fielddate nv-popover [slot=content]{display:block;width:100%}nv-fielddate nv-popover .datepicker-container{border:none}nv-fielddate .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-fielddate .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-fielddate .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fielddate .input-wrapper .input-container:focus-within,nv-fielddate .input-wrapper .input-container:focus-within:hover,nv-fielddate .input-wrapper .input-container:focus,nv-fielddate .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-fielddate .input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fielddate .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-fielddate .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-fielddate .input-wrapper .input-container input:focus{outline:none}nv-fielddate .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-fielddate .input-wrapper .input-container input{}nv-fielddate .input-wrapper .input-container input[type=password]::-ms-clear,nv-fielddate .input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fielddate .input-wrapper .input-container input{font-feature-settings:\"tnum\";font-family:\"TTNorms Pro Mono\", monospace}nv-fielddate .input-wrapper .input-container>nv-iconbutton{border:0px;border-radius:0px}nv-fielddate .input-wrapper .input-container>nv-iconbutton:focus-visible{border-radius:var(--button-md-border-radius);outline-offset:-3px}nv-fielddate .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-fielddate .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fielddate .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-fielddate .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 NvFielddate = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.valueChanged = index.createEvent(this, "valueChanged");
-        this.popoverId = v4A79185f4.v4();
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        this.popoverId = v4BdYh22OP.v4();
         /****************************************************************************/
         //#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.
          */
-        this.inputId = v4A79185f4.v4();
+        this.inputId = v4BdYh22OP.v4();
         /**
          * Disables the input field.
          */
@@ -32,8 +32,18 @@ const NvFielddate = class {
         this.readonly = false;
         /**
          * Marks the input field as required.
+         * @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;
         /**
          * Indicates an error state.
          */
@@ -234,7 +244,7 @@ const NvFielddate = class {
         if (!this.inputElement)
             return;
         (_b = (_a = this.inputElement.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),
@@ -256,6 +266,28 @@ const NvFielddate = class {
         });
         inputMask.mask(this.inputElement);
     }
+    /**
+     * Handles the single date selection event from nv-calendar.
+     * Updates the input value and closes the popover.
+     * @param {CustomEvent} event - The event from nv-calendar.
+     */
+    handleSingleDateChange(event) {
+        const value = event.detail;
+        const previousValue = this.value;
+        this.singleValue = value;
+        this.value = value;
+        // Set the input value directly when calendar is used
+        if (this.inputElement) {
+            this.inputElement.value = value;
+        }
+        // Only emit valueChanged if the value actually changed
+        if (previousValue !== value) {
+            this.valueChanged.emit(value);
+        }
+        if (!this.showActions) {
+            this.open = false;
+        }
+    }
     //#endregion METHODS
     /****************************************************************************/
     //#region LIFECYCLE
@@ -314,31 +346,12 @@ const NvFielddate = class {
     //#endregion WATCHERS
     /****************************************************************************/
     //#region LISTENERS
-    /**
-     * Handles the single date selection event from nv-calendar.
-     * Updates the input value and closes the popover.
-     * @param {CustomEvent} event - The event from nv-calendar.
-     */
-    handleSingleDateChange(event) {
-        const value = event.detail;
-        const previousValue = this.value;
-        this.singleValue = value;
-        this.value = value;
-        // Set the input value directly when calendar is used
-        if (this.inputElement) {
-            this.inputElement.value = value;
-        }
-        // Only emit valueChanged if the value actually changed
-        if (previousValue !== value) {
-            this.valueChanged.emit(value);
-        }
-        if (!this.showActions) {
-            this.open = false;
-        }
-    }
-    handleClosePopover() {
+    /* eslint-disable nova/native-event-listener */
+    handleClosePopover(event) {
+        event.stopPropagation();
         this.open = false;
     }
+    /* eslint-enable nova/native-event-listener */
     handleDocumentClick(event) {
         this.handleClickOutside(event);
     }
@@ -365,13 +378,46 @@ const NvFielddate = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: 'c8b62c90ddfde96e12cb63aafba29d5b507286c6' }, ((this.label && this.label.length > 0) ||
-            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '761e06fd5d55b23946a87b86403105be049bbb4b', htmlFor: this.inputId }, index.h("slot", { key: '73676bbc15ddc90172e0d1a6da0c84bb21e433a1', name: "label" }, this.label))), index.h("nv-popover", { key: 'dddd5f5619c6696b1a7b9991c94fba01e3710199', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '28bcfe3c9a50b81b1c2565b1dbab0479cf0927c0', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '9ff4bfecd08b05c3425baa16f56da95584a33977', name: "before-input" }), index.h("div", { key: '8cfb31352d12b45d4450fabeb84328bfb9644ee4', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'ac99e0f250644eef55a24979f92890b04c03179e', name: "leading-input" }), index.h("input", { key: 'dd490963055df6295d6a04eda58d44857d827255', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
-                this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: this.required, autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" }), this.error && (index.h("nv-icon", { key: '16b6825561152e5157aca753082c7229d15e2c46', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '4780677cf8da9866d2fa4d40557b564b8920b065', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: 'c6bd82b770b28f35b6716abc8cba5a28aa13dd56', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
+        // 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: '0ca84bd29bbaec9ece39453bc92d72bac16f6f57' }, ((this.label && this.label.length > 0) ||
+            this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'be4ccdc44ea8e0f37b98b09c842f1572ae097d0c', htmlFor: this.inputId }, index.h("slot", { key: '3c3c33c21cca313d0593c738a8b43ea75b5c2682', name: "label" }, this.label))), index.h("nv-popover", { key: 'cbabf1481c6123ea9dedd9de1df46002c2381936', ref: this.setPopoverRef, id: this.popoverId, triggerMode: "controlled", placement: "bottom-start", open: this.open }, index.h("div", { key: '618bc8cee26700c9ed030e2145e15b160c7ae1b0', slot: "trigger", class: "input-wrapper" }, index.h("slot", { key: '14d45ea59d20a6ec74d80fb64d5ffc91f2c1c7ea', name: "before-input" }), index.h("div", { key: 'd053f3946c341f9683d58bc198ba102eac5a9bf4', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: '1c43710904773492094de03147800888f88f7ccb', name: "leading-input" }), index.h("input", Object.assign({ key: '366f655b2d42dc6d31159772d8a1611491ade8c3', id: this.inputId, ref: this.setInputRef, placeholder: this.placeholder ||
+                this.convertToInputmaskFormat(this.dateFormat), name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
+            'aria-required': String(ariaRequiredValue),
+        }), { autofocus: this.autofocus, onInput: this.handleInput, onFocus: this.handleFocus, "data-scope": "date" })), this.error && (index.h("nv-icon", { key: 'fe00afa4281786bcdda78197e569d7502abc88e9', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: 'f23e9bc837970b4599bc93dd240cdb5e7dbb5cd0', name: "circle-check", class: "validation", size: "md" })), index.h("nv-iconbutton", { key: '7790ff4ae3b8bbb54b00ec4051d017d8c3b34024', class: "toggle-calendar-icon", name: "calendar" //{this.open ? 'chevron-top' : 'chevron-down'}
             ,
-            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '85ed704fa118dc5087af5ce8e791e91a3c210093', name: "after-input" })), index.h("div", { key: 'ad9eaa9cedb72c56d8d5b201904259798a790aa4', slot: "content" }, index.h("nv-calendar", { key: '79abc83113d0a14bdfcb19e693b6f5d94adaa071', dateFormat: this.dateFormat, singleValue: this.singleValue, 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, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '8d3620b3ddb001c5ed1ba0557310a7bf4af4c5e0', class: "description" }, index.h("slot", { key: 'b80b706332d733476feec054737f35a4f008a078', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '976a1e236e6391ef7e8aeac0b56c1fd815bb9640', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'eb645c44cde2c175892ed31326d71897e3a5062c' })));
+            size: "md", emphasis: "lower", "aria-label": this.open ? 'Hide calendar' : 'Show calendar', onClick: this.toggleCalendar, tabIndex: this.disabled ? -1 : 0 })), index.h("slot", { key: '86f2a31011329a8b4623e9d231fe71ecd4af3988', name: "after-input" })), index.h("div", { key: 'b64e9f05ddb5d6c7d07712a81bf9e71a7950b3bf', slot: "content" }, index.h("nv-calendar", { key: '1a69d64fda2e7fee2bcb541a931b2f77ecaa5c07', onSingleDateChange: this.handleSingleDateChange.bind(this), dateFormat: this.dateFormat, singleValue: this.singleValue, 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, onValueChanged: this.handleCalendarValueChanged }))), ((this.description && this.description.length > 0) ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '976bd06dbf7ead369aaa26e82168cff22fdc2bd6', class: "description" }, index.h("slot", { key: 'd3d91937cc4fa7dcd711ceda3f366c80449b2685', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'df701c4d66010eec74ebe9c4207e3ead7fe1d5cc', hidden: !this.error, class: "error-description" }, this.el.querySelector('[slot="error-description"]') ? (index.h("slot", { name: "error-description" })) : (this.errorDescription))), index.h("slot", { key: 'c2822d9f38149922f18fd23cc6e52d9a70a2f217' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -379,6 +425,6 @@ const NvFielddate = class {
         "open": ["handleOpenChange"]
     }; }
 };
-NvFielddate.style = NvFielddateStyle0;
+NvFielddate.style = nvFielddateCss;
 
 exports.nv_fielddate = NvFielddate;