@nova-design-system/nova-react 3.24.0 → 3.26.0

package/dist/cjs/{nv-fieldslider.entry-DnvmxxYY.js → nv-fieldslider.entry-CpVbxkpo.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-kU2nW5aN.js');
+var index = require('./index-BeFrXZol.js');
 var clsxChV9xqsO = require('./clsx-ChV9xqsO-BtxeOLZW.js');
 var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
 require('@stencil/react-output-target/runtime');
@@ -233,7 +233,7 @@ const FieldInput = props => {
     return hasField ? (index.h("div", { class: clsxChV9xqsO.clsx(!hasField && 'hidden-input') }, index.h("nv-fieldnumber", { id: inputId, value: fieldValue, min: min, max: max, step: step, disabled: disabled, readonly: readonly, name: inputName, ...dataAttrs, onInput: e => e.stopPropagation(), onValueChanged: handleValueChanged }, labelBeforeValue && (index.h("span", { class: "label-before", slot: "leading-input" }, labelBeforeValue)), labelAfterValue && (index.h("span", { class: "label-after", slot: "trailing-input" }, labelAfterValue))))) : (index.h("input", { id: inputId, type: "hidden", value: fieldValue, disabled: disabled, readonly: readonly, name: inputName }));
 };
 
-const nvFieldsliderCss = "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-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer;touch-action:none;user-select:none}nv-fieldslider .slider-container .track-container .track::after{content:\"\";position:absolute;top:calc(-13px + var(--slider-track-height) / 2);left:0;width:100%;height:26px;background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;touch-action:none;user-select:none;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:after{content:\"\";position:absolute;top:-7px;left:-7px;width:calc(100% + 14px);height:calc(100% + 14px);background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%);backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform-style:preserve-3d}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:\"\";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px;backface-visibility:hidden;will-change:transform, opacity}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container{width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input{}nv-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.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-fieldslider>.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-fieldslider>.error-description[hidden]{display:none}";
+const nvFieldsliderCss = () => `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-fieldslider{--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-fieldslider .slider-container{width:100%;display:flex;flex-direction:row;align-items:center;gap:var(--form-gap-x)}nv-fieldslider .slider-container .track-container{position:relative;flex:1;height:calc(var(--slider-handler-size-min) + 0.25rem);padding:calc(var(--slider-handler-size-min) / 2) 0}nv-fieldslider .slider-container .track-container .track{position:relative;height:var(--slider-track-height);background:var(--components-slider-track-background);border-radius:var(--slider-track-radius);cursor:pointer;touch-action:none;user-select:none}nv-fieldslider .slider-container .track-container .track::after{content:"";position:absolute;top:calc(-13px + var(--slider-track-height) / 2);left:0;width:100%;height:26px;background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .track-range{position:absolute;top:0;height:var(--slider-track-height);background:var(--components-slider-track-filled-default);border-radius:var(--slider-track-radius);pointer-events:none}nv-fieldslider .slider-container .track-container .track .thumb{position:absolute;top:50%;width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);background:#ffffff;border:var(--slider-handler-stroke) solid var(--components-slider-track-filled-default);border-radius:50%;transform:translate(-50%, -50%);z-index:1;cursor:grab;touch-action:none;user-select:none;transition:width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s}nv-fieldslider .slider-container .track-container .track .thumb:after{content:"";position:absolute;top:-7px;left:-7px;width:calc(100% + 14px);height:calc(100% + 14px);background:rgba(255, 255, 255, 0)}nv-fieldslider .slider-container .track-container .track .thumb:hover{width:var(--slider-handler-size-max);height:var(--slider-handler-size-max);border-color:var(--components-slider-track-filled-hover)}nv-fieldslider .slider-container .track-container .track .thumb:focus{width:var(--slider-handler-size-min);height:var(--slider-handler-size-min);border-color:var(--components-slider-track-filled-focus);outline:calc(var(--focus-outline-stroke) * 1) solid var(--color-focus-brand);outline-offset:calc(var(--focus-outline-offset) * 1);transition:outline;background:var(--components-slider-handler-background-focus)}nv-fieldslider .slider-container .track-container .track .thumb:active{cursor:grabbing;background:var(--components-slider-handler-background-hover)}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip{position:absolute;top:25px;left:50%;background-color:var(--components-tooltip-background);color:var(--components-tooltip-text);padding:5px;border-radius:var(--tooltip-radius);font-size:var(--tooltip-font-size);z-index:10;pointer-events:none;user-select:none;opacity:0;transition:opacity 0.3s ease-in-out;transform:translateX(-50%);backface-visibility:hidden;-webkit-font-smoothing:antialiased;transform-style:preserve-3d}nv-fieldslider .slider-container .track-container .track .thumb .thumb-tooltip:after{content:"";background:var(--components-tooltip-background);box-shadow:none;border:none;position:absolute;border-bottom-color:transparent;border-right-color:transparent;width:6px;height:6px;transform:rotate(45deg);border-radius:1px;top:-3px;left:50%;margin-left:-3px;backface-visibility:hidden;will-change:transform, opacity}nv-fieldslider .slider-container .track-container .track .thumb:hover .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:active .thumb-tooltip,nv-fieldslider .slider-container .track-container .track .thumb:focus .thumb-tooltip{opacity:1}nv-fieldslider .slider-container .track-container .track-ticks{position:relative;height:1rem;margin-top:0.25rem}nv-fieldslider .slider-container .track-container .track-ticks .track-tick{position:absolute;top:0;width:var(--slider-tick-height);height:var(--slider-tick-height);background:var(--components-form-field-border-default);border-radius:50%;transform:translate(-50%, 0);pointer-events:none}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:first-of-type{transform:translate(0, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick:last-of-type{transform:translate(-100%, 0)}nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{position:absolute;top:calc(var(--slider-tick-height) + 0.25rem);left:50%;color:var(--components-form-field-border-default);transform:translateX(-50%);white-space:nowrap}.track-tick-first nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:0;transform:translateX(0)}.track-tick-last nv-fieldslider .slider-container .track-container .track-ticks .track-tick .tick-label{left:100%;transform:translateX(-100%)}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldslider .slider-container .input-container:focus-within,nv-fieldslider .slider-container .input-container:focus-within:hover,nv-fieldslider .slider-container .input-container:focus,nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldslider .slider-container .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldslider .slider-container .input-container{width:90px;flex-grow:unset}nv-fieldslider .slider-container .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldslider .slider-container .input-container input:focus{outline:none}nv-fieldslider .slider-container .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-fieldslider .slider-container .input-container input{}nv-fieldslider .slider-container .input-container input[type=password]::-ms-clear,nv-fieldslider .slider-container .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldslider .slider-container .input-container .label-before{margin-left:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider .slider-container .input-container .label-after{margin-right:var(--spacing-2);color:var(--components-form-field-icon-default)}nv-fieldslider[fluid]:not([fluid=false]){max-width:unset}nv-fieldslider[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-fieldslider[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-fieldslider[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-fieldslider[readonly]:not([readonly=false]) .track,nv-fieldslider[readonly]:not([readonly=false]) .thumb{cursor:default}nv-fieldslider 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-fieldslider nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldslider[hide-label]:not([hide-label=false]) label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}nv-fieldslider[has-field]:not([has-field=false]) .thumb-tooltip{display:none}nv-fieldslider>.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-fieldslider>.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-fieldslider>.error-description[hidden]{display:none}`;
 
 const NvFieldslider = class {
     constructor(hostRef) {
@@ -691,26 +691,44 @@ const NvFieldslider = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (index.h(index.Host, { key: '554f94dc79adf1edbfa80bdc17bb41af26da871c' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '98ffb9c9332a9fef9c37088b48b80eaec2930417', htmlFor: this.startInputId }, index.h("slot", { key: '084d8c1fbdc91d8bd26016489b6ef86a3c334a6b', name: "label" }, this.label))), index.h("div", { key: 'ce62bedafa8b20ce952944b61638f61585fc7044', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: 'd4dd3f3cc00a19b166b27158c30f193096553127', class: "track-container" }, index.h("div", { key: 'd37bd4c7463d3a987d300082f2db4519af7fd652', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: '0c3b4b90851cb8cf80b3803fbb5e85f8e3d98aed', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
+        return (index.h(index.Host, { key: '34ffffbcfefbeac4050ced2db000a32f67222376' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: 'b07225ad89ae0f85d3cd2b1ee203b30e6abd7e57', htmlFor: this.startInputId }, index.h("slot", { key: 'b1f39009872c4a38dae38286a036bb69f8ba6f62', name: "label" }, this.label))), index.h("div", { key: '0013570dd6edbcb7c0f4a6ea32a550b6d9432271', class: "slider-container" }, this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 0, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : null, index.h("div", { key: 'ca639497db1b588fcf0d4fad5f548a53ff1ee353', class: "track-container" }, index.h("div", { key: '6a8d1eb4bddff4d5ca9760729cfa1ce27b887a65', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (index.h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (index.h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, step: this.step, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), index.h(TickMarks, { key: '134bf7de84a7572b1f033e4e17e0e435e841eb42', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, index: 1, inputId: this.endInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name, endName: this.endName })) : (index.h(FieldInput, { range: this.range, hasField: this.hasField, value: this.valueInternal, rangeValue: this.rangeValueInternal, inputId: this.startInputId, min: this.min, max: this.max, step: this.step, disabled: this.disabled, readonly: this.readonly, onInput: this.handleFieldChange, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue, name: this.name }))), (this.success ||
             this.description ||
-            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '7674d49cfe01b7ac5be21c3cbc2ff4e625c27298', class: "description" }, this.success && (index.h("nv-icon", { key: '7342bca8ef60d227cd630affc37815bafa9736f7', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: 'c9221aadf6e2328bc5781d74c044b6911221dbe8', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: 'b0188dce4fe8718a90715049d2af71fff7e9c512', class: "description" }, this.success && (index.h("nv-icon", { key: 'cd2fd95080cd96ed516f9caa3b078ad481ee9912', name: "circle-check", class: "validation", size: "md" })), index.h("slot", { key: 'd5dbc5f8bb6b66cef814a58e00aa07e7b9e07a23', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '34f339f8e25ffb2c481b2472939d9ef14292c2f9', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '6a941595fc494afb7e580a98f968a628371b1a33', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: 'c77b3881b302a65c43098479aa445751314c2714', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '67a78749af19d44d553581ff0042e40c067dd44c', class: "error-description", hidden: !this.error }, this.error && (index.h("nv-icon", { key: '4aac6d31b273cee32d235b7c53fd4cac6af4c253', name: "alert-circle", class: "validation", size: "md" })), index.h("slot", { key: '9faa92d59e9fde524d1fb41e30b30178d9c12c4b', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
     static get watchers() { return {
-        "value": ["onValueChange"],
-        "min": ["onConfigChange"],
-        "max": ["onConfigChange"],
-        "step": ["onConfigChange"],
-        "ticks": ["onConfigChange"],
-        "showTicks": ["onConfigChange"],
-        "snap": ["onConfigChange"],
-        "snapTicks": ["onConfigChange"],
-        "range": ["onRangeChange"]
+        "value": [{
+                "onValueChange": 0
+            }],
+        "min": [{
+                "onConfigChange": 0
+            }],
+        "max": [{
+                "onConfigChange": 0
+            }],
+        "step": [{
+                "onConfigChange": 0
+            }],
+        "ticks": [{
+                "onConfigChange": 0
+            }],
+        "showTicks": [{
+                "onConfigChange": 0
+            }],
+        "snap": [{
+                "onConfigChange": 0
+            }],
+        "snapTicks": [{
+                "onConfigChange": 0
+            }],
+        "range": [{
+                "onRangeChange": 0
+            }]
     }; }
 };
-NvFieldslider.style = nvFieldsliderCss;
+NvFieldslider.style = nvFieldsliderCss();
 
 exports.nv_fieldslider = NvFieldslider;

package/dist/cjs/nv-fieldtext.entry-BpbG4WHv.js

@@ -0,0 +1,163 @@
+'use strict';
+
+var index = require('./index-BeFrXZol.js');
+var v4BdYh22OP = require('./v4-BdYh22OP-C1vaJ4yP.js');
+require('@stencil/react-output-target/runtime');
+require('react');
+require('react-dom');
+
+const nvFieldtextCss = () => `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-fieldtext{--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-fieldtext[fluid]:not([fluid=false]){max-width:unset}nv-fieldtext[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-fieldtext[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-fieldtext[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-fieldtext[required]:not([required=false]) label::after,nv-fieldtext[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtext>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-fieldtext>.input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtext>.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-fieldtext>.input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtext>.input-wrapper .input-container:focus-within,nv-fieldtext>.input-wrapper .input-container:focus-within:hover,nv-fieldtext>.input-wrapper .input-container:focus,nv-fieldtext>.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-fieldtext>.input-wrapper .input-container:has(input:read-only){background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtext>.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-fieldtext>.input-wrapper .input-container>[slot=leading-input]{display:block;margin-left:var(--form-field-padding-x)}nv-fieldtext>.input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height);width:100%}nv-fieldtext>.input-wrapper .input-container input:focus{outline:none}nv-fieldtext>.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-fieldtext>.input-wrapper .input-container input{}nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-clear,nv-fieldtext>.input-wrapper .input-container input[type=password]::-ms-reveal{display:none;width:0;height:0}nv-fieldtext>.input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);margin-right:var(--form-gap-x)}nv-fieldtext>.input-wrapper .input-container>[slot=trailing-input]{display:block;margin-right:var(--form-field-padding-x)}nv-fieldtext>.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-fieldtext>.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 NvFieldtext = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4BdYh22OP.v4();
+        /**
+         * The type prop lets you specify what kind of information the input field
+         * should accept. Choose 'text' for general words or sentences, 'tel' for
+         * phone numbers, or 'email' for email addresses. This makes sure users get
+         * the right keyboard and validation for what they need to enter.
+         */
+        this.type = 'text';
+        /**
+         * The disabled prop lets you turn off the input field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the input field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
+         */
+        this.required = false;
+        /**
+         * Marks the input field as required for accessibility purposes without triggering
+         * native HTML validation. Use this when implementing custom validation logic.
+         * @note When set, this uses `aria-required` instead of the native `required` attribute.
+         * This allows developers to implement custom validation while maintaining accessibility.
+         * @note If this prop is not explicitly set, the component will check for the HTML attribute
+         * 'aria-required' directly to determine if it should be applied.
+         */
+        this.ariaRequiredAttr = false;
+        /**
+         * Alters the input field’s appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * When used with the email input type, this prop enables the field to accept
+         * multiple email addresses. Users can enter several addresses, separating
+         * each one with a comma, allowing the form to handle multiple recipients.
+         */
+        this.multiple = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        //#endregion EVENTS
+        /****************************************************************************/
+        //#region METHODS
+        /**
+         * Handles the input event on the input element.
+         * Emits the inputChanged event with the new value.
+         * @param {Event} event - Event object of the input event.
+         */
+        this.handleInput = (event) => {
+            const input = event.target;
+            this.value = input.value;
+            this.valueChanged.emit(input.value);
+        };
+        /**
+         * Handles focus when the input container is clicked.
+         */
+        this.handleInputContainerClick = () => {
+            this.inputElement.focus();
+        };
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.textInputType) {
+            this.type = this.textInputType;
+        }
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    //#endregion LIFECYCLE
+    /****************************************************************************/
+    //#region RENDER
+    render() {
+        // Check aria-required from multiple sources:
+        // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set
+        // 2. JavaScript prop (when prop is explicitly set via JavaScript)
+        // We use hasAttribute to determine if the attribute was explicitly set by the user,
+        // since the prop now defaults to false (to maintain Blazor compatibility)
+        const hasAriaRequiredAttr = this.el.hasAttribute('aria-required') ||
+            this.el.hasAttribute('aria-required-attr');
+        const ariaRequiredFromAttr = hasAriaRequiredAttr
+            ? this.el.getAttribute('aria-required') ||
+                this.el.getAttribute('aria-required-attr')
+            : null;
+        // Use aria-required if the attribute was explicitly set
+        // With reflect: true, setting the prop will also set the attribute
+        const useAriaRequired = hasAriaRequiredAttr;
+        // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)
+        // If attribute doesn't exist, the prop was never set and we don't use aria-required
+        const ariaRequiredAttrValue = hasAriaRequiredAttr
+            ? ariaRequiredFromAttr
+            : null;
+        // Determine which attributes to use
+        // If aria-required HTML attribute is present, use it (convert string to boolean)
+        // If required is set and aria-required is not "false", use native required
+        // If aria-required is "false", don't use native required even if required is set
+        const ariaRequiredValue = useAriaRequired
+            ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
+            : undefined;
+        const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
+        return (index.h(index.Host, { key: '0baf2e0b76bd06018a819a60d2d3a271474d8b26' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '915a355b200bb2eebb44b60b46715c0be57af927', htmlFor: this.inputId }, index.h("slot", { key: 'e915661a6fdf9d7a489b39ac9c41ae368c64764c', name: "label" }, this.label))), index.h("div", { key: '33109ed1f7ddfc38de2606d7b3ac273678a71a82', class: "input-wrapper" }, index.h("slot", { key: 'a93db4a91c9fb313031680c7cd992f501930b5da', name: "before-input" }), index.h("div", { key: '1c56222cf9e1ad0b4242548bb3133b502b890ea7', class: "input-container", onClick: this.handleInputContainerClick }, index.h("slot", { key: 'bcff7d46918f5069e8c512412a6d7120e3204f1f', name: "leading-input" }), index.h("input", { key: '16f7a7230799cccdec45dc5a53939f5fc78f4e24', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), index.h("slot", { key: '446a2dcd683ba6caeb9f1f715890a38cb084d341', name: "trailing-input" }), this.error && (index.h("nv-icon", { key: '2e2787b8ac5c39db8a8212dffb7ed545b2d35084', name: "alert-circle", class: "validation", size: "md" })), this.success && (index.h("nv-icon", { key: '88e507f5003fc9d2967968b6938b51731dbb5d09', name: "circle-check", class: "validation", size: "md" }))), index.h("slot", { key: '3d471559b8630cfbcb39b17477beb62bf707bea7', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '5e6bb278db247a1f94e27f6401519821a9fc571b', class: "description" }, index.h("slot", { key: '13483a478681d97b00d06664fee40c35f81eb29f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: 'c91425b592a094661d4c76316b060877861d85f5', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'f371e111411bf60d331e3a0762135d62010ad06c', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+};
+NvFieldtext.style = nvFieldtextCss();
+
+exports.nv_fieldtext = NvFieldtext;

package/dist/cjs/nv-fieldtextarea.entry-BA_RApYN.js

@@ -0,0 +1,245 @@
+'use strict';
+
+var index = require('./index-BeFrXZol.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 nvFieldtextareaCss = () => `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-fieldtextarea{--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-fieldtextarea[fluid]:not([fluid=false]){max-width:unset}nv-fieldtextarea[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-fieldtextarea[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-fieldtextarea[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-fieldtextarea[required]:not([required=false]) label::after,nv-fieldtextarea[aria-required=true] label::after{content:"*";color:var(--components-form-text-required);font-weight:var(--font-weight-high-emphasis)}nv-fieldtextarea 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-fieldtextarea .textarea-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldtextarea .textarea-wrapper .textarea-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldtextarea .textarea-wrapper .textarea-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldtextarea .textarea-wrapper .textarea-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldtextarea .textarea-wrapper .textarea-container:has(textarea:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar{width:6px;height:6px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track{background-color:var(--color-level-10-background);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb{background-color:var(--color-gray-200);border-radius:9999px}nv-fieldtextarea .textarea-wrapper .textarea-container textarea{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:var(--font-weight-medium-emphasis);line-height:var(--form-field-line-height)}nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus{outline:none}nv-fieldtextarea .textarea-wrapper .textarea-container textarea::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-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldtextarea .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-fieldtextarea .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 NvFieldtextarea = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.valueChanged = index.createEvent(this, "valueChanged", 3);
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4BdYh22OP.v4();
+        /**
+         * The disabled prop lets you turn off the textarea field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to#
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the textarea field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the textarea field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         * @note This uses the native HTML `required` attribute, which triggers browser validation.
+         */
+        this.required = false;
+        /**
+         * Marks the textarea field as required for accessibility purposes without triggering
+         * native HTML validation. Use this when implementing custom validation logic.
+         * @note When set, this uses `aria-required` instead of the native `required` attribute.
+         * This allows developers to implement custom validation while maintaining accessibility.
+         * @note If this prop is not explicitly set, the component will check for the HTML attribute
+         * 'aria-required' directly to determine if it should be applied.
+         */
+        this.ariaRequiredAttr = false;
+        /**
+         * Alters the textarea field's appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the textarea field’s appearance to indicate successful textarea or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * The number of visible text lines for the control. The default is 3. This
+         * can be useful when you want to limit the size of the textarea field or when
+         * you want to make the textarea field smaller to fit a specific layout. The
+         * textarea field will expand vertically to fit the text as the user types.
+         */
+        this.rows = 3;
+        /**
+         * Controls the resize property of a textarea. It can be set to none, both,
+         * horizontal, or vertical. The default is vertical.
+         */
+        this.resize = 'vertical';
+        /**
+         * Enable this to make the textarea automatically resize as the user types,
+         * adjusting the height to fit the content. For the best experience, avoid
+         * vertical resizing, as it's controlled by this feature. Horizontal resizing
+         * can still be allowed if desired.
+         */
+        this.autosize = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on a <textarea>
+         * element.
+         */
+        this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
+        //#endregion WATCHERS
+        /****************************************************************************/
+        //#region METHODS
+        this.handleTextarea = (event) => {
+            const textarea = event.target;
+            this.value = textarea.value;
+            this.valueChanged.emit(textarea.value);
+        };
+        this.handleTextareaContainerClick = () => {
+            this.textareaElement.focus();
+        };
+    }
+    //#endregion EVENTS
+    /****************************************************************************/
+    //#region WATCHERS
+    /**
+     * If autosize is true, we need to make sure to update the min-height when
+     * the rows change.
+     */
+    rowsChanged() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    /**
+     * If autosize is true, we need to make sure to update the height and
+     * min-height, if false, we need to remove the height property.
+     */
+    autosizeChanged() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+        else {
+            this.textareaElement?.style.removeProperty('height');
+        }
+    }
+    /**
+     * Make sure to adjust the height of the textarea when the value changes
+     * programmatically or by typing when autosize is on.
+     */
+    handleValueChange() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    adjustTextareaHeight() {
+        if (this.textareaElement && this.autosize) {
+            /**
+             * A single requestAnimationFrame ensures that the DOM has applied any
+             * pending changes (e.g., value updates or attribute changes) before
+             * measuring. All style reads and writes happen synchronously within
+             * this callback so the browser never paints the intermediate
+             * "height: auto" state, avoiding a visible flash.
+             */
+            requestAnimationFrame(() => {
+                this.textareaElement.style.height = 'auto';
+                const computedStyle = window.getComputedStyle(this.textareaElement);
+                const lineHeight = parseFloat(computedStyle.lineHeight);
+                const paddingTop = parseFloat(computedStyle.paddingTop);
+                const paddingBottom = parseFloat(computedStyle.paddingBottom);
+                const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+                const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+                // Calculate min-height based on rows
+                const minHeight = lineHeight * this.rows +
+                    paddingTop +
+                    paddingBottom +
+                    borderTopWidth +
+                    borderBottomWidth;
+                this.textareaElement.style.minHeight = `${minHeight}px`;
+                if (this.maxAutoHeight &&
+                    this.textareaElement.scrollHeight > this.maxAutoHeight) {
+                    this.textareaElement.style.height = `${this.maxAutoHeight}px`;
+                    this.textareaElement.style.overflowY = 'auto';
+                }
+                else {
+                    this.textareaElement.style.height =
+                        this.textareaElement.scrollHeight + 'px';
+                    this.textareaElement.style.overflowY = 'hidden';
+                }
+            });
+        }
+    }
+    //#endregion METHODS
+    /****************************************************************************/
+    //#region LIFECYCLE
+    componentWillRender() {
+        if (this.message) {
+            this.description = this.message;
+        }
+        if (this.validation) {
+            this.errorDescription = this.validation;
+            this.error = true;
+        }
+    }
+    componentDidLoad() {
+        if (this.autosize) {
+            this.adjustTextareaHeight();
+        }
+    }
+    //#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: '9d7aed8625b1cfa103e275495d40116b8f1314c3' }, (this.label || this.el.querySelector('[slot="label"]')) && (index.h("label", { key: '6609cc39f3809b833a4c9755c487ba3eef05a5c4', htmlFor: this.inputId }, index.h("slot", { key: '277484af20e4054be5491576ffdfb95ca0f23a79', name: "label" }, this.label))), index.h("div", { key: '6224c47beaee1e15ea9277a1f69f4ac5ea496cb6', class: "textarea-wrapper" }, index.h("div", { key: '6dd7868aa65091dd79c34497dec020945d56f925', class: "textarea-container", onClick: this.handleTextareaContainerClick }, index.h("textarea", { key: '2548dab5d8b387d37036a07c4a76b567c84a8b59', id: this.inputId, ref: e => (this.textareaElement = e), placeholder: this.placeholder, autofocus: this.autofocus, name: this.name, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), maxlength: this.maxlength, minlength: this.minlength, autocomplete: "off", value: this.value, onInput: this.handleTextarea, rows: this.rows, class: clsxChV9xqsO.clsx(this.resize === 'none' && 'resize-none', this.resize === 'vertical' && 'resize-y', this.resize === 'horizontal' && 'resize-x', this.resize === 'both' && 'resize') }))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (index.h("div", { key: '10ba44a9c4b83db00d00c2a4e791c68836413aac', class: "description" }, index.h("slot", { key: '5015686b48e185707376008306c204432199cde1', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (index.h("div", { key: '312502a84e08fdacbe77cc55f4e91e0b4122c82b', hidden: !this.error, class: "error-description" }, index.h("slot", { key: 'b837f0784d75b8d0df04e025ee8f9a309c6f46d3', name: "error-description" }, this.errorDescription)))));
+    }
+    static get formAssociated() { return true; }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "rows": [{
+                "rowsChanged": 0
+            }],
+        "autosize": [{
+                "autosizeChanged": 0
+            }],
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+NvFieldtextarea.style = nvFieldtextareaCss();
+
+exports.nv_fieldtextarea = NvFieldtextarea;