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

package/dist/collection/components/nv-fieldslider/styles/nv-fieldslider.css

@@ -0,0 +1,338 @@
+/* used */
+/* not used */
+/* 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-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;
+}
+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;
+  transition: width 0.2s, height 0.2s, box-shadow 0.2s, background-color 0.2s;
+}
+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%);
+}
+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;
+}
+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;
+  width: 70px;
+  flex-grow: unset;
+}
+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) {
+  opacity: 0.5;
+  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 input {
+  display: flex;
+  align-items: center;
+  flex: 1 0 0;
+  overflow: hidden;
+  background-color: transparent;
+  color: var(--components-form-field-content-text);
+  padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 500;
+  line-height: var(--form-field-line-height);
+  width: 100%;
+  /* Hide Edge built-in password reveal and clear icons */
+}
+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: "TT Norms Pro", sans-serif;
+  font-size: var(--form-field-font-size);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--form-field-line-height);
+}
+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[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: "TT Norms Pro", sans-serif;
+  font-size: var(--form-label-font-size);
+  font-style: normal;
+  font-weight: 500;
+  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: "TT Norms Pro", 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: "TT Norms Pro", 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;
+}

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

@@ -0,0 +1,159 @@
+import { describe, it, expect } from "vitest";
+import { clamp, valueToPercent, snapToStep, generateTicks, snapToTicks, } from "../nv-fieldslider.utils";
+describe('nv-fieldslider -> utils', () => {
+    describe('clamp', () => {
+        it('should clamp value to min when value is below min', () => {
+            expect(clamp(-10, 0, 100)).toBe(0);
+        });
+        it('should clamp value to max when value is above max', () => {
+            expect(clamp(150, 0, 100)).toBe(100);
+        });
+        it('should return value when it is within range', () => {
+            expect(clamp(50, 0, 100)).toBe(50);
+        });
+        it('should handle edge cases', () => {
+            expect(clamp(0, 0, 100)).toBe(0);
+            expect(clamp(100, 0, 100)).toBe(100);
+        });
+        it('should handle negative ranges', () => {
+            expect(clamp(-150, -200, -100)).toBe(-150);
+            expect(clamp(-50, -200, -100)).toBe(-100);
+            expect(clamp(-250, -200, -100)).toBe(-200);
+        });
+    });
+    describe('valueToPercent', () => {
+        it('should convert value to percentage within range', () => {
+            expect(valueToPercent(50, 0, 100)).toBe(50);
+            expect(valueToPercent(25, 0, 100)).toBe(25);
+            expect(valueToPercent(75, 0, 100)).toBe(75);
+        });
+        it('should handle values outside the range', () => {
+            expect(valueToPercent(-10, 0, 100)).toBe(-10);
+            expect(valueToPercent(150, 0, 100)).toBe(150);
+        });
+        it('should handle custom ranges', () => {
+            expect(valueToPercent(30, 20, 40)).toBe(50);
+            expect(valueToPercent(10, -10, 10)).toBe(100);
+            expect(valueToPercent(0, -10, 10)).toBe(50);
+            expect(valueToPercent(-10, -10, 10)).toBe(0);
+        });
+        it('should return 0 when min equals max', () => {
+            expect(valueToPercent(50, 50, 50)).toBe(0);
+            expect(valueToPercent(100, 100, 100)).toBe(0);
+        });
+        it('should handle negative ranges', () => {
+            expect(valueToPercent(-150, -200, -100)).toBe(50);
+        });
+        it('should handle decimal values', () => {
+            expect(valueToPercent(2.5, 0, 5)).toBe(50);
+            expect(valueToPercent(0.5, 0, 1)).toBe(50);
+        });
+    });
+    describe('snapToStep', () => {
+        it('should snap value to nearest step', () => {
+            expect(snapToStep(42, 0, 100, 5)).toBe(40);
+            expect(snapToStep(43, 0, 100, 5)).toBe(45);
+            expect(snapToStep(2.7, 0, 10, 0.5)).toBe(2.5);
+            expect(snapToStep(2.8, 0, 10, 0.5)).toBe(3);
+        });
+        it('should clamp value to min when below min', () => {
+            expect(snapToStep(-10, 0, 100, 5)).toBe(0);
+        });
+        it('should clamp value to max when above max', () => {
+            expect(snapToStep(110, 0, 100, 5)).toBe(100);
+        });
+        it('should handle edge cases', () => {
+            // Exactly on a step
+            expect(snapToStep(20, 0, 100, 5)).toBe(20);
+            // Min and max values
+            expect(snapToStep(0, 0, 100, 5)).toBe(0);
+            expect(snapToStep(100, 0, 100, 5)).toBe(100);
+            // Value between min and first step
+            expect(snapToStep(2, 0, 100, 5)).toBe(0);
+            expect(snapToStep(3, 0, 100, 5)).toBe(5);
+        });
+        it('should handle negative ranges', () => {
+            expect(snapToStep(-152, -200, -100, 10)).toBe(-150);
+        });
+        it("should handle step sizes that don't divide evenly into the range", () => {
+            expect(snapToStep(97, 0, 100, 30)).toBe(90);
+            expect(snapToStep(98, 0, 100, 30)).toBe(90); // Not 120 because it's clamped to max (100)
+        });
+    });
+    describe('generateTicks', () => {
+        it('should generate ticks for a simple range', () => {
+            const ticks = generateTicks(0, 10, 2);
+            expect(ticks).toEqual([0, 2, 4, 6, 8, 10]);
+        });
+        it('should include max value when it falls on a step', () => {
+            const ticks = generateTicks(0, 10, 5);
+            expect(ticks).toEqual([0, 5, 10]);
+        });
+        it("should include max value even when it doesn't fall on a step", () => {
+            const ticks = generateTicks(0, 11, 5);
+            expect(ticks).toEqual([0, 5, 10, 11]);
+        });
+        it('should handle negative ranges', () => {
+            const ticks = generateTicks(-10, 0, 2);
+            expect(ticks).toEqual([-10, -8, -6, -4, -2, 0]);
+        });
+        it('should handle floating point step sizes', () => {
+            const ticks = generateTicks(0, 1, 0.2);
+            // Using toEqual with approximate values due to floating point precision
+            expect(ticks).toEqual([0, 0.2, 0.4, 0.6, 0.8, 1]);
+        });
+        it('should handle small step sizes correctly', () => {
+            const ticks = generateTicks(0, 0.5, 0.1);
+            expect(ticks).toEqual([0, 0.1, 0.2, 0.3, 0.4, 0.5]);
+        });
+        it('should handle case when min equals max', () => {
+            const ticks = generateTicks(10, 10, 5);
+            expect(ticks).toEqual([10]);
+        });
+    });
+    describe('snapToTicks', () => {
+        it('should snap value to closest tick', () => {
+            const ticks = [
+                { value: 0 },
+                { value: 25 },
+                { value: 50 },
+                { value: 75 },
+                { value: 100 },
+            ];
+            expect(snapToTicks(12, ticks)).toBe(0); // Closer to 0
+            expect(snapToTicks(13, ticks)).toBe(25); // Closer to 25
+            expect(snapToTicks(37, ticks)).toBe(25); // Closer to 25
+            expect(snapToTicks(38, ticks)).toBe(50); // Closer to 50
+            expect(snapToTicks(87, ticks)).toBe(75); // Closer to 75
+            expect(snapToTicks(88, ticks)).toBe(100); // Closer to 100
+        });
+        it('should return original value when ticks is empty or undefined', () => {
+            expect(snapToTicks(42, [])).toBe(42);
+            expect(snapToTicks(42, undefined)).toBe(42);
+        });
+        it('should return tick value when input exactly matches a tick', () => {
+            const ticks = [{ value: 0 }, { value: 50 }, { value: 100 }];
+            expect(snapToTicks(0, ticks)).toBe(0);
+            expect(snapToTicks(50, ticks)).toBe(50);
+            expect(snapToTicks(100, ticks)).toBe(100);
+        });
+        it('should handle equidistant values by taking the first encountered tick', () => {
+            const ticks = [{ value: 0 }, { value: 10 }];
+            // Value 5 is exactly equidistant from 0 and 10
+            expect(snapToTicks(5, ticks)).toBe(0);
+        });
+        it('should handle negative and decimal values', () => {
+            const ticks = [
+                { value: -10 },
+                { value: -5.5 },
+                { value: 0 },
+                { value: 2.25 },
+            ];
+            expect(snapToTicks(-8, ticks)).toBe(-10);
+            expect(snapToTicks(-3, ticks)).toBe(-5.5);
+            expect(snapToTicks(1, ticks)).toBe(0);
+            expect(snapToTicks(1.5, ticks)).toBe(2.25);
+        });
+    });
+});
+//# sourceMappingURL=nv-fieldslider.utils.test.js.map

package/dist/collection/components/nv-fieldslider/test/nv-fieldslider.utils.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nv-fieldslider.utils.test.js","sourceRoot":"","sources":["../../../../src/components/nv-fieldslider/test/nv-fieldslider.utils.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { describe, it, expect } from 'vitest';\nimport {\n  clamp,\n  valueToPercent,\n  snapToStep,\n  generateTicks,\n  snapToTicks,\n} from '../nv-fieldslider.utils';\n\ndescribe('nv-fieldslider -> utils', () => {\n  describe('clamp', () => {\n    it('should clamp value to min when value is below min', () => {\n      expect(clamp(-10, 0, 100)).toBe(0);\n    });\n\n    it('should clamp value to max when value is above max', () => {\n      expect(clamp(150, 0, 100)).toBe(100);\n    });\n\n    it('should return value when it is within range', () => {\n      expect(clamp(50, 0, 100)).toBe(50);\n    });\n\n    it('should handle edge cases', () => {\n      expect(clamp(0, 0, 100)).toBe(0);\n      expect(clamp(100, 0, 100)).toBe(100);\n    });\n\n    it('should handle negative ranges', () => {\n      expect(clamp(-150, -200, -100)).toBe(-150);\n      expect(clamp(-50, -200, -100)).toBe(-100);\n      expect(clamp(-250, -200, -100)).toBe(-200);\n    });\n  });\n\n  describe('valueToPercent', () => {\n    it('should convert value to percentage within range', () => {\n      expect(valueToPercent(50, 0, 100)).toBe(50);\n      expect(valueToPercent(25, 0, 100)).toBe(25);\n      expect(valueToPercent(75, 0, 100)).toBe(75);\n    });\n\n    it('should handle values outside the range', () => {\n      expect(valueToPercent(-10, 0, 100)).toBe(-10);\n      expect(valueToPercent(150, 0, 100)).toBe(150);\n    });\n\n    it('should handle custom ranges', () => {\n      expect(valueToPercent(30, 20, 40)).toBe(50);\n      expect(valueToPercent(10, -10, 10)).toBe(100);\n      expect(valueToPercent(0, -10, 10)).toBe(50);\n      expect(valueToPercent(-10, -10, 10)).toBe(0);\n    });\n\n    it('should return 0 when min equals max', () => {\n      expect(valueToPercent(50, 50, 50)).toBe(0);\n      expect(valueToPercent(100, 100, 100)).toBe(0);\n    });\n\n    it('should handle negative ranges', () => {\n      expect(valueToPercent(-150, -200, -100)).toBe(50);\n    });\n\n    it('should handle decimal values', () => {\n      expect(valueToPercent(2.5, 0, 5)).toBe(50);\n      expect(valueToPercent(0.5, 0, 1)).toBe(50);\n    });\n  });\n\n  describe('snapToStep', () => {\n    it('should snap value to nearest step', () => {\n      expect(snapToStep(42, 0, 100, 5)).toBe(40);\n      expect(snapToStep(43, 0, 100, 5)).toBe(45);\n      expect(snapToStep(2.7, 0, 10, 0.5)).toBe(2.5);\n      expect(snapToStep(2.8, 0, 10, 0.5)).toBe(3);\n    });\n\n    it('should clamp value to min when below min', () => {\n      expect(snapToStep(-10, 0, 100, 5)).toBe(0);\n    });\n\n    it('should clamp value to max when above max', () => {\n      expect(snapToStep(110, 0, 100, 5)).toBe(100);\n    });\n\n    it('should handle edge cases', () => {\n      // Exactly on a step\n      expect(snapToStep(20, 0, 100, 5)).toBe(20);\n      // Min and max values\n      expect(snapToStep(0, 0, 100, 5)).toBe(0);\n      expect(snapToStep(100, 0, 100, 5)).toBe(100);\n      // Value between min and first step\n      expect(snapToStep(2, 0, 100, 5)).toBe(0);\n      expect(snapToStep(3, 0, 100, 5)).toBe(5);\n    });\n\n    it('should handle negative ranges', () => {\n      expect(snapToStep(-152, -200, -100, 10)).toBe(-150);\n    });\n\n    it(\"should handle step sizes that don't divide evenly into the range\", () => {\n      expect(snapToStep(97, 0, 100, 30)).toBe(90);\n      expect(snapToStep(98, 0, 100, 30)).toBe(90); // Not 120 because it's clamped to max (100)\n    });\n  });\n\n  describe('generateTicks', () => {\n    it('should generate ticks for a simple range', () => {\n      const ticks = generateTicks(0, 10, 2);\n      expect(ticks).toEqual([0, 2, 4, 6, 8, 10]);\n    });\n\n    it('should include max value when it falls on a step', () => {\n      const ticks = generateTicks(0, 10, 5);\n      expect(ticks).toEqual([0, 5, 10]);\n    });\n\n    it(\"should include max value even when it doesn't fall on a step\", () => {\n      const ticks = generateTicks(0, 11, 5);\n      expect(ticks).toEqual([0, 5, 10, 11]);\n    });\n\n    it('should handle negative ranges', () => {\n      const ticks = generateTicks(-10, 0, 2);\n      expect(ticks).toEqual([-10, -8, -6, -4, -2, 0]);\n    });\n\n    it('should handle floating point step sizes', () => {\n      const ticks = generateTicks(0, 1, 0.2);\n      // Using toEqual with approximate values due to floating point precision\n      expect(ticks).toEqual([0, 0.2, 0.4, 0.6, 0.8, 1]);\n    });\n\n    it('should handle small step sizes correctly', () => {\n      const ticks = generateTicks(0, 0.5, 0.1);\n      expect(ticks).toEqual([0, 0.1, 0.2, 0.3, 0.4, 0.5]);\n    });\n\n    it('should handle case when min equals max', () => {\n      const ticks = generateTicks(10, 10, 5);\n      expect(ticks).toEqual([10]);\n    });\n  });\n\n  describe('snapToTicks', () => {\n    it('should snap value to closest tick', () => {\n      const ticks = [\n        { value: 0 },\n        { value: 25 },\n        { value: 50 },\n        { value: 75 },\n        { value: 100 },\n      ];\n\n      expect(snapToTicks(12, ticks)).toBe(0); // Closer to 0\n      expect(snapToTicks(13, ticks)).toBe(25); // Closer to 25\n      expect(snapToTicks(37, ticks)).toBe(25); // Closer to 25\n      expect(snapToTicks(38, ticks)).toBe(50); // Closer to 50\n      expect(snapToTicks(87, ticks)).toBe(75); // Closer to 75\n      expect(snapToTicks(88, ticks)).toBe(100); // Closer to 100\n    });\n\n    it('should return original value when ticks is empty or undefined', () => {\n      expect(snapToTicks(42, [])).toBe(42);\n      expect(snapToTicks(42, undefined)).toBe(42);\n    });\n\n    it('should return tick value when input exactly matches a tick', () => {\n      const ticks = [{ value: 0 }, { value: 50 }, { value: 100 }];\n\n      expect(snapToTicks(0, ticks)).toBe(0);\n      expect(snapToTicks(50, ticks)).toBe(50);\n      expect(snapToTicks(100, ticks)).toBe(100);\n    });\n\n    it('should handle equidistant values by taking the first encountered tick', () => {\n      const ticks = [{ value: 0 }, { value: 10 }];\n\n      // Value 5 is exactly equidistant from 0 and 10\n      expect(snapToTicks(5, ticks)).toBe(0);\n    });\n\n    it('should handle negative and decimal values', () => {\n      const ticks = [\n        { value: -10 },\n        { value: -5.5 },\n        { value: 0 },\n        { value: 2.25 },\n      ];\n\n      expect(snapToTicks(-8, ticks)).toBe(-10);\n      expect(snapToTicks(-3, ticks)).toBe(-5.5);\n      expect(snapToTicks(1, ticks)).toBe(0);\n      expect(snapToTicks(1.5, ticks)).toBe(2.25);\n    });\n  });\n});\n"]}

package/dist/collection/components/nv-fieldtext/nv-fieldtext.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-fieldtext {
   --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-fieldtext[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-fieldtext[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -95,6 +133,10 @@ nv-fieldtext > .input-wrapper .input-container:has(input:disabled) {
   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;
@@ -108,6 +150,7 @@ nv-fieldtext > .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-fieldtext > .input-wrapper .input-container input:focus {
   outline: none;
@@ -122,12 +165,24 @@ nv-fieldtext > .input-wrapper .input-container input::placeholder {
   font-weight: 400;
   line-height: var(--form-field-line-height);
 }
+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: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -135,7 +190,10 @@ nv-fieldtext > .description {
   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: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);

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

@@ -169,7 +169,15 @@ const NvFieldtextDocs = {
             args: {
                 label: 'Leading Input',
             },
-            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "test", dismissible: true, "data-class": "ml-1" }))),
+            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-badge", { slot: "leading-input", label: "test", dismissible: true }))),
+        },
+        {
+            name: 'trailingInputSlot',
+            description: 'Content to be placed after the input text, within the input container.',
+            args: {
+                label: 'Trailing Input',
+            },
+            template: (h("nv-fieldtext", { "data-storybook-args": true }, h("span", { slot: "trailing-input" }, "MWh"))),
         },
         {
             name: 'labelSlot',