@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

package/dist/collection/components/nv-fieldslider/partials/field-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-input.js","sourceRoot":"","sources":["../../../../../src/components/nv-fieldslider/partials/field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AA6CxB;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyC,KAAK,CAAC,EAAE;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,0DAA0D;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,uDAAuD;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,yDAAyD;IACzD,IAAI,SAAiB,CAAC;IACtB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,+DAA+D;YAC/D,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM,kBAAkB,GAAG,CACzB,KAAoE,EAC9D,EAAE;QACR,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,uDAAuD;QACvD,0BAA0B;QAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,OAAO,CAAC;YACN,KAAK,EAAE,QAAQ;YACf,KAAK;SACN,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,IAAI,cAAc,CAAC;QAC3C,oCACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,IACX,SAAS,IACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACjC,cAAc,EAAE,kBAAkB;YAEjC,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAC5C,gBAAgB,CACZ,CACR;YACA,eAAe,IAAI,CAClB,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,gBAAgB,IAC5C,eAAe,CACX,CACR,CACc,CACb,CACP,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * Props for the FieldInput component\n */\nexport interface FieldInputProps {\n  /** Whether this is a range slider */\n  range: boolean;\n  /** Whether to show the input field */\n  hasField: boolean;\n  /** The value for single mode */\n  value: number;\n  /** The values for range mode [min, max] */\n  rangeValue: number[];\n  /** Index (0 or 1) for range mode, ignored in single mode */\n  index?: number;\n  /** ID for the input field */\n  inputId: string;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size */\n  step: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Handler for input changes */\n  onInput: (details: {\n    /** Parsed value */\n    value: number | null;\n    /** Index (0 or 1) for range mode, ignored in single mode */\n    index?: number;\n  }) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n  /** Name attribute for the input field (for form submission) */\n  name?: string;\n  /** Name attribute for the end input field (when in range mode) */\n  endName?: string;\n}\n\n/**\n * Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n  const {\n    range,\n    hasField,\n    value,\n    rangeValue,\n    index,\n    inputId,\n    min,\n    max,\n    step,\n    disabled,\n    readonly,\n    onInput,\n    labelBeforeValue,\n    labelAfterValue,\n    name,\n    endName,\n  } = props;\n\n  // Determine the appropriate value based on mode and index\n  const fieldValue = range ? rangeValue[index] : value;\n\n  // In range mode, we need data-index for event handling\n  const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n  // Determine the appropriate name based on mode and index\n  let inputName: string;\n  if (range) {\n    if (index === 0) {\n      inputName = name || '';\n    } else {\n      // Use endName if provided, otherwise append \"-end\" to the name\n      inputName = endName || (name ? `${name}-end` : '');\n    }\n  } else {\n    inputName = name || '';\n  }\n\n  const handleValueChanged = (\n    event: CustomEvent<HTMLNvFieldnumberElementEventMap['valueChanged']>,\n  ): void => {\n    event.stopPropagation();\n    const newValue = event.detail;\n\n    // Accept null as a valid value (when field is cleared)\n    // Only reject NaN numbers\n    if (typeof newValue === 'number' && Number.isNaN(newValue)) {\n      return;\n    }\n\n    onInput({\n      value: newValue,\n      index,\n    });\n  };\n\n  return hasField ? (\n    <div class={clsx(!hasField && 'hidden-input')}>\n      <nv-fieldnumber\n        id={inputId}\n        value={fieldValue}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        readonly={readonly}\n        name={inputName}\n        {...dataAttrs}\n        onInput={e => e.stopPropagation()}\n        onValueChanged={handleValueChanged}\n      >\n        {labelBeforeValue && (\n          <span class=\"label-before\" slot=\"leading-input\">\n            {labelBeforeValue}\n          </span>\n        )}\n        {labelAfterValue && (\n          <span class=\"label-after\" slot=\"trailing-input\">\n            {labelAfterValue}\n          </span>\n        )}\n      </nv-fieldnumber>\n    </div>\n  ) : (\n    <input\n      id={inputId}\n      type=\"hidden\"\n      value={fieldValue}\n      disabled={disabled}\n      readonly={readonly}\n      name={inputName}\n    />\n  );\n};\n"]}
+{"version":3,"file":"field-input.js","sourceRoot":"","sources":["../../../../../src/components/nv-fieldslider/partials/field-input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,IAAI,MAAM,MAAM,CAAC;AA6CxB;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAyC,KAAK,CAAC,EAAE;IACtE,MAAM,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,UAAU,EACV,KAAK,EACL,OAAO,EACP,GAAG,EACH,GAAG,EACH,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,eAAe,EACf,IAAI,EACJ,OAAO,GACR,GAAG,KAAK,CAAC;IAEV,0DAA0D;IAC1D,MAAM,UAAU,GAAG,KAAK,CAAC,CAAC,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;IAErD,uDAAuD;IACvD,MAAM,SAAS,GAAG,KAAK,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;IAElE,yDAAyD;IACzD,IAAI,SAAiB,CAAC;IACtB,IAAI,KAAK,EAAE,CAAC;QACV,IAAI,KAAK,KAAK,CAAC,EAAE,CAAC;YAChB,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;QACzB,CAAC;aAAM,CAAC;YACN,+DAA+D;YAC/D,SAAS,GAAG,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QACrD,CAAC;IACH,CAAC;SAAM,CAAC;QACN,SAAS,GAAG,IAAI,IAAI,EAAE,CAAC;IACzB,CAAC;IAED,MAAM,kBAAkB,GAAG,CACzB,KAAoE,EAC9D,EAAE;QACR,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC;QAE9B,uDAAuD;QACvD,0BAA0B;QAC1B,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,OAAO,CAAC;YACN,KAAK,EAAE,QAAQ;YACf,KAAK;SACN,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,OAAO,QAAQ,CAAC,CAAC,CAAC,CAChB,WAAK,KAAK,EAAE,IAAI,CAAC,CAAC,QAAQ,IAAI,cAAc,CAAC;QAC3C,sBACE,EAAE,EAAE,OAAO,EACX,KAAK,EAAE,UAAU,EACjB,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,KACX,SAAS,EACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACjC,cAAc,EAAE,kBAAkB;YAEjC,gBAAgB,IAAI,CACnB,YAAM,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,eAAe,IAC5C,gBAAgB,CACZ,CACR;YACA,eAAe,IAAI,CAClB,YAAM,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,gBAAgB,IAC5C,eAAe,CACX,CACR,CACc,CACb,CACP,CAAC,CAAC,CAAC,CACF,aACE,EAAE,EAAE,OAAO,EACX,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,UAAU,EACjB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,GACf,CACH,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from '@stencil/core';\nimport clsx from 'clsx';\n\n/**\n * Props for the FieldInput component\n */\nexport interface FieldInputProps {\n  /** Whether this is a range slider */\n  range: boolean;\n  /** Whether to show the input field */\n  hasField: boolean;\n  /** The value for single mode */\n  value: number;\n  /** The values for range mode [min, max] */\n  rangeValue: number[];\n  /** Index (0 or 1) for range mode, ignored in single mode */\n  index?: number;\n  /** ID for the input field */\n  inputId: string;\n  /** Minimum allowed value */\n  min: number;\n  /** Maximum allowed value */\n  max: number;\n  /** Step size */\n  step: number;\n  /** Whether the slider is disabled */\n  disabled: boolean;\n  /** Whether the slider is readonly */\n  readonly: boolean;\n  /** Handler for input changes */\n  onInput: (details: {\n    /** Parsed value */\n    value: number | null;\n    /** Index (0 or 1) for range mode, ignored in single mode */\n    index?: number;\n  }) => void;\n  /** Label to display before the value */\n  labelBeforeValue?: string;\n  /** Label to display after the value */\n  labelAfterValue?: string;\n  /** Name attribute for the input field (for form submission) */\n  name?: string;\n  /** Name attribute for the end input field (when in range mode) */\n  endName?: string;\n}\n\n/**\n * Renders field input for direct value entry\n * @param {FieldInputProps} props - Component properties\n * @returns {JSX.Element} JSX element representing the field input\n */\nexport const FieldInput: FunctionalComponent<FieldInputProps> = props => {\n  const {\n    range,\n    hasField,\n    value,\n    rangeValue,\n    index,\n    inputId,\n    min,\n    max,\n    step,\n    disabled,\n    readonly,\n    onInput,\n    labelBeforeValue,\n    labelAfterValue,\n    name,\n    endName,\n  } = props;\n\n  // Determine the appropriate value based on mode and index\n  const fieldValue = range ? rangeValue[index] : value;\n\n  // In range mode, we need data-index for event handling\n  const dataAttrs = range ? { 'data-index': index.toString() } : {};\n\n  // Determine the appropriate name based on mode and index\n  let inputName: string;\n  if (range) {\n    if (index === 0) {\n      inputName = name || '';\n    } else {\n      // Use endName if provided, otherwise append \"-end\" to the name\n      inputName = endName || (name ? `${name}-end` : '');\n    }\n  } else {\n    inputName = name || '';\n  }\n\n  const handleValueChanged = (\n    event: CustomEvent<HTMLNvFieldnumberElementEventMap['valueChanged']>,\n  ): void => {\n    event.stopPropagation();\n    const newValue = event.detail;\n\n    // Accept null as a valid value (when field is cleared)\n    // Only reject NaN numbers\n    if (typeof newValue === 'number' && Number.isNaN(newValue)) {\n      return;\n    }\n\n    onInput({\n      value: newValue,\n      index,\n    });\n  };\n\n  return hasField ? (\n    <div class={clsx(!hasField && 'hidden-input')}>\n      <nv-fieldnumber\n        id={inputId}\n        value={fieldValue}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        readonly={readonly}\n        name={inputName}\n        {...dataAttrs}\n        onInput={e => e.stopPropagation()}\n        onValueChanged={handleValueChanged}\n      >\n        {labelBeforeValue && (\n          <span class=\"label-before\" slot=\"leading-input\">\n            {labelBeforeValue}\n          </span>\n        )}\n        {labelAfterValue && (\n          <span class=\"label-after\" slot=\"trailing-input\">\n            {labelAfterValue}\n          </span>\n        )}\n      </nv-fieldnumber>\n    </div>\n  ) : (\n    <input\n      id={inputId}\n      type=\"hidden\"\n      value={fieldValue}\n      disabled={disabled}\n      readonly={readonly}\n      name={inputName}\n    />\n  );\n};\n"]}

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

@@ -252,7 +252,7 @@ nv-fieldslider .slider-container .input-container input {
   overflow: hidden;
   background-color: transparent;
   color: var(--components-form-field-content-text);
-  padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
   font-weight: var(--font-weight-medium-emphasis);

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

@@ -143,7 +143,7 @@ nv-fieldtext > .input-wrapper .input-container input {
   overflow: hidden;
   background-color: transparent;
   color: var(--components-form-field-content-text);
-  padding: var(--form-field-padding-y) var(--form-field-padding-x);
+  padding: calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);
   font-size: var(--form-field-font-size);
   font-style: normal;
   font-weight: var(--font-weight-medium-emphasis);

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

@@ -4,10 +4,21 @@ const NvFieldtextDocs = {
     component: 'nv-fieldtext',
     subcomponents: ['nv-badge', 'nv-button', 'nv-icon'],
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // inputId
+        {
+            name: nameof(x => x.inputId),
+            args: {
+                label: 'Label',
+                inputId: 'custom-text-id',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        // label
         {
             name: nameof(x => x.label),
             args: {
@@ -15,6 +26,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // description
         {
             name: nameof(x => x.description),
             args: {
@@ -23,6 +35,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // placeholder
         {
             name: nameof(x => x.placeholder),
             args: {
@@ -31,6 +44,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // name
         {
             name: nameof(x => x.name),
             args: {
@@ -39,6 +53,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // value
         {
             name: nameof(x => x.value),
             args: {
@@ -47,6 +62,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // type
         {
             name: nameof(x => x.type),
             args: {
@@ -55,6 +71,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // disabled
         {
             name: nameof(x => x.disabled),
             args: {
@@ -63,6 +80,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // readonly
         {
             name: nameof(x => x.readonly),
             args: {
@@ -72,6 +90,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // required
         {
             name: nameof(x => x.required),
             args: {
@@ -80,6 +99,16 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // ariaRequiredAttr
+        {
+            name: nameof(x => x.ariaRequiredAttr),
+            args: {
+                label: 'Aria Required Textfield',
+                ariaRequiredAttr: true,
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        // error
         {
             name: nameof(x => x.error),
             args: {
@@ -88,6 +117,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // errorDescription
         {
             name: nameof(x => x.errorDescription),
             args: {
@@ -98,6 +128,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // success
         {
             name: nameof(x => x.success),
             args: {
@@ -106,6 +137,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // maxlength
         {
             name: nameof(x => x.maxlength),
             args: {
@@ -114,6 +146,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // minlength
         {
             name: nameof(x => x.minlength),
             args: {
@@ -122,6 +155,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // pattern
         {
             name: nameof(x => x.pattern),
             args: {
@@ -130,6 +164,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // autocomplete
         {
             name: nameof(x => x.autocomplete),
             args: {
@@ -138,6 +173,7 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // multiple
         {
             name: nameof(x => x.multiple),
             args: {
@@ -147,14 +183,16 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // autofocus
         {
             name: nameof(x => x.autofocus),
             args: {
-                label: 'Textfield Autofocus',
+                label: 'Autofocus',
                 autofocus: true,
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // fluid
         {
             name: nameof(x => x.fluid),
             args: {
@@ -163,32 +201,75 @@ const NvFieldtextDocs = {
             },
             template: h("nv-fieldtext", { "data-storybook-args": true }),
         },
+        // message
         {
-            name: 'leadingInputSlot',
+            name: nameof(x => x.message),
+            description: "Deprecated: Use 'description' instead. Message defines a 'hint' message for the Text Field.",
+            args: {
+                label: 'Message (Deprecated)',
+                message: 'This is a hint message',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        // validation
+        {
+            name: nameof(x => x.validation),
+            description: 'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',
+            args: {
+                label: 'Validation (Deprecated)',
+                validation: 'This is a validation message',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        // textInputType
+        {
+            name: nameof(x => x.textInputType),
+            description: 'Deprecated: use type instead. Type of the input.',
+            args: {
+                label: 'Text Input Type (Deprecated)',
+                textInputType: 'email',
+            },
+            template: h("nv-fieldtext", { "data-storybook-args": true }),
+        },
+        // classOnly
+        {
+            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")))),
+        },
+        // SlotLeadingInput
+        {
+            name: 'SlotLeadingInput',
             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 }))),
         },
+        // SlotTrailingInput
         {
-            name: 'trailingInputSlot',
+            name: 'SlotTrailingInput',
             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"))),
         },
+        // SlotLabel
         {
-            name: 'labelSlot',
+            name: 'SlotLabel',
             description: 'Content to be placed as the label, will override the label prop.',
             args: {
                 label: 'Original Label',
             },
             template: (h("nv-fieldtext", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label Slot"))),
         },
+        // SlotDescription
         {
-            name: 'descriptionSlot',
+            name: 'SlotDescription',
             description: 'Content to be placed as the description, will override the description prop.',
             args: {
                 label: 'Description Slot',
@@ -196,8 +277,9 @@ const NvFieldtextDocs = {
             },
             template: (h("nv-fieldtext", { "data-storybook-args": true }, h("span", { slot: "description" }, "Custom Description"))),
         },
+        // SlotErrorDescription
         {
-            name: 'errorDescriptionSlot',
+            name: 'SlotErrorDescription',
             description: 'Content to be placed as the error description, will override the errorDescription prop.',
             args: {
                 label: 'Error Description Slot',
@@ -206,8 +288,9 @@ const NvFieldtextDocs = {
             },
             template: (h("nv-fieldtext", { "data-storybook-args": true }, h("span", { slot: "error-description" }, "Custom Error Description"))),
         },
+        // SlotBeforeInput
         {
-            name: 'beforeInputSlot',
+            name: 'SlotBeforeInput',
             description: 'Content to be placed before the input text, outside the input container.',
             args: {
                 label: 'Before Input Slot',
@@ -215,8 +298,9 @@ const NvFieldtextDocs = {
             },
             template: (h("nv-fieldtext", { "data-storybook-args": true }, h("nv-button", { slot: "before-input" }, "Before Input Slot"))),
         },
+        // SlotAfterInput
         {
-            name: 'afterInputSlot',
+            name: 'SlotAfterInput',
             description: 'Content to be placed after the input text, outside the input container.',
             args: {
                 label: 'After Input Slot',
@@ -224,14 +308,6 @@ 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', '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"]}
+{"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    // Default\n    {\n      name: 'Default',\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // inputId\n    {\n      name: nameof<Components.NvFieldtext>(x => x.inputId),\n      args: {\n        label: 'Label',\n        inputId: 'custom-text-id',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // label\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    // description\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    // placeholder\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    // name\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    // value\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    // type\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    // disabled\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    // readonly\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    // required\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    // ariaRequiredAttr\n    {\n      name: nameof<Components.NvFieldtext>(x => x.ariaRequiredAttr),\n      args: {\n        label: 'Aria Required Textfield',\n        ariaRequiredAttr: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // error\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    // errorDescription\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    // success\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    // maxlength\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    // minlength\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    // pattern\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    // autocomplete\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    // multiple\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    // autofocus\n    {\n      name: nameof<Components.NvFieldtext>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // fluid\n    {\n      name: nameof<Components.NvFieldtext>(x => x.fluid),\n      args: {\n        label: 'Fluid',\n        fluid: true,\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // message\n    {\n      name: nameof<Components.NvFieldtext>(x => x.message),\n      description:\n        \"Deprecated: Use 'description' instead. Message defines a 'hint' message for the Text Field.\",\n      args: {\n        label: 'Message (Deprecated)',\n        message: 'This is a hint message',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // validation\n    {\n      name: nameof<Components.NvFieldtext>(x => x.validation),\n      description:\n        'Deprecated: Use errorDescription and set the error prop instead. Add the message to the validation state.',\n      args: {\n        label: 'Validation (Deprecated)',\n        validation: 'This is a validation message',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // textInputType\n    {\n      name: nameof<Components.NvFieldtext>(x => x.textInputType),\n      description: 'Deprecated: use type instead. Type of the input.',\n      args: {\n        label: 'Text Input Type (Deprecated)',\n        textInputType: 'email',\n      },\n      template: <nv-fieldtext data-storybook-args></nv-fieldtext>,\n    },\n    // classOnly\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    // SlotLeadingInput\n    {\n      name: 'SlotLeadingInput',\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    // SlotTrailingInput\n    {\n      name: 'SlotTrailingInput',\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    // SlotLabel\n    {\n      name: 'SlotLabel',\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    // SlotDescription\n    {\n      name: 'SlotDescription',\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    // SlotErrorDescription\n    {\n      name: 'SlotErrorDescription',\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    // SlotBeforeInput\n    {\n      name: 'SlotBeforeInput',\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    // SlotAfterInput\n    {\n      name: 'SlotAfterInput',\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

@@ -148,11 +148,11 @@ export class NvFieldtext {
             ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''
             : undefined;
         const useNativeRequired = this.required && (!useAriaRequired || ariaRequiredValue === true);
-        return (h(Host, { key: '0cbae961a0d59fcba4fb273fb813a690fe66e139' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'e8523abecb5db03407c99bec4aef29292c54b8b9', htmlFor: this.inputId }, h("slot", { key: '794b1363cbc29d628c57c14630d929b80f1fea62', name: "label" }, this.label))), h("div", { key: 'fa592d4df8d53534d051d874cb640fd42d991a64', class: "input-wrapper" }, h("slot", { key: '5473b8c7259be5e51b771f01450a2b07d449d590', name: "before-input" }), h("div", { key: '7901740dd1e0e1c11f34c50f72ca0bb6eb0c62e7', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '3894a124bcad3f66cdd50f74781e99720fd3bf3a', name: "leading-input" }), h("input", Object.assign({ key: 'c59aa092005df1b24321666e98fa72fd70ac8e55', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined }, (ariaRequiredValue !== undefined && {
-            'aria-required': String(ariaRequiredValue),
-        }), { 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: '0ff21168be1eff0b34f342c9e7adda8d3bb0ea30', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'b86f7cb07c86c07273ee0a77e673addef50902e2', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: 'f3e1f2bcaf4f009b5d560921e3d3c28e8ae26d41', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: '0e68fd5bb2d4d5c244f4f17b66fda7e73a0868ae', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '6ad45dd3c28d6097ea339279df6a1477e021e633', class: "description" }, h("slot", { key: '401cd1e43d57fc357f04bb7009e02bafade6de62', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f67e669eed3fe013a18e26588a608afe32d76fba', hidden: !this.error, class: "error-description" }, h("slot", { key: '20a32f3a875bc8f036ad133c4b0d87deb5b92b5c', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '95643ae488ca32bc792ac572fd127f358f881894' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '35d52de7041b6297af9feca3c0b19f480cacac54', htmlFor: this.inputId }, h("slot", { key: 'd866c825300faf563ded34e1a9960f14522d201f', name: "label" }, this.label))), h("div", { key: '923c5a4f9f8c9c2bf269a58896f070e3dba2be08', class: "input-wrapper" }, h("slot", { key: '933e05c2a3e4ec0429c90dfd8fc799250b8c8fed', name: "before-input" }), h("div", { key: '7cde9f8dd874269ddfca691946de52764764cbb2', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '55a6c1302a71fc5c5ea75708e09751407e3dfd10', name: "leading-input" }), h("input", { key: '324c57a9c6c590edb178a8821444842b55f19f2e', id: this.inputId, ref: e => (this.inputElement = e), placeholder: this.placeholder, name: this.name, type: this.type, disabled: this.disabled, readOnly: this.readonly, required: useNativeRequired ? this.required : undefined, ...(ariaRequiredValue !== undefined && {
+                'aria-required': String(ariaRequiredValue),
+            }), 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: 'cd9558b2939d1b935ac342eef24729a88425dcc9', name: "trailing-input" }), this.error && (h("nv-icon", { key: 'd7834369c4b8d7bd095f9f602e176fe8fea0a92e', name: "alert-circle", class: "validation", size: "md" })), this.success && (h("nv-icon", { key: '3e6714d10d4d21d6cc4912ea074810e3c11fa0a9', name: "circle-check", class: "validation", size: "md" }))), h("slot", { key: 'db6e9212d31d2f8b0d4f1379df6d8c41da96d587', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '829f38f3fa67e7bed5d08f6c9f416fbe39e807b6', class: "description" }, h("slot", { key: 'a3c63f1903fcdc25be26725b1f0b0b09dabe54a5', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'c2150b17c0385a5b2019db64eba7358ed07f62a4', hidden: !this.error, class: "error-description" }, h("slot", { key: 'a43078cd173e92fa7b17b0f72f302a3196acd1ba', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldtext"; }
     static get formAssociated() { return true; }

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 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   * @note This uses the native HTML `required` attribute, which triggers browser validation.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Marks the input field as required for accessibility purposes without triggering\n   * native HTML validation. Use this when implementing custom validation logic.\n   * @note When set, this uses `aria-required` instead of the native `required` attribute.\n   * This allows developers to implement custom validation while maintaining accessibility.\n   * @note If this prop is not explicitly set, the component will check for the HTML attribute\n   * 'aria-required' directly to determine if it should be applied.\n   */\n  @Prop({ reflect: true, attribute: 'aria-required' })\n  readonly ariaRequiredAttr: 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({ bubbles: false })\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    // Check aria-required from multiple sources:\n    // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n    // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n    // We use hasAttribute to determine if the attribute was explicitly set by the user,\n    // since the prop now defaults to false (to maintain Blazor compatibility)\n    const hasAriaRequiredAttr =\n      this.el.hasAttribute('aria-required') ||\n      this.el.hasAttribute('aria-required-attr');\n\n    const ariaRequiredFromAttr = hasAriaRequiredAttr\n      ? this.el.getAttribute('aria-required') ||\n        this.el.getAttribute('aria-required-attr')\n      : null;\n\n    // Use aria-required if the attribute was explicitly set\n    // With reflect: true, setting the prop will also set the attribute\n    const useAriaRequired = hasAriaRequiredAttr;\n\n    // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n    // If attribute doesn't exist, the prop was never set and we don't use aria-required\n    const ariaRequiredAttrValue = hasAriaRequiredAttr\n      ? ariaRequiredFromAttr\n      : null;\n\n    // Determine which attributes to use\n    // If aria-required HTML attribute is present, use it (convert string to boolean)\n    // If required is set and aria-required is not \"false\", use native required\n    // If aria-required is \"false\", don't use native required even if required is set\n    const ariaRequiredValue = useAriaRequired\n      ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''\n      : undefined;\n\n    const useNativeRequired =\n      this.required && (!useAriaRequired || ariaRequiredValue === true);\n\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={useNativeRequired ? this.required : undefined}\n              {...(ariaRequiredValue !== undefined && {\n                'aria-required': String(ariaRequiredValue),\n              })}\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"]}
+{"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   * @note This uses the native HTML `required` attribute, which triggers browser validation.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Marks the input field as required for accessibility purposes without triggering\n   * native HTML validation. Use this when implementing custom validation logic.\n   * @note When set, this uses `aria-required` instead of the native `required` attribute.\n   * This allows developers to implement custom validation while maintaining accessibility.\n   * @note If this prop is not explicitly set, the component will check for the HTML attribute\n   * 'aria-required' directly to determine if it should be applied.\n   */\n  @Prop({ reflect: true, attribute: 'aria-required' })\n  readonly ariaRequiredAttr: 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({ bubbles: false })\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    // Check aria-required from multiple sources:\n    // 1. HTML attribute 'aria-required' (direct HTML) - check if explicitly set\n    // 2. JavaScript prop (when prop is explicitly set via JavaScript)\n    // We use hasAttribute to determine if the attribute was explicitly set by the user,\n    // since the prop now defaults to false (to maintain Blazor compatibility)\n    const hasAriaRequiredAttr =\n      this.el.hasAttribute('aria-required') ||\n      this.el.hasAttribute('aria-required-attr');\n\n    const ariaRequiredFromAttr = hasAriaRequiredAttr\n      ? this.el.getAttribute('aria-required') ||\n        this.el.getAttribute('aria-required-attr')\n      : null;\n\n    // Use aria-required if the attribute was explicitly set\n    // With reflect: true, setting the prop will also set the attribute\n    const useAriaRequired = hasAriaRequiredAttr;\n\n    // Determine the value: use attribute if it exists (prop reflects to attribute via reflect: true)\n    // If attribute doesn't exist, the prop was never set and we don't use aria-required\n    const ariaRequiredAttrValue = hasAriaRequiredAttr\n      ? ariaRequiredFromAttr\n      : null;\n\n    // Determine which attributes to use\n    // If aria-required HTML attribute is present, use it (convert string to boolean)\n    // If required is set and aria-required is not \"false\", use native required\n    // If aria-required is \"false\", don't use native required even if required is set\n    const ariaRequiredValue = useAriaRequired\n      ? ariaRequiredAttrValue === 'true' || ariaRequiredAttrValue === ''\n      : undefined;\n\n    const useNativeRequired =\n      this.required && (!useAriaRequired || ariaRequiredValue === true);\n\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={useNativeRequired ? this.required : undefined}\n              {...(ariaRequiredValue !== undefined && {\n                'aria-required': String(ariaRequiredValue),\n              })}\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"]}