@nova-design-system/nova-webcomponents 3.0.0-beta.30 → 3.0.0-beta.33

package/dist/esm/nv-fieldpassword.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-cd557d0a.js';
 import { v as v4 } from './v4-a79185f4.js';
 
 const nvFieldpasswordCss = "nv-fieldpassword{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldpassword[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldpassword[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldpassword[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldpassword[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldpassword label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldpassword .input-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldpassword .input-wrapper .input-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out;position:relative}nv-fieldpassword .input-wrapper .input-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldpassword .input-wrapper .input-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0px 0px 0px var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldpassword .input-wrapper .input-container:has(input:read-only){opacity:0.5;background-color:var(--components-form-field-background-readonly);border-color:var(--nv-field-border-readonly)}nv-fieldpassword .input-wrapper .input-container:has(input:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldpassword .input-wrapper .input-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container input:focus{outline:none}nv-fieldpassword .input-wrapper .input-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldpassword .input-wrapper .input-container nv-icon.validation{color:var(--nv-field-border-default);position:absolute;right:50px}nv-fieldpassword .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldpassword .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}nv-fieldpassword .toggle-password-icon{position:absolute;right:-1px;border:0 solid transparent !important}";
@@ -8,6 +8,67 @@ const NvFieldpassword = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the input element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4();
+        /**
+         * The disabled prop lets you turn off the input field so that users can’t
+         * type in it. When disabled, the field is grayed out and won’t respond to#
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the input field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to type or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the input field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Alters the input field’s appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the input field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * Defines the type of the input.
+         * @default 'text'
+         */
+        this.mode = 'text';
+        /**
+         * The autocomplete prop helps users fill out the input field faster by
+         * suggesting entries they’ve used before, like their email or address.
+         * You can turn it on to make forms more convenient or off to ensure users
+         * always type in fresh data.
+         */
+        this.autocomplete = 'off';
+        /**
+         * Hide the button to show/hide the password.
+         */
+        this.hidePasswordIcon = false;
+        /**
+         * Show/hide the password programmatically.
+         */
+        this.showPassword = false;
+        /**
+         * Defines whether the password is visible or not.
+         */
+        this.showPasswordState = this.showPassword;
         //#endregion EVENTS
         /****************************************************************************/
         //#region METHODS
@@ -30,26 +91,6 @@ const NvFieldpassword = class {
             this.value = input.value; // Update the input value without worrying about the space
             this.valueChanged.emit(input.value);
         };
-        this.inputId = v4();
-        this.label = undefined;
-        this.description = undefined;
-        this.placeholder = undefined;
-        this.name = undefined;
-        this.value = undefined;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.error = false;
-        this.errorDescription = undefined;
-        this.success = false;
-        this.maxlength = undefined;
-        this.minlength = undefined;
-        this.pattern = undefined;
-        this.mode = 'text';
-        this.autocomplete = 'off';
-        this.hidePasswordIcon = false;
-        this.showPassword = false;
-        this.showPasswordState = this.showPassword;
     }
     handleShowPasswordChange(newValue) {
         this.showPasswordState = newValue;
@@ -58,9 +99,9 @@ const NvFieldpassword = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'e33d3781acc832fe374732bc8c0164b965926439' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '27f03dc42fb2a251e669f3e807fd01eee003c2e7', htmlFor: this.inputId }, h("slot", { key: '61d826d1cea9b5035d614503fc187c484252abff', name: "label" }, this.label))), h("div", { key: 'f75cd0ec46d1c92396ff37f7122029b534e46954', class: "input-wrapper" }, h("slot", { key: 'bd54dca65be1b841ed93e534f8738bf685d495a0', name: "before-input" }), h("div", { key: '4e9a7c5aa765a110f655421bf6dad433e5327bd3', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: '8a6ba620bfe1e2b716f58fd544382f2f7d2b6aa2', name: "leading-input" }), h("input", { key: '36c0f4b08067604f40cab2a807318f604786a610', 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: 'dd8cbe23483e3fcfa9ec4b790835cca031dc1d11', 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: '9cccf9bdef256a36131208c40379e1a7c7109d03', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), h("slot", { key: 'ee5afcdd4ab13bbf79166f451208a62c3f868cab', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '195a795c9b498ee6e03cf2ee9ec90c545cc29085', class: "description" }, h("slot", { key: '5490e3158aeeec08e5fda0e2aaa8fdf7923b742a', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '97569ae30b6a0df6a11e687aabc16edd609f4e0b', hidden: !this.error, class: "error-description" }, h("slot", { key: '144baf7c20ed3244bdce250a7eeed76a1b515b13', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: '77ade2d0b5b4282b16925957709433d047a730c7' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '158f0347fa53cebea4b89ceee56c8d92c801861f', htmlFor: this.inputId }, h("slot", { key: '6ad0d4a2b7d0e6c32249f8ecfc221523999a7e86', name: "label" }, this.label))), h("div", { key: '7cab4de8be04d0cbdbaee4b3ea64fcb6d9043ca5', class: "input-wrapper" }, h("slot", { key: '808e2c1308b7e095f5207cd9a9198c4667bf2310', name: "before-input" }), h("div", { key: '23f6b0833be73faef6d46dcf0c007c1c16c59681', class: "input-container", onClick: this.handleInputContainerClick }, h("slot", { key: 'f53ff33bc75dd2417cac55a39e1f24875375c564', name: "leading-input" }), h("input", { key: '70e7e28f957224c7613a1da4b2156afeba706d14', 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: '96742eeecc9de1bf4ae753fc8c64c2e436e5af86', 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: '71666d2e39bc4fe5057ec014cc788f3b734c0e69', name: this.success ? 'circle-check' : 'alert-circle', class: "validation", size: "md" }))), h("slot", { key: '7d232c975753c74ce8419b6258dd63f7ca7ab811', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'f9330dd27bce24c81d2fb58c0da7a8de079deb87', class: "description" }, h("slot", { key: '61b9f61075435d7854603aa9e4700a755e0eeb4f', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'f4e9183622a9451baa054eea9eb7113b38aa72c2', hidden: !this.error, class: "error-description" }, h("slot", { key: '234af9d31bc011493f700f34a707305a8fb421d4', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-fieldpassword.entry.js.map

@@ -1 +1 @@
-{"file":"nv-fieldpassword.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldpassword {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      position: relative;\n\n      input {\n        @include form-field-input();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n\n        position: absolute;\n        right: 50px;\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  .toggle-password-icon {\n    position: absolute;\n    right: -1px;\n    border: 0 solid transparent !important;\n  }\n}\n","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.\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.entry.js","mappings":"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","names":["uuidv4"],"sources":["src/components/nv-fieldpassword/nv-fieldpassword.scss?tag=nv-fieldpassword","src/components/nv-fieldpassword/nv-fieldpassword.tsx"],"sourcesContent":["@import '../../styles/form-field';\n\nnv-fieldpassword {\n  @include form-field-variables();\n  @include form-field-root();\n\n  &[readonly]:not([readonly='false']) {\n    @include form-field-readonly-variables();\n  }\n\n  &[error]:not([error='false']) {\n    @include form-field-error-variables();\n  }\n\n  &[success]:not([success='false']) {\n    @include form-field-success-variables();\n  }\n\n  &[required]:not([required='false']) label {\n    @include form-field-label-required();\n  }\n\n  label {\n    @include form-field-label();\n  }\n\n  .input-wrapper {\n    @include form-field-input-wrapper();\n\n    .input-container {\n      @include form-field-input-container();\n\n      position: relative;\n\n      input {\n        @include form-field-input();\n      }\n\n      nv-icon.validation {\n        @include form-field-icon();\n\n        position: absolute;\n        right: 50px;\n      }\n    }\n  }\n\n  .description {\n    @include form-field-description();\n  }\n\n  .error-description {\n    @include form-field-error-description();\n  }\n\n  .toggle-password-icon {\n    position: absolute;\n    right: -1px;\n    border: 0 solid transparent !important;\n  }\n}\n","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}

package/dist/esm/nv-fieldradio.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-cd557d0a.js';
 import { c as clsx } from './clsx-297c1ffe.js';
 import { v as v4 } from './v4-a79185f4.js';
 
@@ -9,17 +9,35 @@ const NvFieldradio = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.checkedChanged = createEvent(this, "checkedChanged", 7);
-        this.message = undefined;
+        /**
+         * Set the label placement to before the input
+         * @deprecated use labelPlacement instead.
+         */
         this.labelBefore = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the radio button’s input element and the for attribute of
+         * the associated label. If no ID is provided, a random one will be
+         * automatically generated to ensure unique identification, facilitating
+         * proper label association and accessibility.
+         */
         this.inputId = v4();
-        this.name = undefined;
-        this.value = undefined;
-        this.label = undefined;
-        this.labelPlacement = undefined;
-        this.description = undefined;
+        /**
+         * Highlight the radio button with error styling. It helps users quickly
+         * identify which option needs attention, improving their form-filling
+         * experience by making issues more visible.
+         * @validator error
+         */
         this.error = false;
-        this.errorDescription = undefined;
+        /**
+         * Controls whether the radio button is selected.
+         */
         this.checked = false;
+        /**
+         * Disables the radio button, making it un-selectable.
+         */
         this.disabled = false;
     }
     componentWillRender() {
@@ -60,9 +78,9 @@ const NvFieldradio = class {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '45884696429c5f9232102f1aee32bd1930085faf', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: 'ef66e9c39bf0c9f1740b055e77a9bfefb3d6135c', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '972f6f0a53bcfd1ee468195227397011b34f4ca8', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '8713b8a6433da65c8b84a323baebdc643ddd605a', htmlFor: this.inputId }, h("slot", { key: 'bc1b2f7e682242d0da1be9e1c9d385e844568d62', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'c67519cdb09a9a5414a8d37b7013730e32efc700', class: "description" }, h("slot", { key: '5058c3dea12bcb2d00cd55219f4a823d50e55c93', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'cb264c373040e87183e613bd3d434d3c661f47e7', hidden: !this.error, class: "error-description" }, h("slot", { key: '91d8c2e24647ffbce8d6282a2fe1f2f366ef8712', name: "error-description" }, this.errorDescription))))));
+        return (h(Host, { key: 'c180e5204343412df6b2539cd46d7bd53d2d7f19', class: clsx(this.labelPlacement === 'before' && 'label-placement-before', this.error && 'error') }, h("input", { key: '778a3ddc598a81df45f6eecda4660f95af48795a', type: "radio", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: this.checked, disabled: this.disabled }), h("div", { key: '82e3e9ed3cdcd5918f824e5956e720ba04ec3160', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'b906d712188ef0ba06c177021b81b9b8132e2d58', htmlFor: this.inputId }, h("slot", { key: '2c81a91a98d2d4739d6b912a0018826830b17c7f', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '1caa426f06d0d5fcb9fe59e58be7000c854fceb9', class: "description" }, h("slot", { key: 'ba454a12b8f535db62945a145c665f189624dc61', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: 'bf7a31b55f2716cb6436b595d0d96a1974c9c313', hidden: !this.error, class: "error-description" }, h("slot", { key: '9a3b54c1e06d7e42eee9c4ca8e213270b66306b6', name: "error-description" }, this.errorDescription))))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }

package/dist/esm/nv-fieldradio.entry.js.map

@@ -1 +1 @@
-{"file":"nv-fieldradio.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,isJAAisJ,CAAC;AAC1tJ,2BAAe,eAAe;;MC0BjB,YAAY;;;;;2BAkBS,KAAK;uBAuBVA,EAAM,EAAE;;;;;;qBAiDT,KAAK;;uBAcZ,KAAK;wBAMK,KAAK;;IA1FlC,mBAAmB;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;;;;;;;;IAwGD,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,OAAO,EAAE;YAC5B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAChE,OAAO;gBACL,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC9B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;iBACzB;aACF,CACF,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,EAC5D,IAAI,CAAC,KAAK,IAAI,OAAO,CACtB,IAED,8DACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,EAEF,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,EAEA,CAAC,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,MACnD,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB,IACjD,6DAAM,IAAI,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CACzD,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/nv-fieldradio/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldradio-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-default);\n  --nv-fieldradio-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-default);\n  --nv-fieldradio-background-default: var(--components-form-field-background-default);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldradio-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldradio-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldradio-error-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-error);\n  --nv-fieldradio-border-hover: var(--nv-fieldradio-border-default);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-error);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-error);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-field-border-error);\n  --nv-fieldradio-outline-color: var(--color-focus-destructive);\n\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n\n  &:not([disabled]),\n  &[disabled=\"false\"] {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-radio-size);\n  height: var(--form-radio-size);\n  padding: var(--form-radio-inner-circle-padding);\n  flex-direction: column;\n  align-items: flex-start;\n  //gap: 10px;\n  border-radius: var(--radius-rounded-full);\n  border-width: var(--form-radio-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldradio-border-default);\n  background: var(--nv-fieldradio-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldradio-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldradio-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldradio-outline-color));\n\n  &:checked {\n    background: var(--nv-fieldradio-background-checked);\n    border-color: var(--nv-fieldradio-background-checked);\n\n    &:hover,\n    &:focus {\n      border-color: var(--nv-fieldradio-background-checked);\n      background: var(--nv-fieldradio-background-checked);\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      transform: translate(50%, -50%);\n      left: 0;\n      width: var(--form-radio-inner-circle-size);\n      height: var(--form-radio-inner-circle-size);\n      flex-shrink: 0;\n      border-radius: var(--radius-rounded-full);\n      background: var(--nv-fieldradio-dot-color-checked);\n    }\n  }\n\n  &:disabled {\n    border-radius: var(--radius-rounded-full);\n    border-width: var(--form-radio-border-width);\n    border-style: solid;\n    border-color: var(--nv-fieldradio-border-default);\n    background: var(--nv-fieldradio-background-disabled);\n\n    &:checked {\n      &::before {\n        background: var(--nv-fieldradio-dot-color-disabled);\n      }\n    }\n\n    &:hover {\n      border-color: var(--nv-fieldradio-border-default);\n      background: var(--nv-fieldradio-background-disabled);\n    }\n  }\n}\n\nnv-fieldradio {\n  @include fieldradio-variables();\n  @include root-styles();\n\n  &.error {\n    @include fieldradio-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  \n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n\n  label {\n    @include label-styles();\n  }\n\n  input[type=\"radio\"] {\n    @include input-styles();\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","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 FieldLabelPlacement } 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: `${FieldLabelPlacement}`;\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.entry.js","mappings":";;;;AAAA,MAAM,eAAe,GAAG,isJAAisJ,CAAC;AAC1tJ,2BAAe,eAAe;;MC0BjB,YAAY;IANzB;;;;;;;QAwBW,gBAAW,GAAY,KAAK,CAAC;;;;;;;;;;QAuB7B,YAAO,GAAWA,EAAM,EAAE,CAAC;;;;;;;QAiD3B,UAAK,GAAY,KAAK,CAAC;;;;QAchC,YAAO,GAAY,KAAK,CAAC;;;;QAMhB,aAAQ,GAAY,KAAK,CAAC;KAgGpC;IA1LC,mBAAmB;QACjB,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,OAAO,CAAC;SACjC;QAED,IAAI,IAAI,CAAC,WAAW,EAAE;YACpB,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;;;;;;;;IAwGD,mBAAmB,CAAC,OAAgB;QAClC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;KACnC;;;;;;IAQD,YAAY,CAAC,KAAY;QACvB,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;QAEhD,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,MAAK,OAAO,EAAE;YAC5B,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,oBAAoB,CAAC,eAAe,CAAC,CAAC,CAAC,OAAO,CAChE,OAAO;gBACL,IAAI,OAAO,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;oBAC9B,OAAO,CAAC,OAAO,GAAG,KAAK,CAAC;iBACzB;aACF,CACF,CAAC;YAEF,IAAI,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC;SAC/B;KACF;;;;IAMD,MAAM;QACJ,QACE,EAAC,IAAI,qDACH,KAAK,EAAE,IAAI,CACT,IAAI,CAAC,cAAc,KAAK,QAAQ,IAAI,wBAAwB,EAC5D,IAAI,CAAC,KAAK,IAAI,OAAO,CACtB,IAED,8DACE,IAAI,EAAC,OAAO,EACZ,EAAE,EAAE,IAAI,CAAC,OAAO,EAChB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,YAAY,EAAC,KAAK,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,GACvB,EAEF,4DAAK,KAAK,EAAC,gBAAgB,IACxB,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,MACrD,8DAAO,OAAO,EAAE,IAAI,CAAC,OAAO,IAC1B,6DAAM,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,KAAK,CAAQ,CAChC,CACT,EAEA,CAAC,IAAI,CAAC,WAAW;YAChB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,sBAAsB,CAAC,MAC7C,4DAAK,KAAK,EAAC,aAAa,IACtB,6DAAM,IAAI,EAAC,aAAa,IAAE,IAAI,CAAC,WAAW,CAAQ,CAC9C,CACP,EAEA,CAAC,IAAI,CAAC,gBAAgB;YACrB,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,4BAA4B,CAAC,MACnD,4DAAK,MAAM,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,EAAC,mBAAmB,IACjD,6DAAM,IAAI,EAAC,mBAAmB,IAAE,IAAI,CAAC,gBAAgB,CAAQ,CACzD,CACP,CACG,CACD,EACP;KACH;;;;;;;;;;;","names":["uuidv4"],"sources":["src/components/nv-fieldradio/nv-fieldradio.scss?tag=nv-fieldradio","src/components/nv-fieldradio/nv-fieldradio.tsx"],"sourcesContent":["@import \"../../styles/focus-ring\";\n\n@mixin fieldradio-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-default);\n  --nv-fieldradio-border-hover: var(--components-form-field-border-hover);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-default);\n  --nv-fieldradio-background-default: var(--components-form-field-background-default);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-checked);\n  --nv-fieldradio-background-disabled: var(--components-form-field-background-disabled);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-brand);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-shape-foreground-disabled);\n  --nv-fieldradio-outline-color: var(--color-focus-brand);\n}\n\n@mixin fieldradio-error-variables() {\n  --nv-fieldradio-border-default: var(--components-form-field-border-error);\n  --nv-fieldradio-border-hover: var(--nv-fieldradio-border-default);\n  --nv-fieldradio-border-focus: var(--components-form-field-border-error);\n  --nv-fieldradio-background-checked: var(--components-form-field-background-error);\n  --nv-fieldradio-focus-box-shadow: var(--color-focus-destructive);\n  --nv-fieldradio-dot-color-checked: var(--components-form-shape-foreground-default);\n  --nv-fieldradio-dot-color-disabled: var(--components-form-field-border-error);\n  --nv-fieldradio-outline-color: var(--color-focus-destructive);\n\n}\n\n@mixin root-styles() {\n  display: inline-flex;\n  align-items: flex-start;\n  gap: var(--form-gap-x);\n\n  &:not([disabled]),\n  &[disabled=\"false\"] {\n    input,\n    label {\n      cursor: pointer;\n    }\n  }\n}\n\n@mixin label-before-styles() {\n  flex-direction: row-reverse;\n}\n\n@mixin label-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-label-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-label-font-size);\n  font-style: normal;\n  font-weight: var(--form-label-font-weight);\n  line-height: var(--form-label-line-height);\n}\n\n@mixin description-styles() {\n  align-self: stretch;\n  color: var(--components-form-text-description-default);\n  font-family: \"TT Norms Pro\", sans-serif;\n  font-size: var(--form-description-font-size);\n  font-style: normal;\n  font-weight: var(--form-description-font-weight);\n  line-height: var(--form-description-line-height);\n}\n\n@mixin error-description-styles() {\n  @include description-styles();\n\n  color: var(--components-form-text-description-error);\n}\n\n@mixin text-container-styles() {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  flex: 1 0 0;\n}\n\n@mixin input-styles() {\n  appearance: none;\n  position: relative;\n  display: flex;\n  width: var(--form-radio-size);\n  height: var(--form-radio-size);\n  padding: var(--form-radio-inner-circle-padding);\n  flex-direction: column;\n  align-items: flex-start;\n  //gap: 10px;\n  border-radius: var(--radius-rounded-full);\n  border-width: var(--form-radio-border-width);\n  border-style: solid;\n  border-color: var(--nv-fieldradio-border-default);\n  background: var(--nv-fieldradio-background-default);\n\n  &:hover {\n    border-color: var(--nv-fieldradio-border-hover);\n  }\n\n  &:focus {\n    border-color: var(--nv-fieldradio-border-focus);\n  }\n\n  @include focus-ring(var(--nv-fieldradio-outline-color));\n\n  &:checked {\n    background: var(--nv-fieldradio-background-checked);\n    border-color: var(--nv-fieldradio-background-checked);\n\n    &:hover,\n    &:focus {\n      border-color: var(--nv-fieldradio-background-checked);\n      background: var(--nv-fieldradio-background-checked);\n    }\n\n    &::before {\n      content: \"\";\n      position: absolute;\n      top: 50%;\n      right: 50%;\n      transform: translate(50%, -50%);\n      left: 0;\n      width: var(--form-radio-inner-circle-size);\n      height: var(--form-radio-inner-circle-size);\n      flex-shrink: 0;\n      border-radius: var(--radius-rounded-full);\n      background: var(--nv-fieldradio-dot-color-checked);\n    }\n  }\n\n  &:disabled {\n    border-radius: var(--radius-rounded-full);\n    border-width: var(--form-radio-border-width);\n    border-style: solid;\n    border-color: var(--nv-fieldradio-border-default);\n    background: var(--nv-fieldradio-background-disabled);\n\n    &:checked {\n      &::before {\n        background: var(--nv-fieldradio-dot-color-disabled);\n      }\n    }\n\n    &:hover {\n      border-color: var(--nv-fieldradio-border-default);\n      background: var(--nv-fieldradio-background-disabled);\n    }\n  }\n}\n\nnv-fieldradio {\n  @include fieldradio-variables();\n  @include root-styles();\n\n  &.error {\n    @include fieldradio-error-variables();\n  }\n\n  &.label-placement-before {\n    @include label-before-styles();\n  }\n  \n  &[disabled] {\n    // TODO: Find a way to use the --components-form-opacity-disabled variable properly, right now it outputs a value of 50px instead of 0.5.\n    // opacity: var(--components-form-opacity-disabled); Error: Invalid value for --components-form-opacity-disabled (expected a <number> but got \"50px\")\n    opacity: 0.5;\n  }\n\n  label {\n    @include label-styles();\n  }\n\n  input[type=\"radio\"] {\n    @include input-styles();\n  }\n\n  .description {\n    @include description-styles();\n  }\n\n  .error-description {\n    @include error-description-styles();\n  }\n\n  .text-container {\n    @include text-container-styles();\n  }\n}\n","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 FieldLabelPlacement } 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: `${FieldLabelPlacement}`;\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}

package/dist/esm/nv-fieldselect.entry.js

@@ -1,13 +1,71 @@
-import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-e7b35c14.js';
+import { r as registerInstance, c as createEvent, h, a as Host, g as getElement } from './index-cd557d0a.js';
 import { v as v4 } from './v4-a79185f4.js';
 
-const nvFieldselectCss = "nv-fieldselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[display-value]:not([display-value=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldselect[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container select option{background-color:var(--nv-field-background);color:var(--components-form-field-content-text, #1d1d1d);font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select option:checked{background-color:var(--color-orange-500);color:var(--color-base-content-high-emphasis);font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
+const nvFieldselectCss = "nv-fieldselect{--nv-field-border-default:var(--components-form-field-border-default);--nv-field-border-hover:var(--components-form-field-border-hover);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--components-form-field-border-default);--nv-field-border-readonly:var(--components-form-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-brand);--nv-field-background:var(--components-form-field-background-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--form-gap-y);box-sizing:border-box}nv-fieldselect[readonly]:not([readonly=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[display-value]:not([display-value=false]){--nv-field-border-default:var(--components-form-field-border-readonly);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--components-form-field-border-focus);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-background:var(--components-form-field-background-readonly)}nv-fieldselect[error]:not([error=false]){--nv-field-border-default:var(--components-form-field-border-error);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-destructive)}nv-fieldselect[success]:not([success=false]){--nv-field-border-default:var(--components-form-field-border-success);--nv-field-border-hover:var(--nv-field-border-default);--nv-field-border-focus:var(--nv-field-border-default);--nv-field-border-disabled:var(--nv-field-border-default);--nv-field-border-readonly:var(--nv-field-border-default);--nv-field-focus-box-shadow:var(--color-focus-success)}nv-fieldselect[required]:not([required=false]) label::after{content:\"*\";color:var(--components-form-text-required);font-weight:700}nv-fieldselect label{display:flex;align-items:center;gap:var(--form-label-gap);align-self:stretch;color:var(--components-form-text-label-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-label-font-size);font-style:normal;font-weight:500;line-height:var(--form-label-line-height)}nv-fieldselect .select-wrapper{display:flex;flex-wrap:wrap;gap:var(--form-gap-x);align-items:stretch;align-self:stretch}nv-fieldselect .select-wrapper .select-container{display:flex;flex-grow:1;padding:calc(var(--form-field-padding-y) - 1px) var(--form-field-padding-x);justify-content:center;align-items:center;gap:var(--form-field-gap);align-self:stretch;border-radius:var(--form-field-radius);border-width:1px;border-style:solid;border-color:var(--nv-field-border-default);opacity:var(--components-form-opacity-default);background:var(--nv-field-background);transition:all 150ms ease-out}nv-fieldselect .select-wrapper .select-container:hover{border-color:var(--nv-field-border-hover)}nv-fieldselect .select-wrapper .select-container:focus-within{border-color:var(--nv-field-border-focus);box-shadow:0 0 0 var(--focus-field-stroke) var(--nv-field-focus-box-shadow)}nv-fieldselect .select-wrapper .select-container:has(select:disabled){opacity:0.5;background-color:var(--components-form-field-background-disabled);border-color:var(--nv-field-border-disabled)}nv-fieldselect .select-wrapper .select-container input{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container input:focus{outline:none}nv-fieldselect .select-wrapper .select-container input::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container input:read-only{opacity:0.5;background-color:var(--components-form-field-background-readonly, rgba(0, 0, 0, 0.1));border-color:var(--nv-field-border-readonly)}nv-fieldselect .select-wrapper .select-container select{display:flex;align-items:center;flex:1 0 0;overflow:hidden;background-color:transparent;color:var(--components-form-field-content-text);text-overflow:ellipsis;font-size:var(--form-field-font-size);font-style:normal;font-weight:500;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container select:focus{outline:none}nv-fieldselect .select-wrapper .select-container select::placeholder{overflow:hidden;color:var(--components-form-field-content-placeholder);text-overflow:ellipsis;font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-field-font-size);font-style:normal;font-weight:400;line-height:var(--form-field-line-height)}nv-fieldselect .select-wrapper .select-container select option{background-color:var(--nv-field-background);color:var(--components-form-field-content-text, #1d1d1d);font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select option:checked{background-color:var(--color-orange-500);color:var(--color-content-high-text);font-size:var(--form-field-font-size, 16px);font-style:normal;font-weight:500;line-height:var(--form-field-line-height, 24px)}nv-fieldselect .select-wrapper .select-container select.hidden{display:none}nv-fieldselect .select-wrapper .select-container nv-icon.readonly-icon{color:var(--nv-field-border-default)}nv-fieldselect .select-wrapper .select-container nv-icon.validation{color:var(--nv-field-border-default)}nv-fieldselect .description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height)}nv-fieldselect .error-description{align-self:stretch;color:var(--components-form-text-description-default);font-family:\"TT Norms Pro\", sans-serif;font-size:var(--form-description-font-size);font-style:normal;line-height:var(--form-description-line-height);color:var(--components-form-text-description-error)}";
 const NvFieldselectStyle0 = nvFieldselectCss;
 
 const NvFieldselect = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.valueChanged = createEvent(this, "valueChanged", 7);
+        /****************************************************************************/
+        //#region STATES
+        this.computedDisplayValue = '';
+        this.internalReadonly = false;
+        //#endregion DEPRECATED
+        /****************************************************************************/
+        //#region PROPERTIES
+        /**
+         * Sets the ID for the select element and the for attribute of the associated
+         * label. If no ID is provided, a random one will be automatically generated
+         * to ensure unique identification, facilitating proper label association and
+         * accessibility.
+         */
+        this.inputId = v4();
+        /**
+         * The disabled prop lets you turn off the select field so that users can’t
+         * choose something. When disabled, the field is grayed out and won’t respond to
+         * clicks or touches.
+         */
+        this.disabled = false;
+        /**
+         * Display the select field’s content without allowing users to change it.
+         * Users can still click on it, select, and copy the text, but they won’t be
+         * able to change or delete anything.
+         */
+        this.readonly = false;
+        /**
+         * Marks the select field as required, ensuring that the user must fill it out
+         * before submitting the form.
+         */
+        this.required = false;
+        /**
+         * Alters the select field’s appearance to indicate an error, helping users
+         * identify fields that need correction.
+         * @validator error
+         */
+        this.error = false;
+        /**
+         * Changes the select field’s appearance to indicate successful input or
+         * validation.
+         */
+        this.success = false;
+        /**
+         * When enabled, allows the select to handle multiple selections.
+         */
+        this.multiple = false;
+        /**
+         * The value of the select field.
+         * - If `multiple` is `false`, it's a single string.
+         * - If `multiple` is `true`, it's a comma-separated string of selected values.
+         */
+        this.value = '';
+        /**
+         * When enabled, displays the value element instead of the label when readonly.
+         * By default, the label is displayed in readonly mode. Also it automatically
+         * sets the component to readonly.
+         */
+        this.displayValue = false;
         //#endregion WATCHERS
         /****************************************************************************/
         //#region METHODS
@@ -39,23 +97,6 @@ const NvFieldselect = class {
                 this.selectElement.focus();
             }
         };
-        this.computedDisplayValue = '';
-        this.internalReadonly = false;
-        this.message = undefined;
-        this.validation = undefined;
-        this.selectId = v4();
-        this.label = undefined;
-        this.description = undefined;
-        this.name = undefined;
-        this.disabled = false;
-        this.readonly = false;
-        this.required = false;
-        this.error = false;
-        this.errorDescription = undefined;
-        this.success = false;
-        this.multiple = false;
-        this.value = '';
-        this.displayValue = false;
     }
     componentWillRender() {
         this.updateDisplayValue(); // Ensure display value is updated before render
@@ -263,13 +304,13 @@ const NvFieldselect = class {
      * @returns {HTMLStencilElement} The HTML element to render.
      */
     render() {
-        return (h(Host, { key: '067e8fb039aae38ff68121c7c3d7bd677ff9a48c' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'ea707a112dcec12aa943e1ee477d8a9d03181312', htmlFor: this.selectId }, h("slot", { key: '2ea8b094bad2b1783ebcf1e588cc74993885ecad', name: "label" }, this.label))), h("div", { key: '2fe99ccec826acc0f7a3e06799f7375a470f70a6', class: "select-wrapper" }, h("slot", { key: '8fe8e4a2037f5d9e0cd6f54ff04cc39b35bcf352', name: "before-input" }), h("div", { key: 'b1464e7fbb698e6b36fb71f13b18554626991fcd', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: 'bf1d7391ecb23d07f43fbbfb84bb1265fc39f715', name: "leading-input" }), this.internalReadonly && (h("input", { key: 'a9a2b66e21e1b0b9fe61c72451d408bb097628ac', id: this.selectId + '-readonly', type: "text", value: this.computedDisplayValue, readOnly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
-                ? `${this.selectId}-error`
-                : `${this.selectId}-description` })), h("select", { key: 'b485933c80bfdacc6711218f7f70ac49073fb80c', id: this.selectId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
-                ? `${this.selectId}-error`
-                : `${this.selectId}-description` }, h("slot", { key: '71d627ccb58ea5af2c411307ee53fd52e0fce6a9' })), this.internalReadonly && (h("nv-icon", { key: 'b14356aa40948fc083bb9741e55d83e002c4ef3a', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (h("nv-icon", { key: '79cd6e53e7b6448489c51f40c46498a9549b5220', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '41af1b3709fb5441dfb3dfc5dce309e2b6660298', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '30613a1d3af2954ef689991fca82c8b213f238d8', name: "after-input" })), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: '0aaced12d0368e36251512f56592f57dd4f0e846', class: "description", id: `${this.selectId}-description` }, h("slot", { key: '502c52ed64f90e79c7c3b7e9bb5555e21073adfd', name: "description" }, this.description))), (this.errorDescription ||
-            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '350ecf381d1f466d5c93e19ba2c8609b1d3e5713', class: "error-description", id: `${this.selectId}-error` }, h("slot", { key: '871693ad30b041ac0ddac4f79cf6fdec35dcebaa', name: "error-description" }, this.errorDescription)))));
+        return (h(Host, { key: 'd9334ee7b0373a6d7c48b144107fad9420dfb8b0' }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'fd69171f1609c8aa450d81f81149da6a42ab15f3', htmlFor: this.inputId }, h("slot", { key: '26bb813a2919a62fb71c23a0564704ea9bb2b118', name: "label" }, this.label))), h("div", { key: '14ce1ff79a90c1bcbc3f757905347dd96bbb9708', class: "select-wrapper" }, h("slot", { key: '99eecebeaa197dc27306471ad8d813e16b8597b5', name: "before-input" }), h("div", { key: 'd594672879ef8cf8aad8df170eda2210c094a9e2', class: "select-container", onClick: this.handleSelectContainerClick }, h("slot", { key: '0cf4321aa3bab4b2fedf6c8819914713eacd8ee2', name: "leading-input" }), this.internalReadonly && (h("input", { key: '99e5bf60ff1f263bf28e9aaf3610db27fe1507fc', id: this.inputId + '-readonly', type: "text", value: this.computedDisplayValue, readonly: true, class: "readonly-input", "aria-readonly": "true", "aria-label": this.label, "aria-describedby": this.error
+                ? `${this.inputId}-error`
+                : `${this.inputId}-description` })), h("select", { key: 'f7581c343c875e267eea166f35f195ee8432eaf1', id: this.inputId, ref: el => (this.selectElement = el), name: this.name, disabled: this.disabled, required: this.required, multiple: this.multiple, onChange: this.handleSelectChange, class: this.internalReadonly ? 'hidden' : '', "aria-label": this.label, "aria-describedby": this.error
+                ? `${this.inputId}-error`
+                : `${this.inputId}-description` }, h("slot", { key: '02745ef20836ae3001b4f6b4cb623100ddc97725' })), this.internalReadonly && (h("nv-icon", { key: 'feb701a5665c82234a00ce411afed52a7a3ddd72', name: "chevron-down", class: "readonly-icon", size: "sm" })), this.error && (h("nv-icon", { key: 'bc43f872fce4fdb5940020ca3ac89fda8d6a9709', name: "alert-circle", class: "validation", size: "sm" })), this.success && (h("nv-icon", { key: '0a04cd146c865c512a6817df83540ffce2d0d308', name: "circle-check", class: "validation", size: "sm" }))), h("slot", { key: '495e2d37897c15d2e2dee95310ae536b03be5822', name: "after-input" })), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '3bf2e184784d98940e2ee11fb4f8d1730281bc89', class: "description", id: `${this.inputId}-description` }, h("slot", { key: 'da02156b85bace7c898e5792cd9db37feab50839', name: "description" }, this.description))), (this.errorDescription ||
+            this.el.querySelector('[slot="error-description"]')) && (h("div", { key: '5e95ce042deaad2eec68cb4d29ed6fea6f2d3f4c', class: "error-description", id: `${this.inputId}-error` }, h("slot", { key: 'e693e1eb32737de9e0d533b8c74b5d87fd7ce0f5', name: "error-description" }, this.errorDescription)))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }