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

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

@@ -11,6 +11,10 @@ nv-fieldtext {
   align-items: flex-start;
   gap: var(--form-gap-y);
   box-sizing: border-box;
+  max-width: 480px;
+}
+nv-fieldtext[fluid]:not([fluid=false]) {
+  max-width: unset;
 }
 nv-fieldtext[readonly]:not([readonly=false]) {
   --nv-field-border-default: var(--components-form-field-border-readonly);
@@ -26,7 +30,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);
@@ -91,6 +95,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;
@@ -103,6 +111,7 @@ nv-fieldtext > .input-wrapper .input-container input {
   font-style: normal;
   font-weight: 500;
   line-height: var(--form-field-line-height);
+  width: 100%;
 }
 nv-fieldtext > .input-wrapper .input-container input:focus {
   outline: none;
@@ -121,8 +130,15 @@ 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);
@@ -130,7 +146,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

@@ -155,13 +155,29 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.fluid),
+            args: {
+                label: 'Fluid',
+                fluid: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
         {
             name: 'leadingInputSlot',
             description: 'Content to be placed before the input text, within the input container.',
             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',

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldtext.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.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 NvFieldtextDocs: NovaDocs<Components.NvFieldtext> = {\n  component: 'nv-fieldtext',\n  subcomponents: ['nv-badge', 'nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.label),\n      args: {\n        label: 'Textfield Label',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.description),\n      args: {\n        label: 'Textfield Description',\n        description: 'Description will show here',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.placeholder),\n      args: {\n        label: 'Textfield Placeholder',\n        placeholder: 'Type something...',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.name),\n      args: {\n        label: 'Textfield Name',\n        name: 'name',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.value),\n      args: {\n        label: 'Textfield Value',\n        value: 'value',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.type),\n      args: {\n        label: 'Textfield Type',\n        type: 'email',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.disabled),\n      args: {\n        label: 'Textfield Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.readonly),\n      args: {\n        label: 'Textfield Readonly',\n        readonly: true,\n        value: 'This input is readonly',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.required),\n      args: {\n        label: 'Textfield Required',\n        required: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.error),\n      args: {\n        label: 'Textfield Error',\n        error: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n      args: {\n        label: 'Textfield Error Description',\n        description: 'Make sure to be valid.',\n        error: true,\n        errorDescription: 'This input has an error.',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.success),\n      args: {\n        label: 'Textfield Success',\n        success: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.maxlength),\n      args: {\n        label: 'Textfield Max Length',\n        maxlength: 10,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.minlength),\n      args: {\n        label: 'Textfield Min Length',\n        minlength: 10,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.pattern),\n      args: {\n        label: 'Textfield Pattern',\n        pattern: '[0-9]+',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.autocomplete),\n      args: {\n        label: 'Textfield Autocomplete',\n        autocomplete: 'on',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.multiple),\n      args: {\n        label: 'Textfield Multiple',\n        type: 'email',\n        multiple: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.autofocus),\n      args: {\n        label: 'Textfield Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: 'leadingInputSlot',\n      description:\n        'Content to be placed before the input text, within the input container.',\n      args: {\n        label: 'Leading Input',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-badge\n            slot=\"leading-input\"\n            label=\"test\"\n            dismissible\n            data-class=\"ml-1\"\n          ></nv-badge>\n        </nv-fieldtext>\n      ),\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      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtext>\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 Slot',\n        description: 'Original description',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldtext>\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 Slot',\n        errorDescription: 'Original error description',\n        error: true,\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldtext>\n      ),\n    },\n    {\n      name: 'beforeInputSlot',\n      description:\n        'Content to be placed before the input text, outside the input container.',\n      args: {\n        label: 'Before Input Slot',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n        </nv-fieldtext>\n      ),\n    },\n    {\n      name: 'afterInputSlot',\n      description:\n        'Content to be placed after the input text, outside the input container.',\n      args: {\n        label: 'After Input Slot',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-button slot=\"after-input\">After Input Slot</nv-button>\n        </nv-fieldtext>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtextDocs;\n"]}
+{"version":3,"file":"nv-fieldtext.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.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 NvFieldtextDocs: NovaDocs<Components.NvFieldtext> = {\n  component: 'nv-fieldtext',\n  subcomponents: ['nv-badge', 'nv-button'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.label),\n      args: {\n        label: 'Textfield Label',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.description),\n      args: {\n        label: 'Textfield Description',\n        description: 'Description will show here',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.placeholder),\n      args: {\n        label: 'Textfield Placeholder',\n        placeholder: 'Type something...',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.name),\n      args: {\n        label: 'Textfield Name',\n        name: 'name',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.value),\n      args: {\n        label: 'Textfield Value',\n        value: 'value',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.type),\n      args: {\n        label: 'Textfield Type',\n        type: 'email',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.disabled),\n      args: {\n        label: 'Textfield Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.readonly),\n      args: {\n        label: 'Textfield Readonly',\n        readonly: true,\n        value: 'This input is readonly',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.required),\n      args: {\n        label: 'Textfield Required',\n        required: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.error),\n      args: {\n        label: 'Textfield Error',\n        error: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.errorDescription),\n      args: {\n        label: 'Textfield Error Description',\n        description: 'Make sure to be valid.',\n        error: true,\n        errorDescription: 'This input has an error.',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.success),\n      args: {\n        label: 'Textfield Success',\n        success: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.maxlength),\n      args: {\n        label: 'Textfield Max Length',\n        maxlength: 10,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.minlength),\n      args: {\n        label: 'Textfield Min Length',\n        minlength: 10,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.pattern),\n      args: {\n        label: 'Textfield Pattern',\n        pattern: '[0-9]+',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.autocomplete),\n      args: {\n        label: 'Textfield Autocomplete',\n        autocomplete: 'on',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.multiple),\n      args: {\n        label: 'Textfield Multiple',\n        type: 'email',\n        multiple: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtext>(x => x.autofocus),\n      args: {\n        label: 'Textfield Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: nameof<Components.NvFieldtextarea>(x => x.fluid),\n      args: {\n        label: 'Fluid',\n        fluid: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    {\n      name: 'leadingInputSlot',\n      description:\n        'Content to be placed before the input text, within the input container.',\n      args: {\n        label: 'Leading Input',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-badge slot=\"leading-input\" label=\"test\" dismissible></nv-badge>\n        </nv-fieldtext>\n      ),\n    },\n    {\n      name: 'trailingInputSlot',\n      description:\n        'Content to be placed after the input text, within the input container.',\n      args: {\n        label: 'Trailing Input',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <span slot=\"trailing-input\">MWh</span>\n        </nv-fieldtext>\n      ),\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      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <span slot=\"label\">Label Slot</span>\n        </nv-fieldtext>\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 Slot',\n        description: 'Original description',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldtext>\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 Slot',\n        errorDescription: 'Original error description',\n        error: true,\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldtext>\n      ),\n    },\n    {\n      name: 'beforeInputSlot',\n      description:\n        'Content to be placed before the input text, outside the input container.',\n      args: {\n        label: 'Before Input Slot',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n        </nv-fieldtext>\n      ),\n    },\n    {\n      name: 'afterInputSlot',\n      description:\n        'Content to be placed after the input text, outside the input container.',\n      args: {\n        label: 'After Input Slot',\n        description: 'Description will show here',\n      },\n      template: (\n        <nv-fieldtext data-storybook-args>\n          <nv-button slot=\"after-input\">After Input Slot</nv-button>\n        </nv-fieldtext>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtextDocs;\n"]}

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

@@ -2,6 +2,7 @@ import { Host, h, } from "@stencil/core";
 import { v4 as uuidv4 } from "uuid";
 /**
  * @slot leading-input - Content to be placed before the input text, within the input container.
+ * @slot trailing-input - Content to be placed after the input text, within the input container.
  * @slot before-input - Content to be placed before the input text, outside the input container.
  * @slot after-input - Content to be placed after the input text, outside the input container.
  * @slot label - Content to be placed as the label, will override the label prop.
@@ -67,6 +68,10 @@ export class NvFieldtext {
          * element.
          */
         this.autofocus = false;
+        /**
+         * Allows the field to stretch and fill the entire width of its container.
+         */
+        this.fluid = false;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -106,9 +111,9 @@ export class NvFieldtext {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e4891525becd4b0757ec380d45d9694ebc6c3318' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '1157e609be8150d014e9190dcf53f74bcee20119', htmlFor: this.inputId }, h("slot", { key: '888fb12e994f6f4f47bc2be496cd74aeedb628c0', name: "label" }, this.label))), h("div", { key: '0555b12dbbe5fa81f5af464d3b48c35b243aec32', class: "input-wrapper" }, h("slot", { key: '5210a9b903c560775453741d8815286dbe8bbb53', name: "before-input" }), h("div", { key: '7bc11232dfa46706982bf3645054a7a1f67832f9', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '87abc6976b432a3dc51246c97564108f9baccff8', name: "leading-input" }), h("input", { key: 'b0c3e30bc5363f6b49ea1361005e125826184016', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), this.error && (h("nv-icon", { key: '5e359bc40906bbf2c63eb7d196dd8294b15dd672', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '4812b31e512bf388fa84f9d35a949de5f9b86d59', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '06922c63f02470be6c74ee6ba4bf93baabd03e57', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '960bcb53a55aed3e1b8cd1b193ad26f5c6b151fd', class: "description" }, h("slot", { key: '07c09b8543e9b91928821a100869943de94a65a7', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '456d00a47f01f70938d99faa774da1a9e51b036d', hidden: !this.error, class: "error-description" }, h("slot", { key: '590aef8c37efd2fa472c9b7b92fd82d29c4e6d39', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '852a919f0fcf19b0b67ddf6b0cc2762fc41c9388' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '3c99f456e76ddbc6ec21d3390aea76f849d72b88', htmlFor: this.inputId }, h("slot", { key: '5a11c6f3f0f56b8ab05d0390fec6bd1b15763d02', name: "label" }, this.label))), h("div", { key: 'a305c2ffb63cfd66c70d0074fc62c823cce37f8e', class: "input-wrapper" }, h("slot", { key: '0efd115ea0805160dee0c4b58ad137be2aabc741', name: "before-input" }), h("div", { key: 'ccaaa74adf0df1667bc971eaedb4b9883061851d', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'f81025cb44b30e185b3057527cdc2a1662f5252a', name: "leading-input" }), h("input", { key: 'a8b2356d0b5372823f3da9f053d0de8e28bf8c08', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autofocus: this.autofocus, autocomplete: this.autocomplete, multiple: this.multiple, value: this.value, onInput: this.handleInput }), h("slot", { key: 'aa531021a4d3db52839c280cda21d06be6deaa79', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'fc590ef5879887b2990912b16cc247db875af237', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '68023589dc8340647b1aa5fa07f1b9bda248049d', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '3d0a53914d87559eab76f4d0b8165ad1d7e4eccf', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '8641ee0c8638ec43d5a3da0d08ed29991cedfc6a', class: "description" }, h("slot", { key: 'fe4ee537f946b69ef9908f1d086046b03c777f90', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '865c34d486b86223fbbbc81f22cd3428e4110af8', hidden: !this.error, class: "error-description" }, h("slot", { key: 'ac80b543c58bed6db534b8f1571a70aabf811918', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }
@@ -571,6 +576,26 @@ export class NvFieldtext {
                 "attribute": "autofocus",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "fluid": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Allows the field to stretch and fill the entire width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "fluid",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldtext.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtext',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n  @Element() el: HTMLNvFieldtextElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  /**\n   * Type of the input.\n   * @deprecated use type instead.\n   */\n  @Prop({ reflect: true })\n  readonly textInputType: 'text' | 'tel' | 'email';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The type prop lets you specify what kind of information the input field\n   * should accept. Choose 'text' for general words or sentences, 'tel' for\n   * phone numbers, or 'email' for email addresses. This makes sure users get\n   * the right keyboard and validation for what they need to enter.\n   */\n  @Prop({ reflect: true, mutable: true })\n  type: 'text' | 'tel' | 'email' = 'text';\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the textfield\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the input field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their input within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * input field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * Set rules for how the input should be formatted. For example, you can\n   * require that a phone number includes only digits or that an email address\n   * has the correct format. If users don’t follow these rules, they’ll get a\n   * prompt to correct their input after the form is submitted.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}`;\n\n  /**\n   * When used with the email input type, this prop enables the field to accept\n   * multiple email addresses. Users can enter several addresses, separating\n   * each one with a comma, allowing the form to handle multiple recipients.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the input event on the input element.\n   * Emits the inputChanged event with the new value.\n   * @param {Event} event - Event object of the input event.\n   */\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(input.value);\n  };\n\n  /**\n   * Handles focus when the input container is clicked.\n   */\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.textInputType) {\n      this.type = this.textInputType;\n    }\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.type}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              autofocus={this.autofocus}\n              autocomplete={this.autocomplete}\n              multiple={this.multiple}\n              value={this.value}\n              onInput={this.handleInput}\n            />\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-fieldtext.js","sourceRoot":"","sources":["../../../src/components/nv-fieldtext/nv-fieldtext.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Element,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot trailing-input - Content to be placed after the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldtext',\n  shadow: false,\n  formAssociated: true,\n  styleUrl: 'nv-fieldtext.scss',\n})\nexport class NvFieldtext {\n  @Element() el: HTMLNvFieldtextElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the Text Field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop({ reflect: true })\n  readonly message: string;\n\n  /**\n   * Add the message to the validation state.\n   * @deprecated Use `errorDescription` and set the error prop instead.\n   */\n  @Prop({ reflect: true })\n  readonly validation: string;\n\n  /**\n   * Type of the input.\n   * @deprecated use type instead.\n   */\n  @Prop({ reflect: true })\n  readonly textInputType: 'text' | 'tel' | 'email';\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the input element and the for attribute of the associated\n   * label. If no ID is provided, a random one will be automatically generated\n   * to ensure unique identification, facilitating proper label association and\n   * accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Lets you define the text that explains what users should enter in the text\n   * input field. It’s a crucial element for making forms clear and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Add helpful hints or extra information under the text input field. This is\n   * where you can clarify what users should enter or provide additional\n   * instructions, making the form easier to fill out correctly.\n   */\n  @Prop({ reflect: true, mutable: true })\n  description: string;\n\n  /**\n   * Display temporary text inside the input field to give users a hint about\n   * what to type. It’s a great way to provide examples or suggestions directly\n   * in the field before they start typing.\n   */\n  @Prop({ reflect: true })\n  readonly placeholder: string;\n\n  /**\n   * Defines the name attribute of the input field, which is crucial for form\n   * submission. This value is used as the key in the key-value pair sent to\n   * the server, representing the input’s data in form submissions. It should be\n   * unique within the form to avoid conflicts\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Specifies the value of the input field, which determines the text displayed\n   * within the field. This prop is typically used in controlled components\n   * where the input’s value is managed by the component’s state.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: string;\n\n  /**\n   * The type prop lets you specify what kind of information the input field\n   * should accept. Choose 'text' for general words or sentences, 'tel' for\n   * phone numbers, or 'email' for email addresses. This makes sure users get\n   * the right keyboard and validation for what they need to enter.\n   */\n  @Prop({ reflect: true, mutable: true })\n  type: 'text' | 'tel' | 'email' = 'text';\n\n  /**\n   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the textfield\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true, mutable: true })\n  errorDescription?: string;\n\n  /**\n   * Changes the input field’s appearance to indicate successful input or\n   * validation.\n   */\n  @Prop({ reflect: true })\n  readonly success: boolean = false;\n\n  /**\n   * Limits how many characters users can type into the input field. It’s\n   * helpful for making sure users don’t enter too much information, keeping\n   * their input within the allowed limit.\n   */\n  @Prop({ reflect: true })\n  readonly maxlength: number;\n\n  /**\n   * Ensures that users type at least a certain number of characters into the\n   * input field. It’s a way to make sure users provide enough information\n   * before moving on.\n   */\n  @Prop({ reflect: true })\n  readonly minlength: number;\n\n  /**\n   * Set rules for how the input should be formatted. For example, you can\n   * require that a phone number includes only digits or that an email address\n   * has the correct format. If users don’t follow these rules, they’ll get a\n   * prompt to correct their input after the form is submitted.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * The autocomplete prop helps users fill out the input field faster by\n   * suggesting entries they’ve used before, like their email or address.\n   * You can turn it on to make forms more convenient or off to ensure users\n   * always type in fresh data.\n   */\n  @Prop({ reflect: true })\n  readonly autocomplete: `${TextInputAutocomplete}`;\n\n  /**\n   * When used with the email input type, this prop enables the field to accept\n   * multiple email addresses. Users can enter several addresses, separating\n   * each one with a comma, allowing the form to handle multiple recipients.\n   */\n  @Prop({ reflect: true })\n  readonly multiple: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  /**\n   * Allows the field to stretch and fill the entire width of its container.\n   */\n  @Prop({ reflect: true })\n  readonly fluid: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  /**\n   * Handles the input event on the input element.\n   * Emits the inputChanged event with the new value.\n   * @param {Event} event - Event object of the input event.\n   */\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    this.valueChanged.emit(input.value);\n  };\n\n  /**\n   * Handles focus when the input container is clicked.\n   */\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.textInputType) {\n      this.type = this.textInputType;\n    }\n\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.type}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              autofocus={this.autofocus}\n              autocomplete={this.autocomplete}\n              multiple={this.multiple}\n              value={this.value}\n              onInput={this.handleInput}\n            />\n\n            <slot name=\"trailing-input\"></slot>\n\n            {this.error && (\n              <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n            )}\n            {this.success && (\n              <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n            )}\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -1,3 +1,10 @@
+/**
+ * Scrollbar mixin for the Nova Design System
+ * This mixin provides consistent scrollbar styling for components
+ * 
+ * Usage:
+ * @include scrollbar();
+ */
 nv-fieldtextarea {
   --nv-field-border-default: var(--components-form-field-border-default);
   --nv-field-border-hover: var(--components-form-field-border-hover);
@@ -11,6 +18,10 @@ nv-fieldtextarea {
   align-items: flex-start;
   gap: var(--form-gap-y);
   box-sizing: border-box;
+  max-width: 480px;
+}
+nv-fieldtextarea[fluid]:not([fluid=false]) {
+  max-width: unset;
 }
 nv-fieldtextarea[readonly]:not([readonly=false]) {
   --nv-field-border-default: var(--components-form-field-border-readonly);
@@ -26,7 +37,7 @@ nv-fieldtextarea[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-fieldtextarea[success]:not([success=false]) {
   --nv-field-border-default: var(--components-form-field-border-success);
@@ -106,6 +117,18 @@ nv-fieldtextarea .textarea-wrapper .textarea-container textarea {
   font-weight: 500;
   line-height: var(--form-field-line-height);
 }
+nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-track {
+  background-color: var(--color-level-10-background);
+  border-radius: 9999px;
+}
+nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar-thumb {
+  background-color: var(--color-gray-200);
+  border-radius: 9999px;
+}
 nv-fieldtextarea .textarea-wrapper .textarea-container textarea:focus {
   outline: none;
 }
@@ -123,7 +146,10 @@ nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation {
   color: var(--nv-field-border-default);
 }
 nv-fieldtextarea .description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);
@@ -131,7 +157,10 @@ nv-fieldtextarea .description {
   line-height: var(--form-description-line-height);
 }
 nv-fieldtextarea .error-description {
+  display: flex;
+  align-items: center;
   align-self: stretch;
+  gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
   font-family: "TT Norms Pro", sans-serif;
   font-size: var(--form-description-font-size);

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

@@ -150,6 +150,14 @@ const NvFieldtextareaDocs = {
             },
             template: h("nv-fieldtextarea", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.fluid),
+            args: {
+                label: 'Fluid',
+                fluid: true,
+            },
+            template: h("nv-fieldtextarea", { "data-storybook-args": true }),
+        },
         {
             name: 'labelSlot',
             description: 'Content to be placed as the label, will override the label prop.',