@nova-design-system/nova-webcomponents 3.0.0-beta.37 → 3.0.0-beta.39

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldnumber.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop()\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()\n  readonly validation: string;\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   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\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   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<number>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = Number(input.value);\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private isMinValueReached = (): boolean => {\n    return this.min !== undefined && this.value <= this.min;\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return this.max !== undefined && this.value >= this.max;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              required={this.required}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\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 class=\"stepper-spacer\"></div>\n            <div class=\"stepper\">\n              <nv-icon\n                name=\"minus\"\n                size=\"md\"\n                onClick={this.handleMinus}\n                class={clsx({ disabled: this.isMinValueReached() })}\n              />\n              <nv-icon\n                name=\"plus\"\n                size=\"md\"\n                onClick={this.handlePlus}\n                class={clsx({ disabled: this.isMaxValueReached() })}\n              />\n            </div>\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-fieldnumber.js","sourceRoot":"","sources":["../../../src/components/nv-fieldnumber/nv-fieldnumber.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Watch,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldnumber',\n  styleUrl: 'nv-fieldnumber.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldnumber {\n  @Element() el: HTMLNvFieldnumberElement;\n  private inputElement!: HTMLInputElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Message defines a 'hint ' message for the number field.\n   * @deprecated Use `description` instead.\n   */\n  @Prop()\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()\n  readonly validation: string;\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   * The disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true, mutable: true })\n  error: boolean = false;\n\n  /**\n   * Show a helpful message under the input field when there’s a problem. It\n   * explains what’s wrong and how users can fix it, making the error easier to\n   * understand and resolve.\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   * The maximum value that the input field can accept. Use this in combination\n   * with min to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly max: number;\n\n  /**\n   * The minimum value that the input field can accept. Use this in combination\n   * with max to create a range of valid values.\n   */\n  @Prop({ reflect: true })\n  readonly min: number;\n\n  /**\n   * Define the increment value for the input field. It determines how much the\n   * value will increase or decrease when the user clicks the stepper buttons.\n   */\n  @Prop({ reflect: true })\n  readonly step: number = 1;\n\n  /**\n   * The value of the input field. It’s the text that users type in or the value\n   * that you set programmatically. This is the main way to interact with the\n   * input field, and it’s essential for creating forms that users can fill out.\n   */\n  @Prop({ reflect: true, mutable: true })\n  value: number;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<number>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  @Watch('value')\n  watchValueHandler(newValue: number) {\n    this.valueChanged.emit(newValue);\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = Number(input.value);\n  };\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  private handlePlus = () => {\n    this.inputElement.stepUp();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private handleMinus = () => {\n    this.inputElement.stepDown();\n    this.value = Number(this.inputElement.value);\n  };\n\n  private isMinValueReached = (): boolean => {\n    return this.min !== undefined && this.value <= this.min;\n  };\n\n  private isMaxValueReached = (): boolean => {\n    return this.max !== undefined && this.value >= this.max;\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region LIFECYCLE\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.validation) {\n      this.errorDescription = this.validation;\n      this.error = true;\n    }\n  }\n\n  //#endregion LIFECYCLE\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              placeholder={this.placeholder}\n              name={this.name}\n              type=\"number\"\n              autofocus={this.autofocus}\n              required={this.required}\n              max={this.max}\n              min={this.min}\n              step={this.step}\n              value={this.value}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\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 class=\"stepper-spacer\"></div>\n            <div class=\"stepper\">\n              <nv-icon\n                name=\"minus\"\n                size=\"md\"\n                onClick={this.handleMinus}\n                class={clsx({ disabled: this.isMinValueReached() })}\n              />\n              <nv-icon\n                name=\"plus\"\n                size=\"md\"\n                onClick={this.handlePlus}\n                class={clsx({ disabled: this.isMaxValueReached() })}\n              />\n            </div>\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -72,7 +72,7 @@ nv-fieldpassword .input-wrapper .input-container {
   border-width: 1px;
   border-style: solid;
   border-color: var(--nv-field-border-default);
-  opacity: var(--components-form-opacity-default);
+  opacity: var(--components-form-opacity-default, 1);
   background: var(--nv-field-background);
   transition: all 150ms ease-out;
   position: relative;
@@ -80,7 +80,7 @@ nv-fieldpassword .input-wrapper .input-container {
 nv-fieldpassword .input-wrapper .input-container:hover {
   border-color: var(--nv-field-border-hover);
 }
-nv-fieldpassword .input-wrapper .input-container:focus-within {
+nv-fieldpassword .input-wrapper .input-container:focus-within, nv-fieldpassword .input-wrapper .input-container:focus-within:hover, nv-fieldpassword .input-wrapper .input-container:focus, nv-fieldpassword .input-wrapper .input-container:focus:hover {
   border-color: var(--nv-field-border-focus);
   box-shadow: 0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow);
 }

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

@@ -131,6 +131,14 @@ const NvFieldpasswordDocs = {
             },
             template: h("nv-fieldpassword", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.autofocus),
+            args: {
+                label: 'Autofocus',
+                autofocus: true,
+            },
+            template: h("nv-fieldpassword", { "data-storybook-args": true }),
+        },
         {
             name: 'beforeInputSlot',
             description: 'Content to be placed before the input text, outside the input container.',

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldpassword.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldpassword/nv-fieldpassword.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 NvFieldpasswordDocs: NovaDocs<Components.NvFieldpassword> = {\n  component: 'nv-fieldpassword',\n  subcomponents: ['nv-button', 'nv-badge'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.label),\n      args: {\n        label: 'Password Label',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.description),\n      args: {\n        label: 'Password Description',\n        description: 'Enter a strong password.',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.placeholder),\n      args: {\n        label: 'Password Placeholder',\n        placeholder: 'Enter your password...',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.name),\n      args: {\n        label: 'Password Name',\n        name: 'password',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.value),\n      args: {\n        label: 'Password Value',\n        value: 'password123',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.disabled),\n      args: {\n        label: 'Password Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.readonly),\n      args: {\n        label: 'Password Readonly',\n        readonly: true,\n        value: 'readonlypassword',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.required),\n      args: {\n        label: 'Password Required',\n        required: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.error),\n      args: {\n        label: 'Password Error',\n        error: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.errorDescription),\n      args: {\n        label: 'Password Error Description',\n        description: 'Ensure your password is correct.',\n        error: true,\n        errorDescription: 'This password is incorrect.',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.success),\n      args: {\n        label: 'Password Success',\n        success: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.maxlength),\n      args: {\n        label: 'Password Max Length (max 4 characters)',\n        maxlength: 4,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.minlength),\n      args: {\n        label: 'Password Min Length (min 4 characters)',\n        minlength: 4,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.hidePasswordIcon),\n      args: {\n        label: 'Password Hide Icon',\n        hidePasswordIcon: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.showPassword),\n      args: {\n        label: 'Password Show Text',\n        value: 'password123',\n        showPassword: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\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: 'This is placed before the password field',\n      },\n      template: (\n        <nv-fieldpassword data-storybook-args>\n          <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n        </nv-fieldpassword>\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: 'This is placed after the password field',\n      },\n      template: (\n        <nv-fieldpassword data-storybook-args>\n          <nv-button slot=\"after-input\">After Input Slot</nv-button>\n        </nv-fieldpassword>\n      ),\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-fieldpassword data-storybook-args>\n          <nv-badge slot=\"leading-input\" label=\"Leading\" dismissible></nv-badge>\n        </nv-fieldpassword>\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-fieldpassword data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldpassword>\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-fieldpassword data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldpassword>\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-fieldpassword data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldpassword>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldpasswordDocs;\n"]}
+{"version":3,"file":"nv-fieldpassword.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldpassword/nv-fieldpassword.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 NvFieldpasswordDocs: NovaDocs<Components.NvFieldpassword> = {\n  component: 'nv-fieldpassword',\n  subcomponents: ['nv-button', 'nv-badge'],\n  stories: [\n    {\n      name: 'Default',\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.label),\n      args: {\n        label: 'Password Label',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.description),\n      args: {\n        label: 'Password Description',\n        description: 'Enter a strong password.',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.placeholder),\n      args: {\n        label: 'Password Placeholder',\n        placeholder: 'Enter your password...',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.name),\n      args: {\n        label: 'Password Name',\n        name: 'password',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.value),\n      args: {\n        label: 'Password Value',\n        value: 'password123',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.disabled),\n      args: {\n        label: 'Password Disabled',\n        disabled: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.readonly),\n      args: {\n        label: 'Password Readonly',\n        readonly: true,\n        value: 'readonlypassword',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.required),\n      args: {\n        label: 'Password Required',\n        required: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.error),\n      args: {\n        label: 'Password Error',\n        error: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.errorDescription),\n      args: {\n        label: 'Password Error Description',\n        description: 'Ensure your password is correct.',\n        error: true,\n        errorDescription: 'This password is incorrect.',\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.success),\n      args: {\n        label: 'Password Success',\n        success: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.maxlength),\n      args: {\n        label: 'Password Max Length (max 4 characters)',\n        maxlength: 4,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.minlength),\n      args: {\n        label: 'Password Min Length (min 4 characters)',\n        minlength: 4,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.hidePasswordIcon),\n      args: {\n        label: 'Password Hide Icon',\n        hidePasswordIcon: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.showPassword),\n      args: {\n        label: 'Password Show Text',\n        value: 'password123',\n        showPassword: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\n    },\n    {\n      name: nameof<Components.NvFieldpassword>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldpassword data-storybook-args></nv-fieldpassword>,\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: 'This is placed before the password field',\n      },\n      template: (\n        <nv-fieldpassword data-storybook-args>\n          <nv-button slot=\"before-input\">Before Input Slot</nv-button>\n        </nv-fieldpassword>\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: 'This is placed after the password field',\n      },\n      template: (\n        <nv-fieldpassword data-storybook-args>\n          <nv-button slot=\"after-input\">After Input Slot</nv-button>\n        </nv-fieldpassword>\n      ),\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-fieldpassword data-storybook-args>\n          <nv-badge slot=\"leading-input\" label=\"Leading\" dismissible></nv-badge>\n        </nv-fieldpassword>\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-fieldpassword data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldpassword>\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-fieldpassword data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldpassword>\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-fieldpassword data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldpassword>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldpasswordDocs;\n"]}

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

@@ -71,6 +71,12 @@ export class NvFieldpassword {
          * Defines whether the password is visible or not.
          */
         this.showPasswordState = this.showPassword;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -101,9 +107,9 @@ export class NvFieldpassword {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '436b6bf9c16611d50b3cefae0b2380cee3eca0c6' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '2411ae48cb83db606a21f3f19bd008974841ad9a', htmlFor: this.inputId }, h("slot", { key: '4b1843af3d0d11cded7eb354c779486e48ad989b', name: "label" }, this.label))), h("div", { key: '0114ed1fa309c1df8be1cab6e18475b3e7fc34dc', class: "input-wrapper" }, h("slot", { key: '4bf039f3e17beb1115ba6099d13e9adb23eca3c2', name: "before-input" }), h("div", { key: 'f23ab3d1a0b28d344a667f99c8dd724d626d82fa', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '1a6428bda44219a2a98ab93a034a6d69f4ca98cd', name: "leading-input" }), h("input", { key: 'a72a271798bc03a57508ea741d47e1ca85b3fa08', id: this.inputId, ref: e => (this.inputElement = e), autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), !this.hidePasswordIcon && (h("nv-iconbutton", { key: '96366b1566880736596184c6c7dac481d1a190ae', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (h("nv-icon", { key: 'e6ec810a41dbbc2361d15e7b806c681e72c0a0f6', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), h("slot", { key: 'a76b800fa51332d72b6e70e6a2fe108b465fd386', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c6f84e11fd78209c96962878f122ad9968a6565d', class: "description" }, h("slot", { key: '573529d2ea58260e23b3371c34a8c78145bbcab5', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'eaf73702cd472457cefae98438ba7001f4dddc89', hidden: !this.error, class: "error-description" }, h("slot", { key: '2f1e983d78f4e0f5879b6bd163d76e1511026fb6', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'a2a75f57ed5aab1871093e0dc8cb1fc69bbcd629' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ae72e6b94840984218b27a31ad73e0f8045ca7ec', htmlFor: this.inputId }, h("slot", { key: 'ed5944910dcc313d5d714da59335997e940db46a', name: "label" }, this.label))), h("div", { key: '8253dfa7980a3b8296eb87340279e9d7d541dcf5', class: "input-wrapper" }, h("slot", { key: '8175a3cff67ab23147137b2c0eb90011a599fff1', name: "before-input" }), h("div", { key: 'ba8c2cc23f94de4c35682e8fa5d5f03ddc5f682b', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '086607d8ab45057b91c5c4bce05555df1c2cf908', name: "leading-input" }), h("input", { key: 'acf906ca1704017f77edde85529f06610d434606', id: this.inputId, ref: e => (this.inputElement = e), autofocus: this.autofocus, autocomplete: this.autocomplete, placeholder: this.placeholder, name: this.name, type: this.showPasswordState ? 'text' : 'password', inputMode: this.mode, value: this.value, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput }), !this.hidePasswordIcon && (h("nv-iconbutton", { key: '89c996d184b91cdb27a7d5fc6c8591ef678e4830', class: "toggle-password-icon", name: this.showPasswordState ? 'eye' : 'eye-off', size: "md", emphasis: "lower", onClick: this.togglePasswordVisibility, onKeyDown: this.handleKeyDown, "aria-label": this.showPasswordState ? 'Hide password' : 'Show password', "aria-pressed": this.showPasswordState.toString() })), (this.success || this.error) && (h("nv-icon", { key: '650e6ab57d36aab285b7d3648eeca9272c5967b9', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), h("slot", { key: '05cca97a872c4c45e1bf6b76bbf0dfdeaa5dd9d7', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '4a0816cfb135de9b787e89cfed15d69cd3006674', class: "description" }, h("slot", { key: 'a549520294ab5b05671e1621977001da5dd0b366', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '0f94385395ad3a178d0567e582c297b7065ada10', hidden: !this.error, class: "error-description" }, h("slot", { key: 'dc1496e3a175192aa15d68985d157687e64828b2', name: "error-description" }, this.errorDescription)))));
     }
     static get is() { return "nv-fieldpassword"; }
     static get formAssociated() { return true; }
@@ -444,7 +450,7 @@ export class NvFieldpassword {
                 "mutable": false,
                 "complexType": {
                     "original": "`${TextInputAutocomplete}`",
-                    "resolved": "\"on\" | \"off\" | \"home\" | \"section-*\" | \"shipping\" | \"billing\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
+                    "resolved": "\"on\" | \"off\" | \"section-*\" | \"shipping\" | \"billing\" | \"home\" | \"work\" | \"mobile\" | \"fax\" | \"pager\" | \"tel\" | \"tel-country-code\" | \"tel-national\" | \"tel-area-code\" | \"tel-local\" | \"tel-local-prefix\" | \"tel-local-suffix\" | \"tel-extension\" | \"email\" | \"impp\" | \"name\" | \"honorific-prefix\" | \"given-name\" | \"additional-name\" | \"family-name\" | \"honorific-suffix\" | \"nickname\" | \"username\" | \"new-password\" | \"current-password\" | \"one-time-code\" | \"organization-title\" | \"organization\" | \"street-address\" | \"address-line1\" | \"address-line2\" | \"address-line3\" | \"address-level4\" | \"address-level3\" | \"address-level2\" | \"address-level1\" | \"country\" | \"country-name\" | \"postal-code\" | \"cc-name\" | \"cc-given-name\" | \"cc-additional-name\" | \"cc-family-name\" | \"cc-number\" | \"cc-exp\" | \"cc-exp-month\" | \"cc-exp-year\" | \"cc-csc\" | \"cc-type\" | \"transaction-currency\" | \"transaction-amount\" | \"language\" | \"bday\" | \"bday-day\" | \"bday-month\" | \"bday-year\" | \"sex\" | \"url\" | \"photo\"",
                     "references": {
                         "TextInputAutocomplete": {
                             "location": "import",
@@ -504,6 +510,26 @@ export class NvFieldpassword {
                 "attribute": "show-password",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autofocus",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldpassword.js","sourceRoot":"","sources":["../../../src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n  Watch,\n} from '@stencil/core';\n\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n\n@Component({\n  tag: 'nv-fieldpassword',\n  styleUrl: 'nv-fieldpassword.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldpassword {\n  @Element() el: HTMLNvFieldpasswordElement;\n  private inputElement!: HTMLInputElement;\n\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  // eslint-disable-next-line @stencil-community/strict-mutable\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 disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the password\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly 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 on form submission.\n   * the rules are applied to the input value via regexes.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * Defines the type of the input.\n   * @default 'text'\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'text' | 'number' = 'text';\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}` = 'off';\n\n  /**\n   * Hide the button to show/hide the password.\n   */\n  @Prop({ reflect: true })\n  readonly hidePasswordIcon: boolean = false;\n\n  /**\n   * Show/hide the password programmatically.\n   */\n  @Prop({ reflect: true })\n  readonly showPassword: boolean = false;\n\n  /**\n   * Defines whether the password is visible or not.\n   */\n  @State()\n  showPasswordState: boolean = this.showPassword;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  @Watch('showPassword')\n  handleShowPasswordChange(newValue: boolean) {\n    this.showPasswordState = newValue;\n  }\n\n  private togglePasswordVisibility = () => {\n    this.showPasswordState = !this.showPasswordState;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ') {\n      event.preventDefault(); // Prevent the space character from being added\n      setTimeout(() => {\n        this.togglePasswordVisibility();\n      }, 0);\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value; // Update the input value without worrying about the space\n    this.valueChanged.emit(input.value);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              autocomplete={this.autocomplete}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.showPasswordState ? 'text' : 'password'}\n              inputMode={this.mode}\n              value={this.value}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            {!this.hidePasswordIcon && (\n              <nv-iconbutton\n                class=\"toggle-password-icon\"\n                name={this.showPasswordState ? 'eye' : 'eye-off'}\n                size=\"md\"\n                emphasis=\"lower\"\n                onClick={this.togglePasswordVisibility}\n                onKeyDown={this.handleKeyDown}\n                aria-label={\n                  this.showPasswordState ? 'Hide password' : 'Show password'\n                }\n                aria-pressed={this.showPasswordState.toString()}\n              />\n            )}\n\n            {(this.success || this.error) && (\n              <nv-icon\n                name={this.success ? 'circle-check' : 'alert-circle'}\n                class=\"validation\"\n                size=\"md\"\n              />\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-fieldpassword.js","sourceRoot":"","sources":["../../../src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Prop,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  State,\n  Watch,\n} from '@stencil/core';\nimport { v4 as uuidv4 } from 'uuid';\nimport { TextInputAutocomplete } from '../../utils/constants';\n\n/**\n * @slot leading-input - Content to be placed before the input text, within the input container.\n * @slot before-input - Content to be placed before the input text, outside the input container.\n * @slot after-input - Content to be placed after the input text, outside the input container.\n * @slot label - Content to be placed as the label, will override the label prop.\n * @slot description - Content to be placed as the description, will override the description prop.\n * @slot error-description - Content to be placed as the error description, will override the errorDescription prop.\n */\n@Component({\n  tag: 'nv-fieldpassword',\n  styleUrl: 'nv-fieldpassword.scss',\n  shadow: false,\n  formAssociated: true,\n})\nexport class NvFieldpassword {\n  @Element() el: HTMLNvFieldpasswordElement;\n  private inputElement!: HTMLInputElement;\n\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  // eslint-disable-next-line @stencil-community/strict-mutable\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 disabled prop lets you turn off the input field so that users can’t\n   * type in it. When disabled, the field is grayed out and won’t respond to#\n   * clicks or touches.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Display the input field’s content without allowing users to change it.\n   * Users can still click on it, select, and copy the text, but they won’t be\n   * able to type or delete anything.\n   */\n  @Prop({ reflect: true })\n  readonly readonly: boolean = false;\n\n  /**\n   * Marks the input field as required, ensuring that the user must fill it out\n   * before submitting the form.\n   */\n  @Prop({ reflect: true })\n  readonly required: boolean = false;\n\n  /**\n   * Alters the input field’s appearance to indicate an error, helping users\n   * identify fields that need correction.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the password\n   * field.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly 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 on form submission.\n   * the rules are applied to the input value via regexes.\n   */\n  @Prop({ reflect: true })\n  readonly pattern: string;\n\n  /**\n   * Defines the type of the input.\n   * @default 'text'\n   */\n  @Prop({ reflect: true })\n  readonly mode: 'text' | 'number' = 'text';\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}` = 'off';\n\n  /**\n   * Hide the button to show/hide the password.\n   */\n  @Prop({ reflect: true })\n  readonly hidePasswordIcon: boolean = false;\n\n  /**\n   * Show/hide the password programmatically.\n   */\n  @Prop({ reflect: true })\n  readonly showPassword: boolean = false;\n\n  /**\n   * Defines whether the password is visible or not.\n   */\n  @State()\n  showPasswordState: boolean = this.showPassword;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emitted when the input value changes.\n   * @bind value\n   */\n  @Event()\n  valueChanged: EventEmitter<string>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region METHODS\n\n  private handleInputContainerClick = () => {\n    this.inputElement.focus();\n  };\n\n  @Watch('showPassword')\n  handleShowPasswordChange(newValue: boolean) {\n    this.showPasswordState = newValue;\n  }\n\n  private togglePasswordVisibility = () => {\n    this.showPasswordState = !this.showPasswordState;\n  };\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key === ' ') {\n      event.preventDefault(); // Prevent the space character from being added\n      setTimeout(() => {\n        this.togglePasswordVisibility();\n      }, 0);\n    }\n  };\n\n  private handleInput = (event: Event) => {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value; // Update the input value without worrying about the space\n    this.valueChanged.emit(input.value);\n  };\n\n  //#endregion METHODS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host>\n        {(this.label || this.el.querySelector('[slot=\"label\"]')) && (\n          <label htmlFor={this.inputId}>\n            <slot name=\"label\">{this.label}</slot>\n          </label>\n        )}\n\n        <div class=\"input-wrapper\">\n          <slot name=\"before-input\"></slot>\n\n          <div class=\"input-container\" onClick={this.handleInputContainerClick}>\n            <slot name=\"leading-input\"></slot>\n\n            <input\n              id={this.inputId}\n              ref={e => (this.inputElement = e)}\n              autofocus={this.autofocus}\n              autocomplete={this.autocomplete}\n              placeholder={this.placeholder}\n              name={this.name}\n              type={this.showPasswordState ? 'text' : 'password'}\n              inputMode={this.mode}\n              value={this.value}\n              required={this.required}\n              maxlength={this.maxlength}\n              minlength={this.minlength}\n              pattern={this.pattern}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n            />\n\n            {!this.hidePasswordIcon && (\n              <nv-iconbutton\n                class=\"toggle-password-icon\"\n                name={this.showPasswordState ? 'eye' : 'eye-off'}\n                size=\"md\"\n                emphasis=\"lower\"\n                onClick={this.togglePasswordVisibility}\n                onKeyDown={this.handleKeyDown}\n                aria-label={\n                  this.showPasswordState ? 'Hide password' : 'Show password'\n                }\n                aria-pressed={this.showPasswordState.toString()}\n              />\n            )}\n\n            {(this.success || this.error) && (\n              <nv-icon\n                name={this.success ? 'circle-check' : 'alert-circle'}\n                class=\"validation\"\n                size=\"md\"\n              />\n            )}\n          </div>\n\n          <slot name=\"after-input\"></slot>\n        </div>\n\n        {(this.description ||\n          this.el.querySelector('[slot=\"description\"]')) && (\n          <div class=\"description\">\n            <slot name=\"description\">{this.description}</slot>\n          </div>\n        )}\n\n        {(this.errorDescription ||\n          this.el.querySelector('[slot=\"error-description\"]')) && (\n          <div hidden={!this.error} class=\"error-description\">\n            <slot name=\"error-description\">{this.errorDescription}</slot>\n          </div>\n        )}\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}

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

@@ -78,6 +78,14 @@ const NvFieldradioDocs = {
             },
             template: h("nv-fieldradio", { "data-storybook-args": true }),
         },
+        {
+            name: nameof(x => x.autofocus),
+            args: {
+                label: 'Autofocus',
+                autofocus: true,
+            },
+            template: h("nv-fieldradio", { "data-storybook-args": true }),
+        },
         {
             name: 'DisabledChecked',
             description: 'Radio button in a disabled state.',

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldradio.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldradio/nv-fieldradio.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,gBAAgB,GAAsC;IAC1D,SAAS,EAAE,eAAe;IAC1B,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YACxB,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC;YAClD,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;aACd;YACD,QAAQ,EAAE,CACR,8BAAqB,qBAAqB;gBACxC,kDAAmC,KAAK,EAAC,UAAU,GAAiB;gBACpE,kDAAmC,KAAK,EAAC,UAAU,GAAiB;gBACpE,kDAAmC,KAAK,EAAC,UAAU,GAAiB,CAC3D,CACZ;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACnD,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,KAAK,EAAE,OAAO;aACf;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACnD,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;aACf;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;YAC5D,IAAI,EAAE;gBACJ,IAAI,EAAE,OAAO;aACd;YACD,QAAQ,EAAE,CACR,yBAAgB,YAAY;gBAC1B,kDAEE,KAAK,EAAC,QAAQ,qBACE,QAAQ,GACT;gBACjB,kDAEE,KAAK,EAAC,OAAO,qBACG,OAAO,GACR,CACb,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACzD,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,WAAW,EAAE,aAAa;aAC3B;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YACnD,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,KAAK,EAAE,IAAI;aACZ;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,gBAAgB,CAAC;YAC9D,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,KAAK,EAAE,IAAI;gBACX,gBAAgB,EAAE,oBAAoB;aACvC;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YACrD,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,OAAO,EAAE,IAAI;aACd;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,MAAM,CAA0B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YACtD,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,IAAI;aACf;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,mCAAmC;YAChD,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,QAAQ,EAAE,IAAI;gBACd,OAAO,EAAE,IAAI;aACd;YACD,QAAQ,EAAE,mDAAmD;SAC9D;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EAAE,oDAAoD;YACjE,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;aACf;YACD,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,OAAO,mBAAoB,CACxB,CACjB;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EAAE,0DAA0D;YACvE,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,WAAW,EAAE,aAAa;aAC3B;YACD,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,aAAa,yBAA0B,CACpC,CACjB;SACF;QACD;YACE,IAAI,EAAE,sBAAsB;YAC5B,WAAW,EACT,gEAAgE;YAClE,IAAI,EAAE;gBACJ,KAAK,EAAE,OAAO;gBACd,KAAK,EAAE,IAAI;gBACX,gBAAgB,EAAE,mBAAmB;aACtC;YACD,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,mBAAmB,+BAAgC,CAChD,CACjB;SACF;KACF;CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvFieldradioDocs: NovaDocs<Components.NvFieldradio> = {\n  component: 'nv-fieldradio',\n  stories: [\n    {\n      name: 'Default',\n      args: { label: 'Label' },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.name),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <fieldset data-class=\"flex flex-col gap-4\">\n          <nv-fieldradio data-storybook-args label=\"Option 1\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 2\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 3\"></nv-fieldradio>\n        </fieldset>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.value),\n      args: {\n        label: 'Label',\n        value: 'value',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.label),\n      args: {\n        label: 'Label',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.labelPlacement),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-fieldradio\n            data-storybook-args\n            label=\"before\"\n            label-placement=\"before\"\n          ></nv-fieldradio>\n          <nv-fieldradio\n            data-storybook-args\n            label=\"after\"\n            label-placement=\"after\"\n          ></nv-fieldradio>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.description),\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.error),\n      args: {\n        label: 'Label',\n        error: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.errorDescription),\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'There is an error!',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.checked),\n      args: {\n        label: 'Label',\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.disabled),\n      args: {\n        label: 'Label',\n        disabled: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'DisabledChecked',\n      description: 'Radio button in a disabled state.',\n      args: {\n        label: 'Label',\n        disabled: true,\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'SlotLabel',\n      description: 'Radio button replacing the label with custom html.',\n      args: {\n        label: 'Label',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotDescription',\n      description: 'Radio button replacing the description with custom html.',\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      description:\n        'Radio button replacing the error description with custom html.',\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'Error Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldradio>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldradioDocs;\n"]}
+{"version":3,"file":"nv-fieldradio.docs.js","sourceRoot":"","sources":["../../../src/components/nv-fieldradio/nv-fieldradio.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 NvFieldradioDocs: NovaDocs<Components.NvFieldradio> = {\n  component: 'nv-fieldradio',\n  stories: [\n    {\n      name: 'Default',\n      args: { label: 'Label' },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.name),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <fieldset data-class=\"flex flex-col gap-4\">\n          <nv-fieldradio data-storybook-args label=\"Option 1\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 2\"></nv-fieldradio>\n          <nv-fieldradio data-storybook-args label=\"Option 3\"></nv-fieldradio>\n        </fieldset>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.value),\n      args: {\n        label: 'Label',\n        value: 'value',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.label),\n      args: {\n        label: 'Label',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.labelPlacement),\n      args: {\n        name: 'group',\n      },\n      template: (\n        <div data-class=\"flex gap-4\">\n          <nv-fieldradio\n            data-storybook-args\n            label=\"before\"\n            label-placement=\"before\"\n          ></nv-fieldradio>\n          <nv-fieldradio\n            data-storybook-args\n            label=\"after\"\n            label-placement=\"after\"\n          ></nv-fieldradio>\n        </div>\n      ),\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.description),\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.error),\n      args: {\n        label: 'Label',\n        error: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.errorDescription),\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'There is an error!',\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.checked),\n      args: {\n        label: 'Label',\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.disabled),\n      args: {\n        label: 'Label',\n        disabled: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: nameof<Components.NvFieldradio>(x => x.autofocus),\n      args: {\n        label: 'Autofocus',\n        autofocus: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'DisabledChecked',\n      description: 'Radio button in a disabled state.',\n      args: {\n        label: 'Label',\n        disabled: true,\n        checked: true,\n      },\n      template: <nv-fieldradio data-storybook-args></nv-fieldradio>,\n    },\n    {\n      name: 'SlotLabel',\n      description: 'Radio button replacing the label with custom html.',\n      args: {\n        label: 'Label',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"label\">Custom Label</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotDescription',\n      description: 'Radio button replacing the description with custom html.',\n      args: {\n        label: 'Label',\n        description: 'Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"description\">Custom Description</span>\n        </nv-fieldradio>\n      ),\n    },\n    {\n      name: 'SlotErrorDescription',\n      description:\n        'Radio button replacing the error description with custom html.',\n      args: {\n        label: 'Label',\n        error: true,\n        errorDescription: 'Error Description',\n      },\n      template: (\n        <nv-fieldradio data-storybook-args>\n          <span slot=\"error-description\">Custom Error Description</span>\n        </nv-fieldradio>\n      ),\n    },\n  ],\n};\n\nexport default NvFieldradioDocs;\n"]}

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

@@ -38,6 +38,12 @@ export class NvFieldradio {
          * Disables the radio button, making it un-selectable.
          */
         this.disabled = false;
+        /**
+         * Applies focus to the input field as soon as the component is mounted. This
+         * is equivalent to setting the native autofocus attribute on an <input>
+         * element.
+         */
+        this.autofocus = false;
     }
     componentWillRender() {
         if (this.message) {
@@ -77,9 +83,9 @@ export class NvFieldradio {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '80bb3754db4eeb929cf833fe73a8c7d7c0e6225e', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '838c8436f3ed6d7edfb6cdc56867e9323252288d', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '602a828308bdc83a478d42b6ff46899214b7ed49', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '70da1608dea085bc1cc63bcb3cbc31621aba31b6', htmlFor: this.inputId }, h("slot", { key: '4edd428f00a2ec5633808ce7cf64b7e7833bb864', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'e377c77bacefcee4f7a23401a32cd9e204b07e47', class: "description" }, h("slot", { key: 'cc2e026dbb9ee463fa83d422ea9df05051e4bf97', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'da4b39a727577af0417acc8b7c571a7565896187', hidden: !this.error, class: "error-description" }, h("slot", { key: '5d64b003bf9dd756e695685342d8f12af9e04815', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: 'cade01b60e51b998455b5c2230a78eea38e0bc37', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '6d8447c0fa3909e02841545d873eea91fa47df4a', type: "radio", id: this.inputId, name: this.name, autofocus: this.autofocus, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '4d5091c83fc3d7252992808957eab4d48f2bc2a2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '54aec63e1cb36ca4da70217dcbc660566cce5d7b', htmlFor: this.inputId }, h("slot", { key: '90532425375b668ae6626fecb856f8f9ceb81988', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '54853df7ac2a43e4de04924fabb2270258b663b8', class: "description" }, h("slot", { key: '9e806a6957feff9555ea2a578fd91ea0253d1157', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f3c90009eba0cef54231c9b38b7829d8b9433563', hidden: !this.error, class: "error-description" }, h("slot", { key: '5b517d44167035b867b7d2cbedeab2a5925156b6', name: "error-description" }, this.errorDescription))))));
     }
     static get is() { return "nv-fieldradio"; }
     static get formAssociated() { return true; }
@@ -345,6 +351,26 @@ export class NvFieldradio {
                 "attribute": "disabled",
                 "reflect": true,
                 "defaultValue": "false"
+            },
+            "autofocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Applies focus to the input field as soon as the component is mounted. This\nis equivalent to setting the native autofocus attribute on an <input>\nelement."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "autofocus",
+                "reflect": true,
+                "defaultValue": "false"
             }
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"nv-fieldradio.js","sourceRoot":"","sources":["../../../src/components/nv-fieldradio/nv-fieldradio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\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-fieldradio',\n  shadow: false,\n  styleUrl: 'nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop()\n  readonly labelBefore: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target?.type === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\n      );\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\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          {(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        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}
+{"version":3,"file":"nv-fieldradio.js","sourceRoot":"","sources":["../../../src/components/nv-fieldradio/nv-fieldradio.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Host,\n  h,\n  Prop,\n  Event,\n  EventEmitter,\n  Listen,\n  Watch,\n  Element,\n} from '@stencil/core';\nimport clsx from 'clsx';\nimport { v4 as uuidv4 } from 'uuid';\n\nimport { type LabelPlacement } from '../../utils/constants';\n\n/**\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-fieldradio',\n  shadow: false,\n  styleUrl: 'nv-fieldradio.scss',\n  formAssociated: true,\n})\nexport class NvFieldradio {\n  @Element() el: HTMLNvFieldradioElement;\n\n  /****************************************************************************/\n  //#region DEPRECATED\n\n  /**\n   * Adds a helpful hint message below the label\n   * @deprecated use description instead.\n   */\n  @Prop()\n  readonly message: string;\n\n  /**\n   * Set the label placement to before the input\n   * @deprecated use labelPlacement instead.\n   */\n  @Prop()\n  readonly labelBefore: boolean = false;\n\n  componentWillRender() {\n    if (this.message) {\n      this.description = this.message;\n    }\n\n    if (this.labelBefore) {\n      this.labelPlacement = 'before';\n    }\n  }\n\n  //#endregion DEPRECATED\n  /****************************************************************************/\n  //#region PROPERTIES\n\n  /**\n   * Sets the ID for the radio button’s input element and the for attribute of\n   * the associated label. If no ID is provided, a random one will be\n   * automatically generated to ensure unique identification, facilitating\n   * proper label association and accessibility.\n   */\n  @Prop({ reflect: true })\n  readonly inputId: string = uuidv4();\n\n  /**\n   * Use this to assign a group name to your radio buttons. When you have\n   * multiple radio buttons with the same name, users will be able to select\n   * only one option within that group, making your forms more organized and\n   * user-friendly.\n   */\n  @Prop({ reflect: true })\n  readonly name: string;\n\n  /**\n   * Defines what data will be sent when the radio button is selected.\n   * This helps you identify which option the user has chosen in your form,\n   * ensuring accurate data collection. When the form is submitted, the data\n   * will consist of a name=value pair.\n   */\n  @Prop({ reflect: true })\n  readonly value: string;\n\n  /**\n   * Sets the text content that is rendered next to the input element of type\n   * radio. This label is essential for accessibility and user clarity, as it\n   * describes the purpose or option of the radio button.\n   */\n  @Prop({ reflect: true })\n  readonly label: string;\n\n  /**\n   * Defines the position of the label relative to the radio button.\n   */\n  @Prop({ mutable: true, reflect: true })\n  labelPlacement: `${LabelPlacement}`;\n\n  /**\n   * Adds a helpful hint message below the label. This description provides\n   * extra information or context about the radio button option, assisting users\n   * in making more informed choices.\n   */\n  @Prop({ mutable: true, reflect: true })\n  description: string;\n\n  /**\n   * Highlight the radio button with error styling. It helps users quickly\n   * identify which option needs attention, improving their form-filling\n   * experience by making issues more visible.\n   * @validator error\n   */\n  @Prop({ reflect: true })\n  readonly error: boolean = false;\n\n  /**\n   * A description that appears when there is an error related to the radio\n   * button.\n   * @validator message\n   */\n  @Prop({ reflect: true })\n  readonly errorDescription: string;\n\n  /**\n   * Controls whether the radio button is selected.\n   */\n  @Prop({ mutable: true, reflect: true })\n  checked: boolean = false;\n\n  /**\n   * Disables the radio button, making it un-selectable.\n   */\n  @Prop({ reflect: true })\n  readonly disabled: boolean = false;\n\n  /**\n   * Applies focus to the input field as soon as the component is mounted. This\n   * is equivalent to setting the native autofocus attribute on an <input>\n   * element.\n   */\n  @Prop({ reflect: true })\n  // eslint-disable-next-line @stencil-community/reserved-member-names\n  readonly autofocus: boolean = false;\n\n  //#endregion PROPERTIES\n  /****************************************************************************/\n  //#region EVENTS\n\n  /**\n   * Emits when the checked state changes.\n   * @bind checked\n   */\n  @Event()\n  checkedChanged: EventEmitter<boolean>;\n\n  //#endregion EVENTS\n  /****************************************************************************/\n  //#region WATCHERS\n\n  /**\n   * Watches for changes to the checked state and emits the new value.\n   * @param {boolean} checked - The new value of the checked state.\n   */\n  @Watch('checked')\n  handleCheckedChange(checked: boolean) {\n    this.checkedChanged.emit(checked);\n  }\n\n  /**\n   * Listens for the change event on the radio button input element and controls\n   * the checked state of the host elements.\n   * @param {Event} event - The change event.\n   */\n  @Listen('change')\n  handleChange(event: Event) {\n    const target = event.target as HTMLInputElement;\n\n    if (target?.type === 'radio') {\n      Array.from(document.getElementsByTagName('nv-fieldradio')).forEach(\n        element => {\n          if (element.name === this.name) {\n            element.checked = false;\n          }\n        },\n      );\n\n      this.checked = target.checked;\n    }\n  }\n\n  //#endregion WATCHERS\n  /****************************************************************************/\n  //#region RENDER\n\n  render() {\n    return (\n      <Host\n        class={clsx(\n          this.labelPlacement === 'before' && 'label-placement-before',\n          this.error && 'error',\n        )}\n      >\n        <input\n          type=\"radio\"\n          id={this.inputId}\n          name={this.name}\n          autofocus={this.autofocus}\n          autocomplete=\"off\"\n          value={this.value}\n          checked={this.checked}\n          disabled={this.disabled}\n        />\n\n        <div class=\"text-container\">\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          {(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        </div>\n      </Host>\n    );\n  }\n\n  //#endregion RENDER\n}\n"]}