@nova-design-system/nova-webcomponents 3.1.0 → 3.3.0

package/dist/collection/components/nv-fieldpassword/nv-fieldpassword.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-fieldpassword {
   --nv-field-border-default: var(--components-form-field-border-default);
   --nv-field-border-hover: var(--components-form-field-border-hover);
@@ -30,7 +68,7 @@ nv-fieldpassword[error]:not([error=false]) {
   --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);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
 }
 nv-fieldpassword[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -109,6 +147,7 @@ nv-fieldpassword .input-wrapper .input-container input {
   font-weight: 500;
   line-height: var(--form-field-line-height);
   width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
 }
 nv-fieldpassword .input-wrapper .input-container input:focus {
   outline: none;
@@ -123,6 +162,11 @@ nv-fieldpassword .input-wrapper .input-container input::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal {
+  display: none;
+  width: 0;
+  height: 0;
+}
 nv-fieldpassword .input-wrapper .input-container > nv-iconbutton {
   border: 0px;
   border-radius: 0px;
@@ -135,7 +179,10 @@ nv-fieldpassword .input-wrapper .input-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }
 nv-fieldpassword .description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -143,7 +190,10 @@ nv-fieldpassword .description {
   line-height: var(--form-description-line-height);
 }
 nv-fieldpassword .error-description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);

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);
@@ -38,7 +76,7 @@ nv-fieldselect[error]:not([error=false]) {
   --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);
+  --nv-field-focus-box-shadow: var(--color-focus-destructive-in-field);
 }
 nv-fieldselect[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -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));
@@ -199,7 +243,10 @@ nv-fieldselect .select-wrapper .select-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }
 nv-fieldselect .description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -207,7 +254,10 @@ nv-fieldselect .description {
   line-height: var(--form-description-line-height);
 }
 nv-fieldselect .error-description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);

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

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

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

@@ -0,0 +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: '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"]}