@nova-design-system/nova-webcomponents 3.2.0 → 3.4.0

package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.js

@@ -105,9 +105,9 @@ export class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '79c3035769b9053d53d62526b2e0d430d5f944ae' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '2341f2b9ae8c5acb8ce48e15caae8a629a1c0333', htmlFor: this.inputId }, h("slot", { key: 'ad2301f92adf58c460d4ca76681330b133db2f33', name: "label" }, this.label))), h("div", { key: 'c12f8401a41c6761686b74e725dd91911eaafbb0', class: "input-wrapper" }, h("slot", { key: 'badd6d65663029bc3252ef0818bb1c6220d01ddf', name: "before-input" }), h("div", { key: '0ffb2332657f893c00fe2ca68f4bbbd622bb31f1', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'afa1daa6fab0f2a46ab46f0c99e4e4cf10d7a1fe', name: "leading-input" }), h("input", { key: 'cc567c4a7fe51a24a99c7a471294d7f6086d8b2d', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (h("nv-icon", { key: '7087d6e35b30de786f3ded46fc74dc9987af6afa', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: '6fe5e3936ef42c79ed8a5b8a959a22ecbbe52fd6', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: 'eab04665ad3394860ad30e366eaf18ae4aee445a', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '5bc5bd055301bf5fe1b801c2091cd3307c79104f', class: "description" }, h("slot", { key: '133ebfcb219aaa0c5fd64e4442c1125b26c623b4', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '2a319732006d29becaa602ae16f2d8e885214931', hidden: !this.error, class: "error-description" }, h("slot", { key: 'e6e75fe487745820b1b8d3de1ed52df8aa9652d4', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'fb277f244fb9f92e09cf77463c3a59b1a7a93095' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '84227c9b8844bcb02917e6f942c206758f2378b8', htmlFor: this.inputId }, h("slot", { key: '36331156c6823f96b017a18a4d134b3a0467e289', name: "label" }, this.label))), h("div", { key: 'babca6f3bf893084259917bfec7434a189bc6a88', class: "input-wrapper" }, h("slot", { key: '7ff461c1b36594cde5e2934b3c4aaa3eaafbea20', name: "before-input" }), h("div", { key: 'ac90041750bfdcc23245c42d7e6c52ae855b4bb5', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '0696566301e7fd935c0316b70b41f15cc68b2276', name: "leading-input" }), h("input", { key: '776db054e9b5fb46b592723fa6b0ad073e0cad93', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), (this.success || this.error) && (h("nv-icon", { key: '73d827ca041e3841b5159dd829769def664a5e8b', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" })), !this.hidePasswordIcon && (h("nv-iconbutton", { key: '7920164504e0834d8e8f0b91a51e4747cbaa0bfb', name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() }))), h("slot", { key: '4c651f834fe546cd75fc6f24ba37f35f3713c004', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '9db3be325ffe22ddaaaf6052d03b0eb5a8decc9f', class: "description" }, h("slot", { key: 'e262fafe3e0d3f1ffbf059eb80d0b0b2128f0c07', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '28571af4f63bdf4a9d7ff558d0d672546765f188', hidden: !this.error, class: "error-description" }, h("slot", { key: '9b3635bec4932601c0b265cfef7851ab48bad289', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldpassword"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldradio/nv-fieldradio.js

@@ -83,9 +83,9 @@ export class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '544fc138c91a08a1359ec0d30e89a9bda07eae94', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '479908232ade17970c3310f3fec173a86ccea67d', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '624094a1d3819f627bdd6f554ee07200ecd4d03f', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8df4721447e7de7d5c1c51880eb5b5a62041910d', htmlFor: this.inputId }, h("slot", { key: '0e14392a7e6a87804d0975a38b6b011f519457ae', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ad635756eb65ebaa6e939d6e1870d196d3bafe2c', class: "description" }, h("slot", { key: '13f720591e43b8532dfc5367089c17dccd9c4e77', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '597cee5e36cd63c209b60b8a533b4c6de8d5ba0e', hidden: !this.error, class: "error-description" }, h("slot", { key: '49e1f0deac817a5c49738110862a7b081672510f', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: '4533a498fbbf7edc20695ac8411dea11355c2bf9', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '0ba25de106a4bb4a3ccf1c5ddf82e60966e59e9f', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: 'c090a6746068f4ab8a8989d0117ec274320918a8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '804bbd45628e20bcfce8005fd0abd6b8f5ecc677', htmlFor: this.inputId }, h("slot", { key: 'bfe774833365bf51bc1c1be47d960ce04cadaee3', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '99245a0234557bb64887d6f499ffdd4a8b0a03b0', class: "description" }, h("slot", { key: '34bc5919f9bf80fee5a26b4d7dcbf4b2844ef202', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c67be256e429796853146da66aebe0f8ea80a131', hidden: !this.error, class: "error-description" }, h("slot", { key: '241a84a4be6028850e42e96305413e8c3298acf3', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldradio"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldselect/nv-fieldselect.css

@@ -1,3 +1,41 @@
+/* TODO: integrate this logic in the proper structure */
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-hover);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .track-range {
+  background: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider .slider-container .track-container:has(.thumb:focus) .thumb {
+  border-color: var(--components-slider-track-filled-focus);
+}
+nv-fieldslider[error] .slider-container .track-container .track .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:hover {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-handler-background-error);
+}
+nv-fieldslider[error] .slider-container .track-container .track .thumb:focus {
+  border-color: var(--components-slider-track-filled-error);
+  outline: calc(var(--focus-outline-stroke) * 1) solid var(--components-slider-track-filled-error);
+  outline-offset: calc(var(--focus-outline-offset) * 1);
+  background-color: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .track-range {
+  background: var(--components-slider-track-filled-error);
+}
+nv-fieldslider[error] .slider-container .track-container:has(.thumb:hover) .thumb {
+  border-color: var(--components-slider-track-filled-error);
+}
+
 nv-fieldselect {
   --nv-field-border-default: var(--components-form-field-border-default);
   --nv-field-border-hover: var(--components-form-field-border-hover);
@@ -133,6 +171,7 @@ nv-fieldselect .select-wrapper .select-container input {
   font-weight: 500;
   line-height: var(--form-field-line-height);
   width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
 }
 nv-fieldselect .select-wrapper .select-container input:focus {
   outline: none;
@@ -147,6 +186,11 @@ nv-fieldselect .select-wrapper .select-container input::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear, nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 nv-fieldselect .select-wrapper .select-container input:read-only {
   opacity: 0.5;
   background-color: var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));

package/dist/collection/components/nv-fieldselect/nv-fieldselect.js

@@ -347,13 +347,13 @@ export class NvFieldselect {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (h(Host, { key: '06d38dd360011d4310d1c63851dc254e8ae47411' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'a0e46209c73e704d8d0f630baace2b1ce0eaed9c', htmlFor: this.inputId }, h("slot", { key: '6a43c979383647415044931d7a4e4d3a24f65921', name: "label" }, this.label))), h("div", { key: 'f2cee6021f85e64bd9d73d984e208903e3fda4c7', class: "select-wrapper" }, h("slot", { key: 'cae1c527e55c18f3e54d9c73390d6f17ccebce77', name: "before-input" }), h("div", { key: 'acb5dcbea269eb7dca558942f36b05c552924cbc', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: 'e5c2a508a1297796f2693c76338c5b5f8e3e149e', name: "leading-input" }), this.internalReadonly && (h("input", { key: '28c38079050912f7d3b744de66ed48351dd890c3', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+        return (h(Host, { key: '3614f589d16ecfe4b7153a57d079b5bde8d14e4f' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd3d222aeece0c0f99141adf9be19b3dfda5095ac', htmlFor: this.inputId }, h("slot", { key: 'd0deb950cdd7784878f2ee7d7e5a382c3aa67620', name: "label" }, this.label))), h("div", { key: '94b1ead9abf988d3a9a944f04c441054e0aeba1f', class: "select-wrapper" }, h("slot", { key: '5e018a64cd9556d67ecc2b9cfb48771f137c10a6', name: "before-input" }), h("div", { key: 'd52813fc9e534463b50da23b8a5a3e5d57aa2c3a', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: 'dda40c57c5be6d10a20cb11cfa8eaa8398f84d6c', name: "leading-input" }), this.internalReadonly && (h("input", { key: '37b22a058b25867d7c4c5c7675288f7d4a368263', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` })), h("select", { key: 'c409a9e0a26797981640092eb67b949c7d8f0cff', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                : `${this.inputId}-description` })), h("select", { key: '064eec6725beeba26cc5ded5fb21237b55d40cff', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, autofocus: this.autofocus, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
                 ? `${this.inputId}-error`
-                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: 'a2402ea8d832e5612510dce7a3f50148b4edf39f', class: "select-icons" }, this.error && (h("nv-icon", { key: 'e291bff25fa6f06d3b27c3aaa805b46f674e1614', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'ce98cb12347722926677d9c3fc6f02e35a9c84e4', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'e7fe760a5fa84ab0548ebd736a44da04908a4c07', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: 'd6253e2d56d4095bbe9ab12ca34ff28e06bd6b6d', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '703ad3ad8538ceab3c9eb03ae90c3552e1b6bf23', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '010bbb23d2b947ed55c219ac64532f7dfd4f43cc', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '70b696ec8f8badd4e064506eeba268755c9f2c09', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: '2ec5af60d2fca9a8f5baf59406a4661905aeab05', name: "error-description" }, this.errorDescription)))));
+                : `${this.inputId}-description` }, this.parsedOptions.length > 0 ? (this.parsedOptions.map(option => (h("option", { value: option.value, selected: option.selected, disabled: option.disabled }, option.label)))) : (h("slot", null))), h("div", { key: '02e2e941e3d8efe4a1a5ef3e2cf95adcdaaa25e7', class: "select-icons" }, this.error && (h("nv-icon", { key: '481df68e62c2438db29aa3591180353f140d506d', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '2b7c05697786bb684f7be9aba49641d0bd4b17e2', name: "circle-check", class: "validation", size: "md" })), !this.multiple && (h("nv-iconbutton", { key: 'ee340692540948b768ff8d7ad817879f1fa892c4', name: "chevron-down", size: "md", emphasis: "lower", tabindex: -1 })))), h("slot", { key: '9d638182d2f9808d6cf454d56c70cb7e45e520ab', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0b5d93842494d99c7eeb5cde17bc266de14ebc79', class: "description", id: `${this.inputId}-description` }, h("slot", { key: '011365d39b5e18fda111f257461bedab1e4ddb5e', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '15c238fe1651bab3cfe0088837b8f58beec52e28', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'edd7d6187957e34646cc270dcc1485f73d634e52', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldselect"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-fieldslider/nv-fieldslider.docs.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldsliderDocs = {
     component: 'nv-fieldslider',
-    badge: 'danger',
+    badge: 'beta',
     stories: [
         {
             name: 'Default',
@@ -12,7 +12,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.labelBeforeValue),
             args: {
                 label: 'Price',
-                value: '50',
+                value: [50],
                 labelBeforeValue: '$',
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
@@ -21,7 +21,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.labelAfterValue),
             args: {
                 label: 'Distance',
-                value: '25',
+                value: [25],
                 labelAfterValue: 'km',
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
@@ -33,7 +33,7 @@ const NvFieldsliderDocs = {
                 label: 'Temperature (°C)',
                 min: -20,
                 max: 40,
-                value: '22',
+                value: [22],
                 labelAfterValue: '°C',
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
@@ -44,7 +44,7 @@ const NvFieldsliderDocs = {
                 label: 'Volume (increments of 5)',
                 min: 0,
                 max: 100,
-                value: '25',
+                value: [25],
                 step: 5,
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
@@ -55,7 +55,7 @@ const NvFieldsliderDocs = {
                 label: 'Snapping Slider',
                 min: 0,
                 max: 100,
-                value: '35',
+                value: [35],
                 step: 5,
                 snap: true,
             },
@@ -67,7 +67,7 @@ const NvFieldsliderDocs = {
                 label: 'Volume',
                 min: 0,
                 max: 100,
-                value: '40',
+                value: [40],
                 step: 10,
                 snap: true,
                 showTicks: true,
@@ -80,7 +80,7 @@ const NvFieldsliderDocs = {
                 label: 'Temperature (°C)',
                 min: 0,
                 max: 100,
-                value: '7',
+                value: [7],
                 step: 1,
                 labelAfterValue: '°C',
                 ticks: [
@@ -97,7 +97,7 @@ const NvFieldsliderDocs = {
                 label: 'Custom Pricing Tiers ($)',
                 min: 0,
                 max: 100,
-                value: '10',
+                value: [10],
                 step: 1,
                 snapTicks: true,
                 ticks: [
@@ -117,7 +117,7 @@ const NvFieldsliderDocs = {
                 label: 'Price',
                 min: 0,
                 max: 1000,
-                value: '550',
+                value: [550],
                 step: 10,
                 hasField: true,
             },
@@ -129,7 +129,7 @@ const NvFieldsliderDocs = {
                 label: 'Price Range ($)',
                 min: 0,
                 max: 1000,
-                value: '200,800',
+                value: [200, 800],
                 step: 50,
                 range: true,
                 labelAfterValue: '$',
@@ -143,7 +143,7 @@ const NvFieldsliderDocs = {
                 label: 'Filter by Price ($)',
                 min: 0,
                 max: 1000,
-                value: '250,750',
+                value: [250, 750],
                 step: 10,
                 range: true,
                 hasField: true,
@@ -156,7 +156,7 @@ const NvFieldsliderDocs = {
             args: {
                 label: 'Volume Level',
                 hideLabel: true,
-                value: '75',
+                value: [75],
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
         },
@@ -164,7 +164,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.error),
             args: {
                 label: 'Budget ($)',
-                value: '1500,20000',
+                value: [1500, 20000],
                 min: 0,
                 max: 100000,
                 range: true,
@@ -177,7 +177,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.errorDescription),
             args: {
                 label: 'Budget ($)',
-                value: '1500,20000',
+                value: [1500, 20000],
                 min: 0,
                 max: 100000,
                 range: true,
@@ -191,7 +191,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.success),
             args: {
                 label: 'Target Achieved',
-                value: '30,70',
+                value: [30, 70],
                 range: true,
                 min: 0,
                 max: 100,
@@ -203,7 +203,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.disabled),
             args: {
                 label: 'Settings (Locked)',
-                value: '30',
+                value: [30],
                 disabled: true,
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
@@ -212,7 +212,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.readonly),
             args: {
                 label: 'Current Progress',
-                value: '65',
+                value: [65],
                 readonly: true,
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
@@ -221,7 +221,7 @@ const NvFieldsliderDocs = {
             name: nameof(x => x.fluid),
             args: {
                 label: 'Full Width Slider',
-                value: '50',
+                value: [50],
                 fluid: true,
             },
             template: h("nv-fieldslider", { "data-storybook-args": true }),
@@ -231,7 +231,7 @@ const NvFieldsliderDocs = {
             description: 'Content to be placed as the label, will override the label prop.',
             args: {
                 label: 'Original Label',
-                value: '45',
+                value: [45],
             },
             template: (h("nv-fieldslider", { "data-storybook-args": true }, h("span", { slot: "label" }, "Custom Label"))),
         },
@@ -241,7 +241,7 @@ const NvFieldsliderDocs = {
             args: {
                 label: 'Description Example',
                 description: 'Original description',
-                value: '60',
+                value: [60],
             },
             template: (h("nv-fieldslider", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
         },
@@ -251,7 +251,7 @@ const NvFieldsliderDocs = {
             args: {
                 label: 'Error Description Example',
                 errorDescription: 'Original error description',
-                value: '150',
+                value: [150],
                 min: 0,
                 max: 100,
                 error: true,

package/dist/collection/components/nv-fieldslider/nv-fieldslider.docs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldslider.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldslider/nv-fieldslider.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldsliderDocs: NovaDocs<Components.NvFieldslider> = {\n  component: 'nv-fieldslider',\n  badge: 'danger',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelBeforeValue),\n      args: {\n        label: 'Price',\n        value: '50',\n        labelBeforeValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelAfterValue),\n      args: {\n        label: 'Distance',\n        value: '25',\n        labelAfterValue: 'km',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'MinMax',\n      description: 'Slider with custom min/max range and initial value.',\n      args: {\n        label: 'Temperature (°C)',\n        min: -20,\n        max: 40,\n        value: '22',\n        labelAfterValue: '°C',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.step),\n      args: {\n        label: 'Volume (increments of 5)',\n        min: 0,\n        max: 100,\n        value: '25',\n        step: 5,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snap),\n      args: {\n        label: 'Snapping Slider',\n        min: 0,\n        max: 100,\n        value: '35',\n        step: 5,\n        snap: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.showTicks),\n      args: {\n        label: 'Volume',\n        min: 0,\n        max: 100,\n        value: '40',\n        step: 10,\n        snap: true,\n        showTicks: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.ticks),\n      args: {\n        label: 'Temperature (°C)',\n        min: 0,\n        max: 100,\n        value: '7',\n        step: 1,\n        labelAfterValue: '°C',\n        ticks: [\n          { value: 10, label: 'Cold' },\n          { value: 80, label: 'Hot' },\n        ],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snapTicks),\n      description:\n        'When snapTicks is true, the slider will snap to custom tick values rather than regular steps.',\n      args: {\n        label: 'Custom Pricing Tiers ($)',\n        min: 0,\n        max: 100,\n        value: '10',\n        step: 1,\n        snapTicks: true,\n        ticks: [\n          { value: 0, label: 'Free' },\n          { value: 10, label: 'Basic' },\n          { value: 30, label: 'Pro' },\n          { value: 75, label: 'Business' },\n          { value: 100, label: 'Enterprise' },\n        ],\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hasField),\n      args: {\n        label: 'Price',\n        min: 0,\n        max: 1000,\n        value: '550',\n        step: 10,\n        hasField: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.range),\n      args: {\n        label: 'Price Range ($)',\n        min: 0,\n        max: 1000,\n        value: '200,800',\n        step: 50,\n        range: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'RangeFields',\n      description: 'Range slider with editable numeric fields for both values.',\n      args: {\n        label: 'Filter by Price ($)',\n        min: 0,\n        max: 1000,\n        value: '250,750',\n        step: 10,\n        range: true,\n        hasField: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hideLabel),\n      args: {\n        label: 'Volume Level',\n        hideLabel: true,\n        value: '75',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.error),\n      args: {\n        label: 'Budget ($)',\n        value: '1500,20000',\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.errorDescription),\n      args: {\n        label: 'Budget ($)',\n        value: '1500,20000',\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        errorDescription: 'Not enough funds!',\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.success),\n      args: {\n        label: 'Target Achieved',\n        value: '30,70',\n        range: true,\n        min: 0,\n        max: 100,\n        success: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.disabled),\n      args: {\n        label: 'Settings (Locked)',\n        value: '30',\n        disabled: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.readonly),\n      args: {\n        label: 'Current Progress',\n        value: '65',\n        readonly: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.fluid),\n      args: {\n        label: 'Full Width Slider',\n        value: '50',\n        fluid: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n        value: '45',\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Example',\n        description: 'Original description',\n        value: '60',\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Example',\n        errorDescription: 'Original error description',\n        value: '150',\n        min: 0,\n        max: 100,\n        error: true,\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldslider>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldsliderDocs;\n"]}
+{"version":3,"file":"nv-fieldslider.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldslider/nv-fieldslider.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldsliderDocs: NovaDocs<Components.NvFieldslider> = {\n  component: 'nv-fieldslider',\n  badge: 'beta',\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelBeforeValue),\n      args: {\n        label: 'Price',\n        value: [50],\n        labelBeforeValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.labelAfterValue),\n      args: {\n        label: 'Distance',\n        value: [25],\n        labelAfterValue: 'km',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'MinMax',\n      description: 'Slider with custom min/max range and initial value.',\n      args: {\n        label: 'Temperature (°C)',\n        min: -20,\n        max: 40,\n        value: [22],\n        labelAfterValue: '°C',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.step),\n      args: {\n        label: 'Volume (increments of 5)',\n        min: 0,\n        max: 100,\n        value: [25],\n        step: 5,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snap),\n      args: {\n        label: 'Snapping Slider',\n        min: 0,\n        max: 100,\n        value: [35],\n        step: 5,\n        snap: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.showTicks),\n      args: {\n        label: 'Volume',\n        min: 0,\n        max: 100,\n        value: [40],\n        step: 10,\n        snap: true,\n        showTicks: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.ticks),\n      args: {\n        label: 'Temperature (°C)',\n        min: 0,\n        max: 100,\n        value: [7],\n        step: 1,\n        labelAfterValue: '°C',\n        ticks: [\n          { value: 10, label: 'Cold' },\n          { value: 80, label: 'Hot' },\n        ],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.snapTicks),\n      description:\n        'When snapTicks is true, the slider will snap to custom tick values rather than regular steps.',\n      args: {\n        label: 'Custom Pricing Tiers ($)',\n        min: 0,\n        max: 100,\n        value: [10],\n        step: 1,\n        snapTicks: true,\n        ticks: [\n          { value: 0, label: 'Free' },\n          { value: 10, label: 'Basic' },\n          { value: 30, label: 'Pro' },\n          { value: 75, label: 'Business' },\n          { value: 100, label: 'Enterprise' },\n        ],\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hasField),\n      args: {\n        label: 'Price',\n        min: 0,\n        max: 1000,\n        value: [550],\n        step: 10,\n        hasField: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.range),\n      args: {\n        label: 'Price Range ($)',\n        min: 0,\n        max: 1000,\n        value: [200, 800],\n        step: 50,\n        range: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'RangeFields',\n      description: 'Range slider with editable numeric fields for both values.',\n      args: {\n        label: 'Filter by Price ($)',\n        min: 0,\n        max: 1000,\n        value: [250, 750],\n        step: 10,\n        range: true,\n        hasField: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.hideLabel),\n      args: {\n        label: 'Volume Level',\n        hideLabel: true,\n        value: [75],\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.error),\n      args: {\n        label: 'Budget ($)',\n        value: [1500, 20000],\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.errorDescription),\n      args: {\n        label: 'Budget ($)',\n        value: [1500, 20000],\n        min: 0,\n        max: 100000,\n        range: true,\n        error: true,\n        errorDescription: 'Not enough funds!',\n        labelAfterValue: '$',\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.success),\n      args: {\n        label: 'Target Achieved',\n        value: [30, 70],\n        range: true,\n        min: 0,\n        max: 100,\n        success: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.disabled),\n      args: {\n        label: 'Settings (Locked)',\n        value: [30],\n        disabled: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.readonly),\n      args: {\n        label: 'Current Progress',\n        value: [65],\n        readonly: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: nameof<Components.NvFieldslider>(x => x.fluid),\n      args: {\n        label: 'Full Width Slider',\n        value: [50],\n        fluid: true,\n      },\n      template: <nv-fieldslider data-storybook-args />,\n    },\n    {\n      name: 'labelSlot',\n      description:\n        'Content to be placed as the label, will override the label prop.',\n      args: {\n        label: 'Original Label',\n        value: [45],\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'descriptionSlot',\n      description:\n        'Content to be placed as the description, will override the description prop.',\n      args: {\n        label: 'Description Example',\n        description: 'Original description',\n        value: [60],\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldslider>\n      ),\n    },\n    {\n      name: 'errorDescriptionSlot',\n      description:\n        'Content to be placed as the error description, will override the errorDescription prop.',\n      args: {\n        label: 'Error Description Example',\n        errorDescription: 'Original error description',\n        value: [150],\n        min: 0,\n        max: 100,\n        error: true,\n      },\n      template: (\n        <nv-fieldslider data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldslider>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldsliderDocs;\n"]}

package/dist/collection/components/nv-fieldslider/nv-fieldslider.js

@@ -6,8 +6,6 @@ import { RangeThumb } from "./partials/range-thumb";
 import { TickMarks } from "./partials/tick-marks";
 import { FieldInput } from "./partials/field-input";
 /**
- * @deprecated [EXPERIMENTAL]
- * @experimental This component is still in development and subject to change in future releases.
  * @slot label - Content to be placed as the label, will override the label prop.
  * @slot description - Content to be placed as the description, will override the description prop.
  * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.
@@ -64,10 +62,11 @@ export class NvFieldslider {
          */
         this.success = false;
         /**
-         * Numeric value of the slider as a string, if range mode is on, the values
-         * will be a comma-separated string.
+         * Numeric value of the slider as an array of numbers. When in single mode,
+         * the value should be a an array of one number. When in range mode, the value
+         * should be an array of two numbers.
          */
-        this.value = '0';
+        this.value = [0, 0];
         /**
          * Defines the interval between selectable values on the slider. Controls how
          * much the value increases or decreases with each keyboard interaction, drag
@@ -123,16 +122,20 @@ export class NvFieldslider {
          * Parses the value string into a number or array of numbers for internal use.
          */
         this.parseValue = () => {
-            const values = this.value.replace(/\s/g, '').split(',');
-            if (values.length === 1) {
-                this.valueInternal = parseFloat(values[0]);
+            if (typeof this.value === 'string') {
+                console.error('Sliders require a number or array of numbers to be passed in the value prop.');
+                return;
+            }
+            if (this.range && this.value.length !== 2) {
+                console.error('Range sliders require an array of two values to be passed in the value prop.');
+                return;
             }
-            else if (values.length === 2) {
-                values.forEach((value, index) => {
-                    this.valueInternal = parseFloat(value);
-                    this.rangeValueInternal[index] = this.valueInternal;
-                });
+            if (!this.range && this.value.length !== 1) {
+                console.error('Single sliders require a single value as an array to be passed in the value prop.');
+                return;
             }
+            this.valueInternal = this.value[0];
+            this.rangeValueInternal = [this.value[0], this.value[1]];
         };
         /**
          * Handles pointer events on the track.
@@ -342,8 +345,8 @@ export class NvFieldslider {
                 if (validatedValues[0] !== this.rangeValueInternal[0] ||
                     validatedValues[1] !== this.rangeValueInternal[1]) {
                     this.rangeValueInternal = validatedValues;
-                    this.value = this.rangeValueInternal.join(',');
-                    this.valueChanged.emit(this.rangeValueInternal.join(','));
+                    this.value = this.rangeValueInternal;
+                    this.valueChanged.emit(this.rangeValueInternal);
                 }
             }
         }
@@ -353,8 +356,8 @@ export class NvFieldslider {
                 const validatedValue = this.validateValue(newValue);
                 if (validatedValue !== this.valueInternal) {
                     this.valueInternal = validatedValue;
-                    this.value = String(this.valueInternal);
-                    this.valueChanged.emit(String(this.valueInternal));
+                    this.value = [this.valueInternal];
+                    this.valueChanged.emit([this.valueInternal]);
                 }
             }
         }
@@ -450,11 +453,11 @@ export class NvFieldslider {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '69cded86eeaff3470f970d8c5e359d467cea1762' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'd6725108d8cfc35d4722e5761592b08f20c390b2', htmlFor: this.startInputId }, h("slot", { key: 'a13207c702baa4ea95073da3db56419c50114de2', name: "label" }, this.label))), h("div", { key: 'a771db3df06edf4ca150db4f66f42a6816e32bc8', class: "slider-container" }, this.range ? (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, h("div", { key: '705fe70c9d5ebba5dc9b877532936d301df0baf6', class: "track-container" }, h("div", { key: '1f9a691c278e88160319699ff91d925dfd8184c2', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: 'b80cf4eeb492587ca44ebc6512ded331ec5619ef', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (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 })) : (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 (h(Host, { key: '924819b3d8cc05d7b7448a613b833a3514c4fe46' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '079800a326daa6677bfeadbb335100ad43a6c3a6', htmlFor: this.startInputId }, h("slot", { key: '31c7deab4307cf05951ee3e52e69a57bed2cc4dd', name: "label" }, this.label))), h("div", { key: 'c3f9a721150e9e3e4396509007d17fd5878db9d2', class: "slider-container" }, this.range ? (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, h("div", { key: '2156dae3524cbce4390a27f8699bd2f3c5623799', class: "track-container" }, h("div", { key: '7d601c91d58ef7cc8cecdc6b5becf82245ada8f7', class: "track", onPointerDown: this.onTrackInteraction }, this.range ? (h(RangeThumb, { rangeValue: this.rangeValueInternal, rawRangePosition: this.rawRangePosition, activeDragThumb: this.activeDragThumb, isDragging: this.isDragging, snap: this.snap, min: this.min, max: this.max, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue })) : (h(SingleThumb, { value: this.valueInternal, min: this.min, max: this.max, rawPosition: this.rawPosition, isDragging: this.isDragging, snap: this.snap, disabled: this.disabled, readonly: this.readonly, onKeyDown: this.onKeyDown, labelBeforeValue: this.labelBeforeValue, labelAfterValue: this.labelAfterValue }))), h(TickMarks, { key: '27869c72bdf64db4c7efab71bbfb0dc221bbce1c', ticks: this.internalTicks, min: this.min, max: this.max })), this.range ? (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 })) : (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"]')) && (h("div", { key: '97a111d5b194aeb4f1fcf1049489ddcf30527157', class: "description" }, this.success && (h("nv-icon", { key: 'cc549945c9a330892c69826867f4279e039944e8', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: '54b3e872439763a15595d6bf4f9c5e129aeae386', name: "description" }, this.description))), (this.error ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'ff43246b18e39fca6401663e17c75774d964b232', class: "description" }, this.success && (h("nv-icon", { key: 'c8d0cf20d5c91e84d9529c594400886e9e5cb89c', name: "circle-check", class: "validation", size: "md" })), h("slot", { key: 'fe5e79473950d01bf73ebd67628d301fe0b48573', name: "description" }, this.description))), (this.error ||
             this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cd5702e6819a11782a634d522a2dccd992af00f3', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '1641a68da28b0963d61b74e69c2c32f566ffeff3', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: 'a969cc7e37c4a21024790a5603a44365e135693d', name: "error-description" }, this.errorDescription)))));
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c02f5c9db7270a5442ab75f8532151e4d97801bc', class: "error-description", hidden: !this.error }, this.error && (h("nv-icon", { key: '56ed10394aca3dc9fdb800f44587cec47e993a8d', name: "alert-circle", class: "validation", size: "md" })), h("slot", { key: '037fd3db57941a5f02cde3506112059e7f792803', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldslider"; }
     static get formAssociated() { return true; }
@@ -714,24 +717,22 @@ export class NvFieldslider {
                 "defaultValue": "false"
             },
             "value": {
-                "type": "string",
+                "type": "unknown",
                 "mutable": true,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number[]",
+                    "resolved": "number[]",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Numeric value of the slider as a string, if range mode is on, the values\nwill be a comma-separated string."
+                    "text": "Numeric value of the slider as an array of numbers. When in single mode,\nthe value should be a an array of one number. When in range mode, the value\nshould be an array of two numbers."
                 },
                 "getter": false,
                 "setter": false,
-                "attribute": "value",
-                "reflect": true,
-                "defaultValue": "'0'"
+                "defaultValue": "[0, 0]"
             },
             "step": {
                 "type": "number",
@@ -994,8 +995,8 @@ export class NvFieldslider {
                     "text": "Emitted when the slider values change."
                 },
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number[]",
+                    "resolved": "number[]",
                     "references": {}
                 }
             }];