@nova-design-system/nova-webcomponents 3.15.0 → 3.16.0

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

@@ -118,7 +118,7 @@ nv-fieldmultiselect[error]:not([error=false]) {
 nv-fieldmultiselect[required]:not([required=false]) label::after {
   content: "*";
   color: var(--components-form-text-required);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
 }
 nv-fieldmultiselect label {
   display: flex;
@@ -126,10 +126,10 @@ nv-fieldmultiselect label {
   gap: var(--form-label-gap);
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-label-line-height);
 }
 nv-fieldmultiselect nv-popover {
@@ -224,7 +224,7 @@ nv-fieldmultiselect .input-container-multiselect p.non-filterable-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;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
   width: 100%;
   /* Hide Edge built-in password reveal and clear icons */
@@ -243,10 +243,10 @@ nv-fieldmultiselect .input-container-multiselect p.non-filterable-text::placehol
   overflow: hidden;
   color: var(--components-form-field-content-placeholder);
   text-overflow: ellipsis;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
 nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-clear, nv-fieldmultiselect .input-container-multiselect input[type=password]::-ms-reveal,
@@ -277,7 +277,7 @@ nv-fieldmultiselect .non-filterable-text {
   background-color: var(--nv-field-background);
   color: var(--components-form-field-content-text);
   font-size: var(--form-field-font-size);
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
   box-sizing: border-box;
   cursor: pointer;
@@ -296,7 +296,7 @@ nv-fieldmultiselect .description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);
@@ -307,7 +307,7 @@ nv-fieldmultiselect .error-description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);

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

@@ -81,7 +81,7 @@ nv-fieldnumber[success]:not([success=false]) {
 nv-fieldnumber[required]:not([required=false]) label::after {
   content: "*";
   color: var(--components-form-text-required);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
 }
 nv-fieldnumber label {
   display: flex;
@@ -89,10 +89,10 @@ nv-fieldnumber label {
   gap: var(--form-label-gap);
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-label-line-height);
 }
 nv-fieldnumber .input-wrapper {
@@ -147,7 +147,7 @@ nv-fieldnumber .input-wrapper .input-container input {
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
   width: 100%;
   /* Hide Edge built-in password reveal and clear icons */
@@ -161,10 +161,10 @@ nv-fieldnumber .input-wrapper .input-container input::placeholder {
   overflow: hidden;
   color: var(--components-form-field-content-placeholder);
   text-overflow: ellipsis;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
 nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldnumber .input-wrapper .input-container input[type=password]::-ms-reveal {
@@ -223,7 +223,7 @@ nv-fieldnumber .description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);
@@ -234,7 +234,7 @@ nv-fieldnumber .error-description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);

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

@@ -81,7 +81,7 @@ nv-fieldpassword[success]:not([success=false]) {
 nv-fieldpassword[required]:not([required=false]) label::after {
   content: "*";
   color: var(--components-form-text-required);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
 }
 nv-fieldpassword label {
   display: flex;
@@ -89,10 +89,10 @@ nv-fieldpassword label {
   gap: var(--form-label-gap);
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-label-line-height);
 }
 nv-fieldpassword .input-wrapper {
@@ -144,7 +144,7 @@ nv-fieldpassword .input-wrapper .input-container input {
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
   width: 100%;
   /* Hide Edge built-in password reveal and clear icons */
@@ -156,10 +156,10 @@ nv-fieldpassword .input-wrapper .input-container input::placeholder {
   overflow: hidden;
   color: var(--components-form-field-content-placeholder);
   text-overflow: ellipsis;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
 nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-clear, nv-fieldpassword .input-wrapper .input-container input[type=password]::-ms-reveal {
@@ -188,7 +188,7 @@ nv-fieldpassword .description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);
@@ -199,7 +199,7 @@ nv-fieldpassword .error-description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);

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

@@ -37,7 +37,7 @@ nv-fieldradio[disabled] {
 nv-fieldradio label {
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
   font-weight: var(--form-label-font-weight);
@@ -109,7 +109,7 @@ nv-fieldradio input[type=radio]:disabled:hover {
 nv-fieldradio .description {
   align-self: stretch;
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   font-weight: var(--form-description-font-weight);
@@ -118,7 +118,7 @@ nv-fieldradio .description {
 nv-fieldradio .error-description {
   align-self: stretch;
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   font-weight: var(--form-description-font-weight);

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

@@ -89,7 +89,7 @@ nv-fieldselect[success]:not([success=false]) {
 nv-fieldselect[required]:not([required=false]) label::after {
   content: "*";
   color: var(--components-form-text-required);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
 }
 nv-fieldselect[multiple]:not([multiple=false]) .select-wrapper > .select-container > .select-icons {
   top: var(--form-field-padding-y);
@@ -107,10 +107,10 @@ nv-fieldselect label {
   gap: var(--form-label-gap);
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-label-line-height);
 }
 nv-fieldselect .select-wrapper {
@@ -174,7 +174,7 @@ nv-fieldselect .select-wrapper .select-container input {
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
   width: 100%;
   /* Hide Edge built-in password reveal and clear icons */
@@ -186,10 +186,10 @@ nv-fieldselect .select-wrapper .select-container input::placeholder {
   overflow: hidden;
   color: var(--components-form-field-content-placeholder);
   text-overflow: ellipsis;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
 nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-clear, nv-fieldselect .select-wrapper .select-container input[type=password]::-ms-reveal {
@@ -212,7 +212,7 @@ nv-fieldselect .select-wrapper .select-container select {
   text-overflow: ellipsis;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   height: var(--form-field-line-height);
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
   box-sizing: content-box;
@@ -227,16 +227,16 @@ nv-fieldselect .select-wrapper .select-container select::placeholder {
   overflow: hidden;
   color: var(--components-form-field-content-placeholder);
   text-overflow: ellipsis;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
 nv-fieldselect .select-wrapper .select-container select option {
   font-size: var(--form-field-font-size, 16px);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height, 24px);
   background-color: var(--color-level-05-background);
   color: var(--components-form-field-content-text);
@@ -256,7 +256,7 @@ nv-fieldselect .description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);
@@ -267,7 +267,7 @@ nv-fieldselect .error-description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);

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

@@ -254,7 +254,7 @@ nv-fieldslider .slider-container .input-container input {
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
   width: 100%;
   /* Hide Edge built-in password reveal and clear icons */
@@ -266,10 +266,10 @@ 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-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   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 {
@@ -322,10 +322,10 @@ nv-fieldslider label {
   gap: var(--form-label-gap);
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-label-line-height);
 }
 nv-fieldslider nv-icon.validation {
@@ -351,7 +351,7 @@ nv-fieldslider > .description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);
@@ -362,7 +362,7 @@ nv-fieldslider > .error-description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);

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

@@ -81,7 +81,7 @@ nv-fieldtext[success]:not([success=false]) {
 nv-fieldtext[required]:not([required=false]) label::after {
   content: "*";
   color: var(--components-form-text-required);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
 }
 nv-fieldtext > label {
   display: flex;
@@ -89,10 +89,10 @@ nv-fieldtext > label {
   gap: var(--form-label-gap);
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-label-line-height);
 }
 nv-fieldtext > .input-wrapper {
@@ -147,7 +147,7 @@ nv-fieldtext > .input-wrapper .input-container input {
   padding: var(--form-field-padding-y) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
   width: 100%;
   /* Hide Edge built-in password reveal and clear icons */
@@ -159,10 +159,10 @@ nv-fieldtext > .input-wrapper .input-container input::placeholder {
   overflow: hidden;
   color: var(--components-form-field-content-placeholder);
   text-overflow: ellipsis;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   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 {
@@ -184,7 +184,7 @@ nv-fieldtext > .description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);
@@ -195,7 +195,7 @@ nv-fieldtext > .error-description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);

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

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { nameof } from "../../utils/class.utils";
 const NvFieldtextDocs = {
     component: 'nv-fieldtext',
-    subcomponents: ['nv-badge', 'nv-button'],
+    subcomponents: ['nv-badge', 'nv-button', 'nv-icon'],
     stories: [
         {
             name: 'Default',
@@ -224,6 +224,14 @@ const NvFieldtextDocs = {
             },
             template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-button", { slot: "after-input" }, "After Input Slot"))),
         },
+        {
+            name: 'classOnly',
+            description: 'If you need complete control over the internals of a text field, you can use the class only version.',
+            args: {
+                label: 'Class Only',
+            },
+            template: (h("div", { class: "flex flex-col gap-4" }, h("div", { class: "nv-fieldtext" }, h("label", null, "Label"), h("div", { class: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { type: "text", placeholder: "placeholder" })))), h("div", { class: "nv-fieldtext fluid" }, h("label", null, "Label"), h("div", { class: "input-wrapper" }, h("div", { class: "input-container" }, h("div", { class: "leading-input" }, h("nv-badge", { label: "test" })), h("input", { type: "text", placeholder: "placeholder" }), h("div", { class: "trailing-input" }, "MWh")))), h("div", { class: "nv-fieldtext success" }, h("label", null, "Label"), h("div", { class: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { type: "text", placeholder: "placeholder" }), h("nv-icon", { name: "circle-check", class: "validation", size: "md" }))), h("div", { class: "description" }, "Description")), h("div", { class: "nv-fieldtext error" }, h("label", null, "Label"), h("div", { class: "input-wrapper" }, h("div", { class: "input-container" }, h("input", { type: "text", placeholder: "placeholder" }), h("nv-icon", { name: "alert-circle", class: "validation", size: "md" }))), h("div", { class: "description" }, "Description"), h("div", { class: "error-description" }, "Error description")))),
+        },
     ],
 };
 export default NvFieldtextDocs;

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: 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"]}
+{"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', 'nv-icon'],\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      name: 'classOnly',\n      description:\n        'If you need complete control over the internals of a text field, you can use the class only version.',\n      args: {\n        label: 'Class Only',\n      },\n      template: (\n        <div class=\"flex flex-col gap-4\">\n          <div class=\"nv-fieldtext\">\n            <label>Label</label>\n            <div class=\"input-wrapper\">\n              <div class=\"input-container\">\n                <input type=\"text\" placeholder=\"placeholder\" />\n              </div>\n            </div>\n          </div>\n\n          <div class=\"nv-fieldtext fluid\">\n            <label>Label</label>\n            <div class=\"input-wrapper\">\n              <div class=\"input-container\">\n                <div class=\"leading-input\">\n                  <nv-badge label=\"test\"></nv-badge>\n                </div>\n                <input type=\"text\" placeholder=\"placeholder\" />\n                <div class=\"trailing-input\">MWh</div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"nv-fieldtext success\">\n            <label>Label</label>\n            <div class=\"input-wrapper\">\n              <div class=\"input-container\">\n                <input type=\"text\" placeholder=\"placeholder\" />\n                <nv-icon name=\"circle-check\" class=\"validation\" size=\"md\" />\n              </div>\n            </div>\n            <div class=\"description\">Description</div>\n          </div>\n\n          <div class=\"nv-fieldtext error\">\n            <label>Label</label>\n            <div class=\"input-wrapper\">\n              <div class=\"input-container\">\n                <input type=\"text\" placeholder=\"placeholder\" />\n                <nv-icon name=\"alert-circle\" class=\"validation\" size=\"md\" />\n              </div>\n            </div>\n            <div class=\"description\">Description</div>\n            <div class=\"error-description\">Error description</div>\n          </div>\n        </div>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldtextDocs;\n"]}

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

@@ -88,7 +88,7 @@ nv-fieldtextarea[success]:not([success=false]) {
 nv-fieldtextarea[required]:not([required=false]) label::after {
   content: "*";
   color: var(--components-form-text-required);
-  font-weight: 700;
+  font-weight: var(--font-weight-high-emphasis);
 }
 nv-fieldtextarea label {
   display: flex;
@@ -96,10 +96,10 @@ nv-fieldtextarea label {
   gap: var(--form-label-gap);
   align-self: stretch;
   color: var(--components-form-text-label-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-label-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-label-line-height);
 }
 nv-fieldtextarea .textarea-wrapper {
@@ -152,7 +152,7 @@ nv-fieldtextarea .textarea-wrapper .textarea-container textarea {
   text-overflow: ellipsis;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 500;
+  font-weight: var(--font-weight-medium-emphasis);
   line-height: var(--form-field-line-height);
 }
 nv-fieldtextarea .textarea-wrapper .textarea-container textarea::-webkit-scrollbar {
@@ -174,10 +174,10 @@ nv-fieldtextarea .textarea-wrapper .textarea-container textarea::placeholder {
   overflow: hidden;
   color: var(--components-form-field-content-placeholder);
   text-overflow: ellipsis;
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-field-font-size);
   font-style: normal;
-  font-weight: 400;
+  font-weight: var(--font-weight-low-emphasis);
   line-height: var(--form-field-line-height);
 }
 nv-fieldtextarea .textarea-wrapper .textarea-container nv-icon.validation {
@@ -189,7 +189,7 @@ nv-fieldtextarea .description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);
@@ -200,7 +200,7 @@ nv-fieldtextarea .error-description {
   align-self: stretch;
   gap: var(--spacing-1);
   color: var(--components-form-text-description-default);
-  font-family: "TT Norms Pro", sans-serif;
+  font-family: var(--font-family-default), var(--font-family-fallback), sans-serif;
   font-size: var(--form-description-font-size);
   font-style: normal;
   line-height: var(--form-description-line-height);